HTML基础教程-CSDN博客

本文链接：https://blog.csdn.net/qq_40102768/article/details/98170952

一.HTML网页结构

1.什么是HTML
HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。超文本指的是超链接，标记指的是标签。
2.HTML文件
1).HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑.
2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
3.HTML基本结构

文档声明<!DOCTYPE html>
HTML文档<html lang="en">
页头<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
页身<body>

</body>
</html>

4.HTML文档规范与注释
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

 <!-- 这是一段注释 -->

二.HTML标签

1.文本标签

<h1></h1> 到<h6></h6>分别代表一级到六级标题
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...<.strong> 强调加粗
<cite>...</cite> 作品的标题（引用）
<sub>...</sub> 下标     <sup>...</sup>上标 
<del>...</del>删除线
<br/>换行
<p>...<.p> 换段
<hr/> 水平分割线

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

</body>
</html>

在这里插入图片描述
2.列表标签

3.div与span标签

<div>...</div>   常用于组合块级元素，以便通过CSS来对这些元素进行格式化
<span>...</span>   常用于包含的文本，可以使用CSS对其进行样式定义，或者使用JavaScript进行操作

4.图片标签img

<img> 标签定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。
属性：src: 图片名及url地址		title：文字提示属性
         alt: 图片加载失败时的提示信息	width/height：	图片宽度/高度

在这里插入图片描述
5.超链接标签

<a href=" ">...</a> 超级链接标签
href: 必须，指的是链接跳转地址;
target: 表示链接的打开方式。
		_blank  新窗口 , 
		_self   本窗口（默认） 
title：文字提示属性

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>文字标签</h1>
<!--a标签时行内元素, href指定的时跳转的连接地址, traget指定是否开启新窗口打开链接-->
<a href="http://www.baidu.com"> 百度一下</a><br/>
<a href="http://www.baidu.com" target="_blank"> 百度一下</a><br/>
<a href="http://www.baidu.com" target="_blank" title="text"> 百度一下</a>

在这里插入图片描述

锚点链接：

1. 定义一个锚点：
	<a id="a1"></a> 百度一下 <a name="a1"></a>
    2. 使用锚点：    
	<a href="#a1">跳到a1处</a>

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>锚点</h1>
<a href="#a1">跳到a1处</a>
<a href="#a2">跳到a2处</a>


<h2 id="a1">标题一</h2>
<p>标题一内容</p>

<h2 id="a2">标题二</h2>
<p>标题二内容</p>

6.表格标签

表格标签:table
行标签:tr
单元格(表示列的概念):td
表头:th :加粗并且居中
表格标题:caption

在这里插入图片描述

标签合并:
行合并:rowspan
列合并:colspan
标签常用属性:
border:边框
width:宽度
height:高度
algin:对齐方式
center,left,right

我们做一个如下的课程表表格：
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<table border="1px" width="50%" align="center" style="text-align: center;background-color:lightgray">
    <caption>课程表</caption>
    <tr>
        <td>项目</td>
        <td colspan="5">上课</td>
        <td colspan="2">休息</td>
    </tr>
    <tr>
        <td>星期</td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
        <td>周六</td>
        <td>周日</td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4">休息</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="2">休息</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
    </tr>


</table>


</body>
</html>

7.form表单标签

常用属性：
action属性:提交的目标地址(URL)
method属性:提交方式:get(默认)和post
get方式:
URL地址栏可见
长度受限制
相对不安全.
post方式:
URL地址不可见
长度不受限制
相对安全.

8.表单项标签
表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
在这里插入图片描述
代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h5>单行文本框(输入可见)</h5>
<input type="text">
<h5>密码输入框(输入不可见)</h5>
<input type="password">
<h5>多选框(可以全都选)</h5>
		<label><input type="checkbox" name="like" value="0">音乐</label>
		<label><input type="checkbox" name="like" value="1">旅游</label>
	
<h5>单选框(只能选一个)</h5>
		<label><input type="radio" name="sex" value="男生">男生</label>
		<label><input type="radio" name="sex" value="女生">女生</label>
<h5>文件上传选择</h5>
<input type="file">
<h5>普通按钮</h5>
<input type="button" value="提交">
<h5>提交按钮</h5>
<input type="submit" value="提交">
<h5>重置按钮</h5>
<input type="reset">

</body>
</html>

在这里插入图片描述
9.下拉列表标签

<select>...</select> 标签创建下拉列表
 name属性:定义名称,用于存储下拉值的
 size：定义菜单中可见项目的数目，html5不支持
 disabled 当该属性为 true 时，会禁用该菜单。 
 multiple 多选
<option>... </option>  下拉选择项标签,用于嵌入到<select>标签中使用的;
 *value属性:下拉项的值
 *selected属性:默认下拉指定项.

创建一个带有预选值的下拉列表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>