HTML 标签
第一章：HTML 简介
一、基础语法
1. 内容类型：HTML5 的文件扩展名为 html 或 htm，内容类型为 text/html。
2. HTML5 不区分英文字母的大小写，但推荐小写。
3. 代码注释：① html 文档中 <!--内容-->
② css 文档中 /**/
4. HTML5 标签及属性
1) 标签分为：单标签 (空标签)、双标签。
2) 标签的属性
<标签名 属性名="属性值" ......>< /标签名>
<标签名 属性名="属性值" ...... />
属性值可以是双引号，也可以是单引号，更可以不写引号。
具有布尔值的属性。
false：①不写属性 ②属性值设为 false
true：①只写属性 ②不填属性值 ③属性值为属性名 ④属性值设为 true
属性分为全局属性与特定属性。全局属性是所有 HTML 都可以设置和拥有的属性。
全局属性可以参考 全局属性 - HTML | MDN 链接。常见的全局属性如下：
id：定义唯一标识符（ ID ），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样 式（使用 CSS ）时标识元素。
class：一个以空格分隔的元素的类名（ classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选 择和访问特定的元素。
style：给元素添加内联样式。
name
title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。
lang：指定元素内容的语言，这对于语音合成工具、翻译工具和搜索引擎等是非常有用的。
hidden：隐藏 HTML 元素。
data-*：允许开发者在 HTML 元素中存储自定义数据。
contenteditable：指定元素的内容是否可以被用户编辑。如果设置为 true，则用户可以直接在页面上编辑元素的内容。如果设置为 false，则用户不能编辑元素的内容。
用途：富文本框。
3) 元素、标签名、标签要区分开。
例：p 叫标签名、<p> 叫标签，准确说是开始标签、</p> 叫标签，准确说是结束标签、<p>hello HTML！</p> 叫元素。
Content 有时也称为标签体。
5. 参考文档
MDN【推荐】：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
W3C：https://www.w3.org/TR/html5
二、基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>第一个网页</title>
</head>
<body>
<!-- 这是一个 p 元素 -->
<p>hello HTML！</p>
</body>
</html>1. 文档类型与版本声明
<!DOCTYPE html>
作用：
① 指定文档类型
<!DOCTYPE html>声明告诉浏览器这个文档是 HTML5 文档。这有助于浏览器正确地解析和渲染页面内容。
② 标准模式和怪异模式
- 浏览器有两种渲染模式：标准模式和怪异模式。标准模式遵循最新的 HTML 和 CSS 规范，而怪异模式则模仿旧版浏览器的行为。
<!DOCTYPE html>声明会触发标准模式，确保页面按照现代标准进行渲染。如果没有这个声明，浏览器可能会进入怪异模式，导致页面显示不正确。
2. root 标签
W3C 标准建议为 html 元素增加一个 lang 属性。作用：
① 帮助语音合成工具确定要使用的发音。
② 帮助翻译工具确定要使用的翻译规则。
3. <head> 中相关标签
1）页面标题标签
<title></title>
2）元信息标签
[1] <meta charset="UTF-8">
[2] <meta name="" content="">
Name 属性值：
| 属性 | 说明 | 备注 |
|---|---|---|
| author | 作者 | |
| description | 描述 | |
| keywords | 关键字 | 多个关键字用英文状态下的 , 隔开 |
更多 name 取值参见 标准元数据名称。
[3] 自动跳转
http-equiv 是 HTML <meta> 标签的一个属性，它可以用来模拟 HTTP 响应头。
<meta http-equiv="refresh" content="2;url=">标签的意思解释：
http-equiv="refresh"：表示这个<meta>标签的作用是刷新页面。content="2;url="：定义了刷新或重定向的时间和目标 URL。- 2 表示在 2 秒后执行刷新或重定向。
url=后面通常跟着目标 URL，表示要重定向到的页面地址。如果没有指定 URL，则表示简单地刷新当前页面。
[4] OG 协议
当用户分享一个链接时，社交媒体会抓取该网页的 Open Graph 元数据，并根据这些数据生成一个预览卡片，包括标题、描述、图片等内容。
| 标签 | 功能 |
|---|---|
og:title | 定义网页的标题（社交媒体分享时显示的标题）。 |
og:description | 定义网页的描述（社交媒体分享时的摘要）。 |
og:image | 定义网页的图片（社交媒体分享时显示的缩略图）。 |
og:url | 定义网页的 URL 地址（用于指向网页的链接）。 |
og:type | 定义网页的内容类型（如 website、article、video.movie 等）。 |
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Learn Open Graph Protocol">
<meta property="og:description" content="This is an example of how to use Open Graph meta tags to improve social media sharing.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags (Optional) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learn Open Graph Protocol">
<meta name="twitter:description" content="This is an example of how to use Open Graph meta tags to improve social media sharing.">
<meta name="twitter:image" content="https://example.com/og-image.jpg">可以使用在线网站生成各种社交应用的 OG 配置：OpenGraph
3）网页的 css 规范
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="icon" type="image/png" sizes="32x32" href="path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="path/to/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="path/to/apple-touch-icon.png">
<link rel="manifest" href="path/to/site.webmanifest"><link rel="manifest" href="path/to/site.webmanifest"> 用于指定 Web 应用清单文件（ Web App Manifest ）的路径。Web 应用清单文件是一个 JSON 文件，包含了有关网站作为 Web 应用程序的信息。它允许用户将网站添加到他们的设备主屏幕上，以创建一个类似于原生应用程序的快捷方式。
举个例子，假设你的网站提供了一个 Web 应用清单文件，其中包含了应用程序的名称、图标、启动画面等信息。通过在 HTML 文档中添加 <link rel="manifest" href="path/to/site.webmanifest">，你可以告诉浏览器该清单文件的位置。当用户访问你的网站时，浏览器会检查清单文件并根据其中的信息，将网站作为一个可安装的 Web 应用程序呈现给用户。用户可以选择将网站添加到他们的设备主屏幕上，从而创建一个快捷方式，以便更轻松地访问和使用你的网站。
这样，你的网站将像一个原生应用程序一样，在用户的设备主屏幕上显示图标和名称，提供更便捷和一体化的用户体验。
这些 <link> 元素是用于定义网站的不同图标和清单文件，以便在各种设备和浏览器环境中正确地显示和识别网站。
<link rel="apple-touch-icon" sizes="180x180" href="path/to/apple-touch-icon.png">：这个标签定义了一个 Apple Touch 图标，用于 iOS 设备。sizes="180x180"指定了图标的尺寸为 180x180 像素，href="path/to/apple-touch-icon.png"指定了图标文件的路径。<link rel="icon" type="image/png" sizes="32x32" href="path/to/favicon-32x32.png">：这个标签定义了一个 32x32 像素的 PNG 图标。这个图标通常用于网站的 favicon，可以在多种浏览器环境中显示。<link rel="icon" type="image/png" sizes="16x16" href="path/to/favicon-16x16.png">：这个标签定义了一个 16x16 像素的 PNG 图标，也是用于网站的 favicon。这个尺寸的图标适用于需要较小图标的场景。<link rel="manifest" href="path/to/site.webmanifest">：这个标签指向一个 Web 应用清单文件（ Web App Manifest ），它包含了有关网站作为 Web 应用程序的信息，如名称、图标、颜色主题等。这有助于将网站转换为可安装在设备主屏幕上的 Web 应用程序。
4）调用 JavaScript
<script language="javascript" src="menu.js"></script>
注意：language 属性已经被废弃，现在推荐使用 type 属性来指定脚本的类型。
5）style 标签
6）base 标签
<base> 是一个 HTML 元素，它用于为页面上的所有相对 URL 定义默认的基准 URL 或目标。
- href 属性：定义了页面中所有相对链接的基准 URL。例如，如果你设置
<base href="http://example.com">，那么页面中的相对链接<a href="page.html">实际上会链接到http://example.com/page.html。 - target 属性：定义了页面中所有链接和表单的默认目标，决定它们在何处打开。例如，如果你设置
<base target="_blank">，那么页面中的所有链接都会在新窗口或新标签页中打开。_blank表示新窗口，_self表示当前窗口或标签页。
注意：一个页面中最多只能有一个 <base> 元素，且必须位于 <head> 元素内部。
第二章：常用元素
一、文本标签
1. 标题与段落标签
1) 标题标签：<hn></hn> 其中 n：1 ~ 6 重要性依次递减，大小依次变小。
| 属性 | 属性值 |
|---|---|
| align | Left、right、center |
2) 段落标签：<p></p>
| 属性 | 属性值 |
|---|---|
| align | Left、right、center |
3) 水平分隔线标签：<hr>
| 属性 | 参数 | 功能 | 单位 | 默认值 |
|---|---|---|---|---|
| size | 设置水平分隔线的粗细 | pixel | 2 | |
| align | Left center right | 设置水平分隔线的对齐方式 | center | |
| width | 设置水平分隔线的宽度 | Pixel、％ | 100％ | |
| color | 设置水平分隔线的颜色 | blank | ||
| noshade | false true | 设置水平分隔线的 3D 阴影 | false |
4) 换行标签：<br />
2. 文本的格式化标签
| 标签 | 说明 |
|---|---|
<b></b> | 粗体 |
<i></i> | 斜体 |
<strong></strong> | 表示强调，一般为粗体 |
<em></em> | 表示强调，一般为斜体 |
<del></del> | 删除线 |
<ins></ins> 或者 <u></u> | 加下画线 |
<sup></sup> | 上标 |
<sub></sub> | 下标 |
<pre></pre> | 按原文显示 |
3. 特殊字符标签 / 字符实体
HTML 实体是一段以连字号（ & ）开头、以分号（ ; ）结尾的文本。
字符串实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如 “不换行空格“）。也可以用实体来代替其他难以用标准键盘键入的字符。
| 特殊字符 | 字符代码 | 特殊字符 | 字符代码 |
|---|---|---|---|
| 空格 | | " | " |
| < | &It; | © | © |
| > | > | ® | ® |
| & | & | X | × |
注意：实体对大小写敏感。
二、图像与超链接
1. 图像标签
<img src="图像地址URL" />
| 属性 | 描述 | 属性值 |
|---|---|---|
| src | 图像 url 的路径。也可以把图片转为 base64 后直接放在 src 属性里。 | |
| title | 提示文本。鼠标悬停时显示该内容。 | |
| alt | 替换文本。图片不能显示的时候，显示该文字。 | |
| width | 图像的宽度。只需要写数字，不能带单位。 | |
| height | 图像的高度。只需要写数字，不能带单位。 | |
| align | 图像和文字之间的对齐方式 | top middle bottom left right |
| border | 边框宽度 | |
| hspace | 水平间距，设置图像左侧和右侧的空白。 | |
| vspace | 垂直间距，设置图像上面和下面的空白。 |
注：① 若 width 与 height 只设置其中一个，另一个自动缩放；② 图像默认情况与文字基线对齐。
img {
border: 2px solid #ccc; /* 替代 border 属性 */
margin: 10px 15px; /* 替代 vspace 和 hspace */
float: left/right; /* 替代 align="left/right" */
vertical-align: middle; /* 替代 align="middle" */
}2. 超链接与路径
1) 超链接标签：<a>
| 属性 | 属性值 | 默认值 | 说明 / 默认值 |
|---|---|---|---|
| href | # | 资源地址 | |
| target | _self: 原窗口 _blank: 新窗口 | _self | 控制打开方式 |
| title | 链接提示文字 | ||
| download | url | 填写此属性，就会调用浏览器下载功能。但仅支持当前资源与打开的 HTML 页面为同一台服务器（同源）。 |
href 的书写格式：相对路径和绝对路径。
绝对路径：在硬盘上的真正路径。
相对路径：src=”nav.jpg” 和 src=”./nav.jpg” 说明与 index.html 为同一目录。
src=”img/nav.jpg” 说明以 index.html 为路径，在 img 子目录下。
src=”../nav.jpg” 说明在 index.html 目录的上一级中。
2) 锚点链接
定义语法：<h3 name="锚点名">文字</h3> 或者 <h3 id="锚点名">文字</h3>
链接语法：<a href="#锚点名">链接的文字</a>
3) 影像地图
<img src="图像URL" usemap="#影像地图名称">
<map name="影像地图名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>shape 属性值：① rect 矩形；② circle 圆形区域；③ poly 多边形区域。
coords 坐标定位方式：① rect 左上角与右下角；② circle 圆心与半径；③ poly 逆时针或顺时针经过的相关坐标记录，一般由开发工具生成。
4) <a> 其他用法
<!-- 网站链接 -->
<a href="https://xxx.com">课程介绍</a>
<!-- 锚点 -->
<a href="#show">写信给我</a>
<!-- 电子邮件链接 -->
<a href="mailto:123456@qq.com">写信给我</a>
<!-- 电话 -->
<a href="tel:10086">10086</a>
<!-- 短信 -->
<a href="sms:10086">发短息给我</a>
<!-- 下载压缩包 -->
<a href="https://xxx.com/archive/html.zip">下载 HTML 课件</a>拓展：a 标签如果没有转为块级元素，直接在里面放图片标签，发现 a 标签的高度只有一行文字的大小（因为 a 是行内级元素），但单击图片任意区域可以正常跳转（因为 a 标签具有穿透性）。
3. iframe 标签
利用 iframe 元素可以实现在一个 HTML 文档中嵌入其他 HTML 文档。
<iframe src="" name="" frameborder="" width="" height=""></iframe>frameborder 属性用于规定是否显示边框。
- 1 ：显示。
- 0 ：不显示。
a 元素 target 还可以取下面的值。
- _parent ：在父窗口中打开 URL。
- _top ：在顶层窗口中打开 URL。
问：发现在 src 属性上填写百度搜索（
https://www.baidu.com）网站，无法正常显示。到底百度是怎么禁用的？答：在
www.baidu.com返回的响应头中有X-Frame-Options: sameorigin字段，意思是只允许同源（相同的协议、主机和端口）页面去请求。
比如：在127.0.0.1:8080/index.html网页引用了百度搜索网站，百度搜索网站发现不是同源页面的请求，就拒绝了。
name 属性的巧用
html<body> <a href="http://www.taobao.com" target="yxts">淘宝</a> <a href="http://www.163.com" target="yxts">网易</a> <a href="../01-讲解作业/01-简历表格.html" target="yxts">简历</a> <br> <form action="http://www.so.com/s" target="yxts"> <input type="text" name="wd"> <button>搜索</button> </form> <hr> <iframe src="" width="1200" height="600" name="yxts"></iframe> </body>iframe 的 name 属性可以与 a、form 的 target 属性关联起来，这样超链接打开的内容就会显示在对应的 iframe 中。
三、表格标签
| 标签名 | 标签的语义和作用 | 标签的属性 |
|---|---|---|
| table | 表格 | width: 设置表格的宽度。属性值是像素值或百分比。 height: 设置表格的高度。属性值是像素值或百分比。 border: 设置表格的边框。属性值是 1 或 ""。默认为 ""，表示没有边框。 bordercolor: 表格边框颜色。 cellspacing: 设置单元格之间的间隙。属性值是像素值，默认 2 像素。 cellpadding: 规定单元边沿与其内容之间的空白。属性值是像素值，默认 1 像素。 align: 规定表格相对周围元素的对齐方式。属性值是 left/top/center。 background: 表格的背景图片。 bgcolor: 表格的背景颜色。 frame: 见下文。 |
| caption | 表格标题 | |
| thead | 表格头部 | |
| tbody | 表格主体 | |
| tfoot | 表格页脚（表注） | |
| tr | 行 | align: 行内容的水平对齐方式，可以是 left、center、right。 valign: 行内容的垂直对齐方式，可以是 top、middle、bottom。 bgcolor: 行的背景颜色。 |
| td | 单元格 | width / heigh: 单元格的宽和高，接受绝对值(意思是不可为负)及相对值(百分比) 。 align: 单元格内容的水平对齐方式，可选 left、center、right。 valign: 单元格内容的垂直对齐方式，可选 top、middle、bottom。 bgcolor: 单元格背景颜色。 colspan: 指定跨越的列数。 rowspan: 指定跨越的行数。 |
| th | 表头单元格 | colspan: 指定跨越的列数。 rowspan: 指定跨越的行数。 |
当为表格 table 元素设置 border 时，可以为其设置的边框包括上边框、下边框、左边框、右边框。这 4 个边框都可以设置为显示或隐藏状态，见下表：
| frame 的值 | 描述 | frame 的值 | 描述 |
|---|---|---|---|
| box | 显示整个表格边框 | alove | 只显示表格的上边框 |
| void | 不显示表格边框 | below | 只显示表格的下边框 |
| hsides | 只显示表格的上下边框 | lhs | 只显示表格的左边框 |
| vsides | 只显示表格的左右边框 | rhs | 只显示表格的右边框 |
注意：
thead、tbody、tfoot、tr 都有属性 height、align、valign。
th、td 都有属性 width、height、align、valign。
tr、thead、tbody、tfoot 没有 width 属性。
设置单元格宽高
给 td、th 设置 width 和 height 属性
- 给 td、th 设置 width 属性，相当于设置列宽。如果给一列中的多个单元格设置 width，最大的宽度生效。
- 给 td、th 设置 height 属性，相当于设置行高。同上。
给 tr、td 设置 height 有什么区别
- 给 th、td 设置 height，实际行高会在设置的基础上加上上下的 cellpadding。
- 给 tr 设置 height，就会是总行高。
valign="middle" 本质是加 vertical-align: middle;
浏览器给单元格默认垂直方向居中
vertical-align: middle;，所以 rowspan 的时候，不需要加任何属性就能垂直方向居中。
四、列表标签
列表标签可嵌套使用，浏览器会自动分层排列。
无序列表
<ul>
<li></li>
</ul>ul 属性：type=""（值可为 disc 实心圆、circle 空心圆、square 小方块。默认为实心圆）。
有序列表
<ol>
<li></li>
</ol>ol 的 type 属性：
| Type 类型 | 描述 |
|---|---|
| type=1 | 表示列表项目用数字标号 (1，2，3，...) |
| type=A | 表示列表项目用大写字母标号 |
| type=a | 表示列表项目用小写字母标号 |
| type=Ⅰ | 表示列表项目用大写罗马数字标号 |
| type=i | 表示列表项目用小写罗马数字标号 |
此外 ol，还使用 start 属性表示有序列表的起始值，而 reversed 属性表示降序。
自定义列表
在 HTML 标签中，<dl>（Definition List）标签用于定义描述列表，该标签会与 <dt>（（Definition Term）和 <dd>（Definition Description）一起使用。
其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1-解释1</dd>
<dd>名词1-解释2</dd>
</dl><dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd>。
五、表单标签
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息 3 个部分构成。
也有说表单由表单域、表单标签、表单按钮这三个部分组成。
1. 表单域
表单域是一个包含表单元素的区域。
在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称" target="_self">
<!-- 各种表单元素控件 -->
</form>常用属性。
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
| method | get / post | 用于设置表单数据的提交方式，其取值为 get 或 post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
| target | 同超链接的 target 属性 |
2. 表单控件
- input 输入表单元素。
- select 下拉表单元素。
- textarea 文本域元素。
1）input 表单元素
<input type="属性值" />常用属性。
| 属性值 | 描述 |
|---|---|
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| checkbox | 定义复选框。 |
| hidden | 定义隐藏的输入字段。 |
| file | 定义输入字段和"浏览"按钮，供文件上传。 |
| button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮。提交安钮会把表单数据发送到服务器。 |
| image | 定义图像形式的提交按钮。 |
除 type 属性外，<input> 标签还有其他很多属性。其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义 input 元素的名称 |
| value | 由用户自定义 | 规定 input 元素的值 属性的值不同，value 具有不同的意义。 type 值如果是 button/submit/reset，value 指定按钮的文字；type 如果是 text/password，value 指定默认文字；如果 type 是 checkbox/radio，value 指定真正提交到后台的值。 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
规则如下：
① name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
② name 表单元素的名字，要求单选按钮和复选框要有相同的 name 值。
③ checked 属性主要针对于单选按钮和复选框。主要作用一打开页面，就要可以默认选中某个表单元素。
④ maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用。
2）select 标签
<select multiple>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>在 <option> 中定义 selected ="selected" 时，当前项即为默认选中项。
当表单被提交到服务器时，<select> 元素的 name 属性和被选中的 <option> 元素的 value 属性会一起被发送到服务器。
3）textarea 标签
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<textarea rows="3" cols="20">
文本内容
</textarea>cols="每行中的字符数"，rows="显示的行数"。在实际开发中不会使用，都是用 CSS 来改变大小。
textarea {
width: 300px; /* 替代 cols 属性 */
height: 120px; /* 替代 rows 属性 */
}textarea 标签的大小可以通过用户拖动其右下角来改变。如果你想禁止这种行为，可以使用 CSS 的 resize 属性。将 resize 属性设置为 none 可以阻止用户改变 textarea 的大小。
textarea {
resize: none; /* 禁止调整大小 */
resize: horizontal; /* 只能水平调整 */
resize: vertical; /* 只能垂直调整 */
resize: both; /* 可以任意调整（默认值） */
}注意：表单控件可以通过添加 disabled 属性，让表单控件不可用。
4）button 标签
<button> 标签用于创建一个可点击的按钮。在 <button> 元素和 </button> 结束标签之间的任何内容都将作为按钮的内容。
<button type="button">点击我！</button>几个常用的属性：
- type：定义按钮的类型。可能的值有 "button"（普通按钮）、"submit (默认值) "（提交按钮）和 "reset"（重置按钮）。
- disabled：如果此属性存在，按钮将被禁用，用户不能点击它。
- autofocus：如果此属性存在，当页面加载时，按钮将自动获得焦点。
- form：定义按钮所属的一个或多个表单。值是表单元素的 id 列表，以空格分隔。form 属性只在
<button>标签的 type 属性为 "submit" 或 "reset" 时有效。
备注：对于 button 标签，里面的文字会自动水平垂直居中。
3. 提示信息
1）label 标签
<label> 标签为 input 元素定义标注（标签）。 <label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />核心：<label> 标签的 for 属性应当与相关元素的 id 属性相同。也可以使用 label 标签包裹住 input，这样就不用指定 for 属性了。
2）fieldset / legend 标签
<fieldset> 标签用于在表单中分组相关元素。会在相关元素周围绘制一个框。
<legend> 标签为 fieldset 元素定义标题。
<form action="/demo/action_page.php">
<fieldset>
<legend>个人信息：</legend>
<label for="fname">名字：</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏：</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">电邮：</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="提交">
</fieldset>
</form>效果如下。
第三章：HTML5 新标签
一、新增语义化标签
1. 新增排版布局标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| header | 页面或节的头部区域 ps: header 与 footer 互斥，即 header 标签中不能有 footer。 | 双标签 | |
| nav | 导航条 | 双标签 | |
| footer | 页面或节的脚部区域 ps: footer 与 header 互斥，即 footer 标签中不能有 header。 | 双标签 | |
| section | 页面中的一个独立区域或者文章中的一节 | 双标签 | |
| aside | 侧边栏 | 双标签 | |
| article | 文章、新闻、博客、评论等。 | 双标签 | |
| main | 页面主要内容部分 | 双标签 | |
| hgroup | 包裹连续的标题，如文章主标题和副标题的组合。 | 双标签 | |
| figure | 表示一段独立的流内容，比如文章中的插图。 | 双标签 | |
| figcaption | 表示 figure 中的标题 | 双标签 |
网页结构标签
1）<section> 标签用于对网页内容进行分区、分块；定义文档中的节、如章节、页眉、页脚或文档中的其他部分。一般情况下，<section> 标签由内容和标题组成。还要注意：①<section> 标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用 <section> 标签。②当一个容器需要被直接定义样式或通过脚本定义时，推荐 <div>。
2）<article> 标签代表一个独立的、完整的相关内容块，可独立于页面其他内容使用。例如：一篇完整的论坛贴子、一篇博客文章、一个用户评论等。一个 <article> 标签里还会有 header、footer。<article> 标签可套用。
3）<nav> 标签用做导航条，一个网页可有多个 <nav> 标签，比如还会出现侧边导航条等。
4）<aside> 标签用来装载非正文的内容，被视为页面里一个单独的部分。它与页面的主要内容是分开的，可被删除的，而不会影响到网页所要传达的信息。<aside> 标签可以被包含在 <article> 标签内，作为主要内容的附属信息；也可以在 <article> 标签之外使用，作为页面或站点全局的附属信息部分，如广告、友情链接、侧边栏、导航条等。
5）<header> 标签定义文档的页眉，通常是一些引导和导航信息。它不局限于网页头部，也可写在网页内容里面。通常 <header> 标签至少包含（但不局限于）一个标题（<h1> ~ <h6>），还可包括 <hgroup> 标签，以及表格内容、标识 logo、搜索表单、<nav> 导航等。
6）<footer> 标签简言之为页脚，可以在一个网页多次使用，也可以在 <article> 标签或者 <section> 标签中添加 <footer> 标签。
分组标签
1）<figure> 标签和 <figcaption> 标签：<figure> 标签用于定义独立的流内容，一般指一个单独的单元。<figcaption> 标签用于为 <figure> 标签组添加标题，一个 <figure> 标签内只能有一个 <figcaption> 标签，该标签只能放在 <figure> 标签的第一个或最后一个子标签位置。举例：有一个网站介绍中国各地方的旅游景点，如杭州的西湖、北京的长城等分别配一张图和一段文字介绍及一个标题。
2）<hgroup> 标签：可以将标题或子标题进行分组，通常它与 <h1>~<h6> 标签组合使用。一个内容块中的标题可以通过 <hgroup> 标签组成一组。注意以下几点：①如果只有一个标题标签，不建议使用 <hgroup>。②当出现一个以上的标题与标签时，推荐使用 <hgroup> 标签。③当一个标题包含副标题、<section> 或 <article> 标签时，建议将 <hgroup> 标签和标题相关标签放在 <header> 标签容器中。
3）<dialog> 标签：①主要用于人与人之间的对话。该标签还包括 <dt> 和 <dd> 两个组合标签，它们常常同时使用。<dt> 表示说话者，<dd> 表示说话者说的内容。②用于表示一个对话框或其他交互式窗口，如模态框。
注意：
W3C 标准中没有 hgroup 标签。
WHATWG 标准中没有 main 标签，所有版本 IE 均不支持 main 标签。
2. 新增状态标签 / 行内语义性标签
1）meter 与 progress
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| meter | 定义已知范围或分数值内的标量测量。 一般用于表示静态的度量，如电池电量、磁盘用量等。 | max：最大值。 min：最小值。 high：较大的值。 low：较小的值。 optimum：最优值。 value：当前值。 | 双标签 |
| progress | 定义某个任务完成的进度的指示器。 一般用于表示动态的进度，如进度条。 | max：总共的工作量。 value：已完成的工作量。 | 双标签 |
设置 meter 样式：
meter {
/* 可以设置宽高 */
}
meter::-webkit-meter-bar {
/* 可以设置总体边框，空白区域背景等 */
}
meter::-webkit-meter-optimum-value {
/* 设置最优值范围内的样式 */
}
meter::-webkit-meter-suboptimum-value {
/* 凑合范围内的样式 */
}
meter::-webkit-meter-even-less-good-value {
/* 糟糕范围内的样式 */
}设置 progress 样式：
progress {
/* 所有浏览器都可以设置宽高、边框 */
/* IE、firefox 可以设置空白区域背景色 */
/* color 可以设置 IE 下进度条区域的背景色 */
/* 只有设置了 border 或者 background 属性， chrome 才可以设置空白区域颜色 */
}
::-webkit-progress-bar {
/* chrome 空白区域颜色 */
}
::-webkit-progress-value {
/* chrome 设置进度条区域 */
}
::-moz-progress-bar {
/* firefox 设置进度条区域 */
}2）<time> 标签
datetime 属性，它用于提供日期或时间的机器可读形式。这对于搜索引擎和其他 web 技术非常有用，因为它们可以更准确地解析和处理日期和时间数据。
① <time datetime="2019-10-8">2019年10月8日</time>
② 日期与时间之间用 T 隔开，T 表示时间
<time datetime="2019-10-8T21:00">2019年10月8日21:00</time>
③ Z 表示给机器编码时使用 UTC 标准时间
<time datetime="2019-10-8T21:00Z">2019年10月8日</time>
3）<video> 标签和 <audio> 标签
3. 文本相关
1）新增详情标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| details | 表示一个可以展开或收起的细节或内容 | 双标签 | |
| summary | 表示 details 中标题 | 双标签 |
<details>
<summary>更多信息</summary>
<p>这里是更多的信息，可以被展开和收起。</p>
</details>2）新增注音标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| ruby | 包裹需要注音的文字 | 双标签 | |
| rt | 写具体的注音 | 双标签 |
ruby 元素由一个或多个字符（需要一个解释 / 发音）和一个提供该信息的 rt 元素组成：
同志们，一起来享受<ruby>饕餮<rt>taotie</rt></ruby>盛宴！3）新增文本标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| mark | 用于对某个词语进行标记 | 双标签 | |
| cite | 引用某个文献 | 双标签 |
备注：mark 元素定义带有记号的文本，请在需要突出显示文本时使用，如搜索引擎搜索页面。
二、表单新增功能
1. 表单控件新增属性
| 属性名 | 属性含义 |
|---|---|
| placeholder | 设置输入框、文本域的提示文字。 |
| required | 设置表单控件必填或者必选，否则表单无法提交，该属性不需要设置值。 |
| autofocus | 自动获取焦点，，该属性不需要设置值。 |
| autocomplete | 是否显示输入记录，值: on（默认值）、off。 |
| pattern | 值是正则表达式，对文本框或文本域进行验证，表单提交的时候验证。 |
| form | 该属性的值可以指定表单的 id 值，与表单关联，表单控件可以写在表单的外面。 |
2. 新增的表单控件
input 元素的 type 属性新增的值。
1）输入框类（5个）
<!-- 邮箱 提交表单验证 -->
<input type="email" placeholder="请输入邮箱">
<!-- URL 提交表单验证 -->
<input type="url" placeholder="请输入网址">
<!-- 电话 不会进行验证，移动端点击弹出数字键盘 -->
<input type="tel" placeholder="请输入电话">
<!-- 数字 非数字无法输入，提交表单验证数字范围 -->
<input type="number" placeholder="请输入数字">
<input type="number" max="16" min="-10" placeholder="请输入数字">
<input type="number" step=".1" min=".1" placeholder="小数"> <!-- 最小 0.1 -->
<!-- 搜索框 没有验证功能 -->
<input type="search" placeholder="搜索框">2）范围选择框（1个）
<input type="range" name="num01">
<input type="range" max="1000" min="-1000" name="num02" value="-1000">
<input type="range" max="10" min="0" step="2" name="num03">3） 颜色选择框（1个）
<input type="color">4）日期时间选择框类（5个）
<!-- 选择年月日 -->
<input type="date">
<!-- 选择年月 -->
<input type="month">
<!-- 选择年周 -->
<input type="week">
<!-- 选择时间 -->
<input type="time">
<!-- 选择日期和时间 -->
<input type="datetime-local">3. form 标签新增属性
novalidate：让表单不进行验证，该属性不要值。
<form action="/submit" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>即使 <input> 元素的 type 属性被设置为 email，浏览器也不会在提交表单时检查输入的是否是有效的电子邮件地址，因为 <form> 元素上设置了 novalidate 属性。
4. 输入框的搜索提示
<input type="search" list="searchData">
<datalist id="searchData">
<option value="hello world"></option>
<option value="hello haha"></option>
<option value="nihao"></option>
<option value="ab"></option>
<option value="aaa"></option>
<option value="abc"></option>
<option value="abb"></option>
</datalist>三、音视频标签
1. 标签与常用属性
<video> 标签
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 ps: 谷歌浏览器自动播放只在静音下（muted）。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则当媒体文件完成播放后再次开始播放。 |
| muted | muted | 如果出现该属性，视频的音频输出为静音。 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮（封面）。 |
| preload | auto metadata none | auto：视频在页面加载时就开始加载，并准备播放。这意味着视频会尽快开始下载。metadata：只加载关于视频（如长度）的元数据。none：视频不会在页面加载时就开始加载，除非用户开始播放视频。ps: 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | URL | 要播放视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
| height | pixels | 设置视频播放器的高度。 |
<audio> 标签
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto：页面加载后会立即开始加载音频文件，无论是否会播放。metadata：页面加载后只加载音频的元数据，包括例如长度、编码、轨道数、是否有封面图等信息。none：页面加载后不加载音频文件，除非用户进行操作，如点击播放。 | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |
<source> 标签
<source> 标签允许您指定备用的视频/音频/图像文件，浏览器可以根据浏览器支持或视口宽度进行选择。浏览器将选择它支持的第一个 <source>。
| 属性 | 值 | 描述 |
|---|---|---|
| media | media_query | 描述媒体资源的媒体类型，它的值是一个媒体查询。 |
| src | URL | 规定媒体文件的 URL。 |
| type | MIME_type | 规定媒体资源的 MIME 类型。 |
video 标签也可以使用上面的属性。
<video src="video_hd.mp4" controls>
<!-- 屏幕宽度大于等于 800 像素时使用的高清视 -->
<source src="video_hd.mp4" type="video/mp4" media="(min-width: 800px)">
<!-- 屏幕宽度小于 800 像素时使用的标清视频 -->
<source src="video_sd.mp4" type="video/mp4" media="(max-width: 799px)">
您的浏览器不支持 HTML5 视频标签。
</video>
<audio src="audio/high-quality.mp3" controls>
<source src="audio/high-quality.mp3" type="audio/mpeg" media="(min-width: 1200px)">
<source src="audio/medium-quality.mp3" type="audio/mpeg" media="(min-width: 768px)">
<source src="audio/low-quality.mp3" type="audio/mpeg">
<source src="audio/fallback.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>2. 事件属性
在自定义视频控件与样式时，可能会用到以下知识。
其实，HTML 的标签属性不光有全局属性、特定属性，还有事件属性。
音视频属性
| 属性 | 描述 |
|---|---|
| duration | 总时长，单位为秒。 |
| paused | 当前是否是暂停状态。 |
| playbackRate | 播放倍速。1 为正常。 |
| volume | 表示音频的音量。值从 0.0（静音）到 1.0（最大音量）。 |
| currentTime | 当前播放时间，单位为秒。为其赋值将会使媒体跳到一个新的时间。 |
音视频方法
| 方法名 | 含义 |
|---|---|
| play() | 开始播放 |
| pause() | 暂停播放 |
事件
| 事件名 | 含义 |
|---|---|
| pause | 暂停时触发 |
| ended | 结束时触发 |
| play | 开始播放时触发 |
| timeupdate | 属性 currentTime 变化时触发。会随着播放进度的变化不断触发 |
| loadeddata | 事件在第一帧数据加载完成后触发 |