HTML 详解
如果本文章对你有用，可搜索关注本人的微信公众号：爬界，上面会及时推送最近的博客文章，大家一起进步哦 ！
如果想要更好的阅读体验，可以进入 爬界博客网站 阅读最新内容，网站地址：blog.climbtw.com。
本文主要涉及了 HTML的简介，兼容性，布局方式，所有全局属性和标签解析，响应式设计，H5新特性 等内容。
目录
1 参考资料
2 简介
3 标签分类
3.1 单、双标签
3.2 行内标签、块级标签、行内块标签
3.3 语义化标签（共20个，其中 H5 新增9个）
4 标签的 浏览器兼容性 说明
4.1 常见的 浏览器内核
4.2 常见浏览器 全球全平台 市场占比
4.3 兼容性优先级 和 处理原则
5 布局方式
5.1 HTML布局方式（实现向）
5.2 网页布局方式（设计向）
6 全局属性 解析（共86个，其中 H5 新增58个）
6.2.1 功能概述
6.2.2 全局事件属性 详解
6.2.2.4.1 键盘事件 执行顺序
6.2.2.4.2 键盘监听示例
6.2.2.3.1 普通：点击 和 移动
6.2.2.3.2 H5 新增：拖动 和 滚动条
6.2.2.3.2.1 拖动相关
6.2.2.3.2.2 关于 window.event.dataTransfer（涉及 JS，待补充）
6.2.2.3.2.3 双击事件 和 单击事件 冲突 解决方案
6.2.2.1 Window 事件属性
6.2.2.2 Form表单 事件属性
6.2.2.3 Mouse鼠标 事件属性
6.2.2.4 Keyboard键盘 事件属性
6.2.2.5 Media媒介 事件属性
6.1.1 功能概述
6.1.2 常规全局属性 详解
6.1.2.1 鼠标右键菜单相关属性和标签
6.1.2.2 自定义属性相关
6.1 常规全局属性（16个，其中 H5 新增8个）
6.2 全局事件属性（70个，其中 H5 新增50个）
7 标签 解析（共110个，其中 H5 新增30个）
7.12.1 frame 与 iframe 的区别
7.9.1 input 标签 属性详解（29个）
7.9.2 正则表达式的研究（待补充）
7.9.3 rsa 加解密的研究（待补充）
7.1 基础标签（7个）
7.2 元信息标签（1个）
7.3 样式，脚本标签（4个）
7.4 标题，分区 等标签（15个）
7.5 图像 标签（6个）
7.6 链接 标签（1个）
7.7 列表，菜单 标签（9个）
7.8 表格 标签（10个）
7.9 表单 标签（13个）
7.10 对象嵌入 标签（3个）
7.11 音视频 标签（H5新增，4个）
7.12 框架 标签（4个）
7.13 格式 标签（33个）
8.4.1 直接使用 css 浮动等属性，让元素自动适应
8.4.2 使用 Bootstrap
8.1 移动端开发中关于 像素 的各种专有名词
8.2 移动端开发中的 视口viewport
8.3 通过 js 获取窗口的属性
8.4 响应式设计方案
响应式 Web 设计
9 H5 相关
9.5.1 各种媒体格式
9.5.2 主流浏览器 对各种 音视频格式 的支持列表
9.5.3 音视频 最佳解决方案
9.5.1.1 图片格式
9.5.1.2 音频格式
9.5.1.3 视频格式
9.5.3.1 音频
9.5.3.2 视频
9.1 新特性介绍
9.2 帮助老版本浏览器处理 H5
9.3 H5 代码约定
9.4 H5 Canvas，SVG
9.5 H5 媒体
9.6 H5 拖动
9.7 H5 Web 存储，应用缓存，地理定位，Web Workers，SSE
1 参考资料
W3school 的文档：www.w3school.com.cn/tags/index.…
2 简介
HTML：Hyper Text Markup Language，超文本标记语言。一种用来 描述网页结构和内容 的 标记语言。
H5：HTML5，是 HTML 目前最新的版本。主要是在原来的基础上增加了一些 新属性，新标签，新特性。
HTML 标签：是 HTML 用来 描述网页 的工具。
HTML 文档：它由 HTML 标签 和 纯文本 组成。
网页：是指 浏览器 解析一个 HTML 文档 后，得到的 界面效果。
3 标签分类
3.1 单、双标签
| 类目 | 数量 | 标签 |
|---|---|---|
| 单标签 / 空元素 | 12个 | <base />，<meta />，<link />，<br />，<hr />，<img />，<area />，<col />，<input />，<param />，<embed />，<source /> |
| 双标签 | 98个 | 不用记，省略。 |
3.2 行内标签、块级标签、行内块标签
| 类目 | 特点 | 标签 |
|---|---|---|
| 行内标签 | 不独占一行，不能设置宽高，宽高完全由内容撑开 | <span>，<a>，<label> 等。 |
| 块级标签 | 独占一行，可以设置宽高，如不设置宽度则默认为100%浏览器宽度 | <hr />，<div>，<h1>...<h6>，<p> 等。 |
| 行内块标签 | 不独占一行，可以设置宽高 | <img />，<th>，<td>，<form>，<input />，<textarea> 等。 |
Tips： 这三种标签 可以通过设置 CSSS属性 display 的值， 进行自由转换，比如，inline，block，inline-block 分别表示 行内标签，块级标签，行内块标签。详情见 《CSS 详解》 。
3.3 语义化标签（共20个，其中 H5 新增9个）
语义化：指的是具有特殊含义的 标签。
核心：在合适的地方给一个最为合理的标签。
好处：
方便代码的阅读和维护。
对于搜索引擎有更好的优化。
让浏览器，网络爬虫等 可以很好的解析，便于更好的分析其中的内容。
判断方法：语义是否良好，当去掉 css 后，网页结构依然组织有序，并且有良好的可读性。
书写原则：先确定语义的 HTML，再选合适的 CSS。
| 类目 | 数量 | 标签 |
|---|---|---|
| 分区类（H5 新增） | 9个 | <header>，<footer>，<nav>，<section>，<article>，<aside>，<dialog>，<details>，<summary> |
| 表格类 | 3个 | <thead>，<tbody>，<tfoot> |
| 短语类 | 8个 | <em>，<strong>，<code>，<var>，<kbd>，<cite>，<dfn>，<samp> |
4 标签的 浏览器兼容性 说明
4.1 常见的 浏览器内核
| 内核 | 平台 | 浏览器代表 |
|---|---|---|
| Gecko | 跨平台 | Firefox |
| Trident | Windows | IE |
| KHTML | Linux | Konqueror |
| WebKit | 跨平台，基于 KHTML | Safari |
| Chromium | 跨平台，基于 WebKit | Edge |
| Blink | 跨平台，基于 WebKit2 | Chrome，Opera |
Tips：
三大主要 浏览器内核：WebKit（包括 Chromium，Blink），Trident，Gecko。
相对应的 浏览器代表：Chrome，IE，Firefox。
4.2 常见浏览器 全球全平台 市场占比
数据来源：statcounter 网站
统计时间：2020.8 ~ 2021.8
| 浏览器 | 全球全平台占比 |
|---|---|
| Chrome | 64.92% |
| Safari | 18.77% |
| Edge | 3.56% |
| Firefox | 3.54% |
| Samsung Internet | 3.06% |
| Opera | 2.17% |
| UC Browser | 1.45% |
| IE | 0.73% |
4.3 兼容性优先级 和 处理原则
兼容性优先级：Chrome, Firefox，IE。
处理原则：优先兼容 Chrome，如果有特殊需要，则再考虑兼容 Firefox，IE 等浏览器。
Tips：
除了 HTML，其他需要考虑 浏览器兼容性 的，还有 CSS，JavaScript 等。
除了考虑 浏览器种类 兼容性外，还需要考虑 浏览器的版本 问题。
对于低版本的浏览器，可以使用一些 语法转化器，把一些 高版本语法 转化为 低版本浏览器可以运行的 低版本语法，包括 JavaScript 的 Babel 编译器 等等。
5 布局方式
5.1 HTML布局方式（实现向）
HTML布局方式 包括： DIV + CSS 布局 、 H5 语义元素 + CSS 布局 、 Table + CSS 布局 等。
5.2 网页布局方式（设计向）
用到时再补充。
6 全局属性 解析（共86个，其中 H5 新增58个）
全局属性：是可与 所有 HTML标签 (也可称为 元素)，一起使用的属性。
全局属性 包括 常规全局属性 16个，全局事件属性 70个。
6.1 常规全局属性（16个，其中 H5 新增8个）
常规全局属性 包括：
普通 8个：lang，title，id，class，style，tabindex，accesskey，dir
H5 新增 8个：hidden，contenteditable，spellcheck，
data-*，draggable，dropzone，contextmenu，translate
6.1.1 功能概述
| 属性 | 功能 |
|---|---|
| 普通： | |
| lang | 声明标签内容的 所属 语言 |
| id | 设置标签的 唯一 id |
| class | 设置标签的 类名 |
| title | 设置标签的鼠标悬停的 提示文本 |
| style | 设置标签的 行内样式 |
| tabindex | 设置标签的 tab 键 焦点控制的次序 |
| accesskey | 设置标签的 焦点快捷键 |
| dir | 设置标签内容的 文本方向 |
| H5 新增： | |
| hidden | 不占位 隐藏标签 |
data-* | 自定义标签的属性 |
| contenteditable | 标签内容可以 编辑化 |
| spellcheck | 标签内容进行英文的 拼写和语法检查 |
| draggable dropzone | 标签的 拖动操作 |
| contextmenu | 指定标签的 右键菜单项 <menu> 的 id |
| translate | 是否允许浏览器 翻译标签 的内容 |
6.1.2 常规全局属性 详解
普通：
| 全局属性 | 作用 | 浏览器兼容性 | 属性值 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|---|
| lang | 声明标签内容的 所属 语言 | All | 1. 属性值为 《ISO 639-1 语言代码》 ：它是为各种语言定义缩写的集合。 格式：语言代码 或 语言代码-国家代码 2. 常用值： en-US：英文（美国） zh-CN：简体中文（中国） zh-HK：繁体中文（香港） zh-TW：繁体中文（台湾） 3. 其他 语言代码，请查阅 《ISO 639-1 语言代码》。 | <html></html> | 1. 用在 <html> 标签中：a. Chrome 浏览器会根据 lang的 属性值 和 本地语言 进行对比，判断是否需要显示 网页翻译 的提醒。 b. 对 搜索引擎 会更加友好。 | 无 |
| id | 设置标签的 唯一 id | All | id 名。 | 无 | 1. 用于 样式设置，js 脚本控制。 2. 配合 其他标签属性一起使用，比如： a. 链接锚： <a> 标签的 href 值 为 # + id 值 时，表示跳转到 该 id 所对应的 标签。b. contextmenu 全局属性的 值 就是 <menu> 标签的 id 值。所有浏览器都暂不支持 contextmenu 全局属性，关于右键菜单相关见 《6.1.2.1 鼠标右键菜单相关属性和标签》。 c. 待补充。 | 无 |
| class | 设置 标签的 一个 或 多个 类名 | All | 类名。 注意： 1. 除 IE 外，类名不能以 数字 开头。 2. 可以给标签设置多个 class 属性值，使用 空格 隔开。 | 无 | 1. 用于 样式设置，js 脚本控制。 | 无 |
| title | 设置 标签的鼠标悬停的 提示文本 | All | text | <abbrtitle="People's Republic of China">PRC</abbr>was founded in 1949.效果： PRCwas founded in 1949. | 1. title 属性常在 <a> 标签 ，form表单系列 标签 中使用，用来提供关于 链接目标，输入格式 的 提示信息。 | 1. 这些信息 通常会在 鼠标移到标签上 时，显示一段 工具提示文本。 2. 最好在 没有明显文字说明 的标签上，加上 title 属性。 3. 它是 <abbr> 和 <acronym>(H5不支持)，两个 缩写 标签的 必需属性。 |
| style | 设置 标签的 行内样式 | All | style 属性的 值 的书写格式为： 1. 一个 或 多个 被分号 ； 分隔 的，由 css的 属性 和 值 组成 的 键值对 字符串。 2. 属性 和 值 使用 冒号 ： 隔开。 | <pstyle="color: red;text-align: center">This is a paragraph.</p> | 1. 用作 行内样式，一般很少用。 | 1. style 属性 作为 行内样式，优先级较高，仅次于 !important。它将覆盖 任何 全局的样式设定，包括 <style> 标签的 内联样式 和 在 <link /> 外部样式表 中规定的 外联样式。2. js 动态 改变标签样式 时，其实就是改变 style 属性 的 值。 |
| tabindex | 设置 标签 的 tab 键 焦点控制的次序 | Safari 不支持 | number 1. 1 表示第一个。 | <ahref="javascript:void(0)" onclick="js_method()" tabindex="1">W3School</a>效果： W3School | 1. 控制 Tab 键 对于 焦点 的 移动次序。 2. 桌面端网站可能会用到。 | 无 |
| accesskey | 设置 可以让标签 获得焦点 的 快捷键 | Opera 不支持 | character | <ahref="#"accesskey="h">HTML</a> | 1. 不建议使用 accesskey 属性，因为不同浏览器的实现效果不一致： a. Chrome 中激活行为表现为 click 事件 且 支持 隐藏标签 的激活。 b. 而在 IE 和 Firefox 中则为 focus 聚焦 且 不支持 隐藏标签的 激活。 | 1. 需要使用 Alt + accessKey 来激活 带有指定快捷键 标签。 |
| dir | 设置 标签内 文本的方向 | All | ltr：默认，从左向右。 rtl：从右向左。 | <p dir="rtl">Write this text right-to-left !</p>效果：测试无效，文本方向并没有 完全改变。 Write this text right-to-left ! | 1. 基本使用不到。 | 无 |
H5 新增：
| 全局属性 | 作用 | 浏览器兼容性 | 属性值 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|---|
| hidden | 隐藏标签，不占位置 | All | 本身，或 省略：表示隐藏。 hidden 属性不写：表示 不隐藏。 | <p hidden>这个段落应该被隐藏。</p> | 1. 表单的 隐藏数据传递。 2. 标签的不占位隐藏。 比如： a. 防止用户查看某些标签： 直到匹配某些条件（比如选择了某个复选框），然后，可以使用 js 删除 hidden 属性，再使标签可见。 | 无 |
data-* | 设置 标签的 自定义属性，可以用来存储 私有数据 | All | 1. 属性名： 为 data-* 形式，且不应该包含任何 大写字母，并且在前缀 data- 之后必须有至少一个字符。2. 属性值： 可以是 任意字符串。 | 示例见 《6.1.2.2 自定义属性相关》。 | 1. 用于 自定义 标签属性，存储一些标签 私有的数据，减少对数据库的访问。 | 1. 用户代理 会完全忽略前缀为 data- 的自定义属性。 2. data-* 属性赋予了，我们在所有 HTML 标签 上嵌入 私有数据 的能力。3. 私有数据 能够被页面的 js 读取，以用来创建更好的 用户体验，比如： a. 不进行 Ajax 调用。 b. 不用访问 服务器端 数据库 查询 等。 |
| contenteditable | 设置 标签内容 是否可编辑 | All | false：默认，不可编辑。 true：可编辑。 | <p contenteditable="true">这是一个可编辑的段落。</p> | 1. 让标签的内容 可编辑。 | 1. 如果 标签 未设置 contenteditable 属性，那么标签会从其 父标签 继承该属性。 |
| spellcheck | 设置是否对 标签内容 进行 拼写 和 语法 检查 | IE9 及 更早不支持 | true：默认值，对标签进行拼写和语法检查。 false：不检查。 | <p contenteditable="true" spellcheck="true">这是一个段落。</p> | 1. 主要针对的是 英文。 | 1. 可以对以下内容进行 拼写 检查： a. <input /> 标签中的文本值（非密码）。b. <textarea> 标签中的文本。c. 可编辑 标签中的文本。 2. 对于存在 拼写或语法 错误 的单词，会出现 红色下划波浪线，进行提醒。 |
| draggable | 设置 标签 是否可拖动 | IE8 及 更早不支持 | auto：默认，使用浏览器的默认行为。 true：可拖动。 false：不可拖动。 | 1. draggable 是 H5 的 拖动 新特性。 2. 拖动效果 需要配合 相关鼠标事件属性 实现，相关示例 见 《6.2.2.3.2.1 拖动相关》。 | 1. 实现网页的一些 拖动效果。 | 1. 链接 和 图像 默认是可拖动的。 |
| dropzone | 设置 在拖动标签后，是否进行 移动，拷贝，或 链接 被拖动标签的 数据 | 所有浏览器都不支持 | move：拖动会导致 被拖动数据 被 移动 到新位置。 copy：拖动数据 会产生 被拖动数据 的 副本。 link：拖动数据 会产生 指向 原始数据 的 链接。 | <div draggable="true" dropzone="move"></div> | 1. 因为 浏览器不支持，支持了以后，可以 简化拖动 的相关实现。 | 无 |
| contextmenu | 指定 标签的 上下文菜单 <menu> 的 id | 所有浏览器都不支持 | 属性值 是要打开的 <menu> 标签的 id。 | 示例见 《6.1.2.1 鼠标右键菜单相关属性和标签》。 | 所有浏览器 暂不支持 contextmenu 属性。 | 1. 是用于设置标签 右键 显示的 菜单选项。 2. <menu> 标签需要包含 <menuitem>，来设置上下文菜单的 条目。3. 也可以使用 H5 新标签 <command> 代替 <menuitem>，但是暂时只有 IE9 支持 <command>。 |
| translate | 设置是否应该 翻译标签内容 | 所有浏览器都不支持 | yes：默认，应该翻译标签内容。 no：不应翻译标签内容。 | <p translate="no">请勿翻译本段。</p> | 所有浏览器 暂不支持 translate 属性。 | 1. 谷歌浏览器 在进行页面翻译 的过程中，按要求进行选择性翻译。 |
6.1.2.1 鼠标右键菜单相关属性和标签
所有浏览器都暂不支持 contextmenu 全局属性，未来可能支持。
鼠标右键菜单涉及：
属性：contextmenu（H5 新增）。
标签：
<menu>，<menuitem>，<command>（H5 新增）。
示例：
<!-- HTML 测试 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML 测试</title> <base href="" target="_top" /> <meta name="description" content="关于 HTML 测试 的摘要" /> <meta name="keywords" content="关于 HTML 测试 的关键字" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" /> <meta http-equiv="content-type" content="text/html, charset=UTF-8" /> <link rel="shortcut icon" href="" type="image/vnd.microsoft.icon"> <link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16"> </head> <body> <span contextmenu="menu-id">右键菜单</span> <menu id="menu-id" type="context"> <menuitem onclick="">选项1</menuitem> <menuitem onclick="">选项2</menuitem> </menu> </body> </html> 复制代码
6.1.2.2 自定义属性相关
鼠标右键菜单涉及：
属性：
data-*（H5 新增）。
示例：
<!-- HTML 测试 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML 测试</title> <base href="" target="_top" /> <meta name="description" content="关于 HTML 测试 的摘要" /> <meta name="keywords" content="关于 HTML 测试 的关键字" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" /> <meta http-equiv="content-type" content="text/html, charset=UTF-8" /> <link rel="shortcut icon" href="" type="image/vnd.microsoft.icon"> <link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16"> </head> <body> <span data-animal-type="鸟类" onclick="showDetails(this)">喜鹊</span> <script type="text/javascript"> function showDetails(animal) { var animalType = animal.getAttribute("data-animal-type"); alert(animal.textContent + " 是一种 " + animalType + " 。"); } </script> </body> </html> 复制代码6.2 全局事件属性（70个，其中 H5 新增50个）
HTML 4 增加了，使用 事件属性 在浏览器中 触发脚本动作 的能力。
全局事件属性 的 属性值 是用 JavaScript 脚本 来定义 动作事件 的。
这里只对 HTML 中的 全局事件属性 作归纳。关于 JavaScript 脚本编程 的知识，见 《JavaScript 详解》。
全局事件属性 包括 5大类：
Window 事件属性 17 个：
普通 2 个：onload，onunload
H5 新增 15个：onresize，onbeforeprint，onafterprint，onstorage，onpageshow，onpagehide，ononline，onoffline，onbeforeunload，onerror，onhaschange，onpopstate，onmessage，onundo，onredo
Form表单 事件属性 11 个：
普通 6 个：onblur，onfocus，onchange，onsubmit，onselect，onreset
H5 新增 5个：oncontextmenu，oninput，oninvalid，onforminput，onformchange
Mouse鼠标 事件属性 16 个：
普通 7 个：onmousedown，onmouseup，onclick，ondblclick，onmousemove，onmouseover，onmouseout
H5 新增 9个：ondragstart，ondrag，ondragenter，ondragover，ondragleave，ondrop，ondragend，onmousewheel，onscroll
Keyboard键盘 事件属性 3 个：
普通 3 个：onkeydown，onkeypress，onkeyup
Media媒介 事件属性 23 个：
普通 2 个：onabort，onwaiting
H5 新增 21个：onpause，onplay，onplaying，ontimeupdate，onratechange，onvolumechange，onended，ondurationchange，onreadystatechange，onemptied，onseeking，onseeked，oncanplay，oncanplaythrough，onloadstart，onprogress，onstalled，onsuspend，onloadedmetadata，onloadeddata，onerror
6.2.1 功能概述
Window 事件属性：
| 属性 | 功能 |
|---|---|
| 普通： | |
| onload onunload | 文档加载 相关动作 |
| H5 新增： | |
| onresize | 窗口调整相关动作 |
| onbeforeprint onafterprint | 文档打印 相关动作 |
| onstorage | Storage 更新 相关动作 |
| onpageshow onpagehide | 窗口显隐 相关动作 |
| ononline onoffline | 文档上/离线 相关动作 |
| onbeforeunload | 文档卸载 相关动作 |
| onerror | 文档发生错误 相关动作 |
| onhaschange | 文档发生改变相关动作 |
| onpopstate | 窗口历史记录改变 相关动作 |
| onmessage | 消息被触发 相关动作 |
| onundo | 文档执行 undo 取消 相关动作 |
| onredo | 文档执行 redo 撤销 相关动作 |
Form表单 事件属性：
| 属性 | 功能 |
|---|---|
| 普通： | |
| onblur onfocus | 标签 焦点变化 相关动作 |
| onchange | 标签 值变化 相关动作 |
| onsubmit | 表单提交时 相关动作 |
| onselect | 标签 文本被选中 相关动作 |
| onreset | 表单 重置 相关动作 |
| H5 新增： | |
| oncontextmenu | 标签 右键 相关动作 |
| oninput | 标签 获得输入时 相关动作 |
| oninvalid | 标签 无效时 相关动作 |
| onforminput | 表单 获得输入时 相关动作 |
| onformchange | 表单 改变时 相关动作 |
Mouse鼠标 事件属性：
| 属性 | 功能 |
|---|---|
| 普通： | |
| onmousedown | 左中，右键 按下 |
| onmouseup | 左中，右键 释放 |
| onclick / oncontextmenu | 左中 / 右键 单击 |
| ondblclick | 左中 键 双击 |
| onmousemove | 移动到 |
| onmouseover | 持续移动 |
| onmouseout | 移出 |
| H5 新增： | |
| ondragstart | 按下左键，准备拖动 |
| ondrag | 持续拖动 |
| ondragend | 拖动结束 |
| ondragenter | 进入区域 |
| ondragover | 区域内持续拖动 |
| ondragleave | 离开区域 |
| ondrop | 区域内释放左键，放下 |
| onmousewheel | 监听 鼠标滚轮 |
| onscroll | 监听 滚动条 |
Keyboard键盘 事件属性：
| 属性 | 功能 |
|---|---|
| 普通： | |
| onkeydown onkeypress | 按下 键盘 |
| onkeyup | 释放 键盘 |
Media媒介 事件属性：
| 属性 | 功能 |
|---|---|
| 普通： | |
| onabort | 退出 |
| onwaiting | 暂停 |
| H5 新增： | |
| 媒体播放时常用到的事件： | |
| onpause | 暂停 |
| onplay | 已就绪，可开始播放 |
| onplaying | 已开始播放 |
| ontimeupdate | 播放位置改变 |
| onratechange | 速率改变 |
| onvolumechange | 音量改变 |
| onended | 已到结尾 |
| ondurationchange | 媒介长度 改变 |
| onreadystatechange | 就绪状态 改变 |
| onemptied | 发生故障，文件突然不可用 |
| onseeking onseeked | 定位相关 |
| 缓存相关： | |
| oncanplay | 缓冲部分数据，但可开始播放 |
| oncanplaythrough | 完全缓冲完毕 |
| 媒介数据获取相关： | |
| onloadstart | 文件 开始加载 前 |
| onprogress | 浏览器 获取媒介数据 时 |
| onstalled | 浏览器 无法 获取到媒介数据 |
| onsuspend | 浏览器 终止 获取媒介数据 |
| onloadedmetadata | 元数据被加载 时 |
| onloadeddata | 媒介 数据加载完毕 |
| onerror | 加载期间 发生错误 |
6.2.2 全局事件属性 详解
6.2.2.1 Window 事件属性
由 window 对象 触发的事件，常用在
<body>标签中。
普通：
| 事件属性 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| onload | 文档 完全加载结束 之后 | All | <body onload="load()"> | 1. 常用于 页面完全加载结束 后的操作。 | 1. onload 常用在 <body> 标签中，一旦完全加载所有内容（包括 图像、脚本文件、CSS 文件 等），就执行对应的脚本。 |
| onunload | 1. 文档 加载之前（包括 第一次加载，刷新 等） 2. 离开页面 之前（包括 点击链接、提交表单 的跳转动作，和 关闭浏览器窗口 等） | 所有浏览器 都不支持 | <body onunload="goodbye()"> | 无 | 无 |
H5 新增：
| 事件属性 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| onresize | 窗口 被调整大小时 时 | All | <body onresize="showMsg()"> | 1. 监控 窗口的大小改变。 | 无 |
| onbeforeprint | 文档打印 对话框出现 之前 | All | <body onbeforeprint="printmsg()"> | 1. 打印对话框 出现 前的 信息说明。 | 1. onbeforeprint 属性常与 onafterprint 属性一同使用。 |
| onafterprint | 文档打印 对话框结束 之后 (IE 中，效果和 onbeforeprint 相同) | All | 无 | 1. 打印对话框 结束 后 的 信息说明。 | 无 |
| onstorage | Web Storage 区域 更新 后 | 文档未说明 | 无 | 无 | 1. Storage 是 H5 的 本地存储 新特性。 2. 相关原理 及 示例，请查阅后面的 H5 新特性 章节。 |
| onpageshow | 窗口成为可见时 | 文档未说明 | 无 | 无 | 无 |
| onpagehide | 窗口隐藏时 | 文档未说明 | 无 | 无 | 无 |
| ononline | 文档上线时 | 文档未说明 | 无 | 无 | 无 |
| onoffline | 文档离线时 | 文档未说明 | 无 | 无 | 无 |
| onbeforeunload | 文档卸载之前 | 文档未说明 | 无 | 无 | 无 |
| onerror | 文档发生错误时 | 文档未说明 | 无 | 无 | 无 |
| onhaschange | 文档发生改变时 | 文档未说明 | 无 | 无 | 无 |
| onpopstate | 窗口历史记录改变时 | 文档未说明 | 无 | 无 | 无 |
| onmessage | 在消息被触发时 | 文档未说明 | 无 | 无 | 无 |
| onundo | 文档执行 取消（undo）时 | 文档未说明 | 无 | 无 | 无 |
| onredo | 文档执行 撤销（redo）时 | 文档未说明 | 无 | 无 | 无 |
6.2.2.2 Form表单 事件属性
由 HTML 表单内的动作 触发的事件，常用在 表单系列 标签 中。
普通：
| 事件 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| onblur | 标签 失去焦点 时 | All | <input type="text" name="fname" onblur="upperCase()" /> | 1. onblur 常用于 表单验证 代码（例如 用户离开表单字段时触发的操作）。 | 无 |
| onfocus | 标签 获得焦点 时 | All | <input type="text" id="fname" onfocus="setStyle(this.id)" /> | 无 | 无 |
| onchange | 标签的 值 被改变 时 | All | <input type="text" name="text" value="Hello" onchange="checkField(this.value)" /> | 无 | 无 |
| onsubmit | 提交表单 时 | All | <form action="demo_form.asp" onsubmit="return checkForm()"> | 1. 常用来在提交时 执行 表单验证 函数。 2. onsubmit 事件属性值 返回为 true 时，表单才会被提交。 | 1. onsubmit 事件属性只能在 <form> 中使用。 |
| onselect | 标签中 文本被选中 后 | All | 无 | 1. 用于 文本被选中 时的操作。 | 无 |
| onreset | 重置按钮被点击 时 | 文档未说明 | 无 | 无 | 1. HTML5 中不支持。 |
H5 新增：
| 事件 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| oncontextmenu | 当 标签 被鼠标 右键 点击，显示上下文菜单时 | 文档未说明 | 无 | 无 | 1. 对于 鼠标右键点击 的 相关事件 的执行次序： onmousedown：鼠标按下 onmouseup：鼠标释放 oncontextmenu：右键点击结束时 |
| oninput | 当 标签 获得用户输入时 | 文档未说明 | 无 | 无 | 无 |
| oninvalid | 当 标签 无效时 | 文档未说明 | 无 | 无 | 无 |
| onforminput | 当 表单 获得用户输入时 | 文档未说明 | 无 | 无 | 无 |
| onformchange | 当 表单 改变时 | 文档未说明 | 无 | 无 | 无 |
6.2.2.3 Mouse鼠标 事件属性
由 鼠标 或 类似的用户动作 来触发的事件。
6.2.2.3.1 普通：点击 和 移动
鼠标 点击（左/中 键）事件执行顺序：
onmousedown，onmouseup，onclick，ondblclick鼠标 点击（右键）事件执行顺序：
onmousedown，onmouseup，oncontextmenu鼠标 移动 事件执行顺序：
onmousemove，onmouseover，onmouseout
普通：
| 事件 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| onmousedown | 按下 鼠标按钮时 | All | <p onmousedown="mouseDown()">请点击此文本！</p> | 按下 事件 | 无 |
| onmouseup | 释放 鼠标按钮时 | All | 无 | 释放 事件 | 无 |
| onclick | 鼠标 左/中键 单击 时 | All | 无 | 单击 事件 | 无 |
| ondblclick | 鼠标 左/中键 双击 时 | All | 无 | 双击 事件 | 无 |
| oncontextmenu 是 Form 表单事件属性 | 鼠标 右键 单击 结束时 | All | 无 | 单击 事件 | 无 |
| onmousemove | 鼠标指针 移动到 标签上时 | All | <img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley" /> | 移进 事件 | 无 |
| onmouseover | 鼠标指针在标签上 持续移动 时 | All | 无 | 移动中 事件 | 无 |
| onmouseout | 鼠标指针 移出 标签时 | All | 无 | 移出 事件 | 无 |
6.2.2.3.2 H5 新增：拖动 和 滚动条
主要新增了 7个 和 拖动 相关，2个 和 滚动条 相关的 鼠标事件属性。
H5 新增：
| 事件 | 触发条件 | 浏览器兼容性 | 说明 | 应用场景 | 示例 |
|---|---|---|---|---|---|
| ondragstart 被拖动标签 响应 | 标签 在 拖动开始 时 | 文档未说明 | 无 | 无 | 无 |
| ondrag 被拖动标签 响应 | 标签 在 被拖动时（持续生效） | 文档未说明 | 无 | 无 | 无 |
| ondragend 被拖动标签 响应 | 标签 在 拖动结束 时 | 文档未说明 | 无 | 无 | 无 |
| ondragenter 区域标签 响应 | 被拖动到 有效 区域 时 | 文档未说明 | 无 | 无 | 无 |
| ondragover 区域标签 响应 | 在有效 区域 上 拖动时（会与 ondrag 交替生效）（持续生效） | 文档未说明 | 无 | 无 | 无 |
| ondragleave 区域标签 响应 | 离开 有效 区域 时 | 文档未说明 | 无 | 无 | 无 |
| ondrop 区域标签 响应 | 在有效 区域 被 拖动放下 后 | 文档未说明 | 无 | 无 | 无 |
| onmousewheel | 鼠标 滚轮 正在被滚动时 | 文档未说明 | 无 | 无 | 无 |
| onscroll | 滚动条 被滚动时 | 文档未说明 | 可以是 滚轮 滚动，也可以是 鼠标拖动滚动条 滚动的 | 无 | 无 |
6.2.2.3.2.1 拖动相关
包括 2 个主体：被拖动标签 和 区域标签。
拖动 事件属性 概要：3个 被拖动标签 相关，4个 区域标签 相关：
ondragenter（进入 区域，区域标签响应）
ondragover（区域 内移动，区域标签响应）
ondragleave（离开 区域，区域标签响应）
ondrop（区域 内放下，区域标签响应）
ondragstart（点击开始，拖动标签响应）
ondrag（移动中，拖动标签响应）
ondragend（放下结束，拖动标签响应）
被拖动标签：
区域标签：
拖动 事件属性的 执行顺序：
由 被拖动标签 响应触发：
ondragstart（点击开始），
ondrag（移动中，持续生效）
由 区域标签 响应触发：
ondragenter（进入区域），
ondragover（区域内 移动，持续生效，会与 ondrag 交替执行），
ondragleave（离开区域），
ondrop（区域内放下）
由 被拖动标签 响应触发：
ondragend（放下结束）
拖动 使用较多的 3个方法：
ondragstart：预先设置好一些 拖动区域 需要的数据，比如被拖动标签的 id。这些数据可以暂时设置在 event.dataTransfer 中。
ondragover：标签在拖动区域上移动时，拖动区域 需要做的一些 准备动作。比如通知 Web 浏览器 不要执行与事件关联的默认动作 (比如 浏览器 默认
<p>标签 是不可以拖动的；默认 数据 / 元素无法被放置到其他元素中 等)。ondrop：当标签在 区域内 被放下时，拖动区域 需要做的操作。比如 根据之前的 id，来 移动 被拖动的标签。
拖动 示例代码：
<!-- HTML 测试 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML 测试</title> <base href="" target="_top" /> <meta name="description" content="关于 HTML 测试 的摘要" /> <meta name="keywords" content="关于 HTML 测试 的关键字" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" /> <meta http-equiv="content-type" content="text/html, charset=UTF-8" /> <link rel="shortcut icon" href="" type="image/vnd.microsoft.icon"> <link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16"> <style type="text/css"> #area-div { width: 300px; height: 100px; padding: 10px; border: 1px solid black; } </style> </head> <body onload="load()"> <p id="drag-p" draggable="true" ondragstart="dragstart()">这是一段可移动的段落。请把该段落拖入下面的矩形中。</p> <div id="area-div" ondragover="dragover()" ondrop="drop()"></div> <script type="text/javascript"> function dragstart() { event.dataTransfer.setData("id", event.target.id); } function dragover() { event.preventDefault(); } function drop() { let id = event.dataTransfer.getData('id'); event.target.appendChild(document.getElementById(id)); } </script> </body> </html> 复制代码6.2.2.3.2.2 关于 window.event.dataTransfer（涉及 JS，待补充）
目前的理解是，dataTransfer 对象可以存放数据，在所有
事件对象中共享。
数据存放方法为：
event.dataTransfer.setData("id", event.target.id)event.dataTransfer.getData("id")。
6.2.2.3.2.3 双击事件 和 单击事件 冲突 解决方案
分析：
单击事件 click 在触发前，会依次执行: mousedown，mouseup，click。
双击事件 dblclick 在触发前，会依次执行： mousedown，mouseup，click，mousedown，mouseup，click，dblclick。
这里单击，双击 都是指的 左键。
冲突问题：双击事件在触发之间，会先触发 2次 单击事件，造成事件冲突。
解决思路：
在单击事件里加上定时器，延迟执行，并在最开始 解除 上一次 的定时器，保证单击事件 定时器 的 唯一性。
然后在双击事件里，解除 唯一 的 单击事件 定时器，防止触发 单击事件。
示例代码：
<!-- HTML 测试 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML 测试</title> <base href="" target="_top" /> <meta name="description" content="关于 HTML 测试 的摘要" /> <meta name="keywords" content="关于 HTML 测试 的关键字" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" /> <meta http-equiv="content-type" content="text/html, charset=UTF-8" /> <link rel="shortcut icon" href="" type="image/vnd.microsoft.icon"> <link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16"> </head> <body> <span id="click-span">单双击事件冲突测试</span> <script type="text/javascript"> var delay = null; // 解决 单双击事件 冲突的 定时器变量 var clickSpan = document.getElementById("click-span"); clickSpan.addEventListener('click', function(){ if (delay) { clearTimeout(delay); } delay = setTimeout(function(){ // 处理单击事件... alert("单击了！"); }, 300); // 大于 300 毫秒 即可 }); clickSpan.addEventListener('dblclick', function(){ if (delay) { clearTimeout(delay); } // 处理双击事件... alert("双击了！"); }); </script> </body> </html> 复制代码6.2.2.4 Keyboard键盘 事件属性
在 标签 中绑定 Keyboard 键盘事件，用来 监控键盘 的动作。主要是 按下 和 释放 2 种事件。
普通：
| 事件 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| onkeydown | 按下 按键 时 | All | 无 | 1. 判断按键的键码，做出对应的响应。 | 无 |
| onkeypress | 按下 按键 时 | All | 无 | 无 | 1. 不会被触发 的按键：Alt、Ctrl、Shift、ESC。 |
| onkeyup | 释放 按键 时 | All | 无 | 无 | 无 |
6.2.2.4.1 键盘事件 执行顺序
onkeydown（按下）
onkeypress（按下，部分键不触发）
onkeyup（释放）
6.2.2.4.2 键盘监听示例
监听目标：我们可以对 某个标签 进行 局部监听，也可以对
<body>或document进行 全局监听。
键盘监听 示例代码：按下键盘，显示对应的键符和键码
<!-- HTML 测试 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML 测试</title> <base href="" target="_top" /> <meta name="description" content="关于 HTML 测试 的摘要" /> <meta name="keywords" content="关于 HTML 测试 的关键字" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" /> <meta http-equiv="content-type" content="text/html, charset=UTF-8" /> <link rel="shortcut icon" href="" type="image/vnd.microsoft.icon"> <link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16"> </head> <body> <span>键盘事件测试，请按任意键：</span><br /><br /> <span>键码：</span><span id="keycode-span"></span><br /> <span>键符：</span><span id="keychar-span"></span> <script type="text/javascript"> document.onkeydown = function() { // 获取键码 let keyCode = event.keyCode; // 转换为键符 let keyChar = String.fromCharCode(keyCode); // 获取用于显示的标签对象 let keyCodeSpan = document.getElementById("keycode-span"); let keyCharSpan = document.getElementById("keychar-span"); // 将结果显示到页面 keyCodeSpan.innerHTML = keyCode; keyCharSpan.innerHTML = keyChar; } </script> </body> </html> 复制代码6.2.2.5 Media媒介 事件属性
由 媒介（比如 图像，音频 和 视频）触发的事件。
常见于媒介标签中，比如
<img />、<object>、<audio>、<video>、<embed />。
普通：
| 事件 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| onabort | 在退出时 时 | 文档未说明 | 无 | 无 | 无 |
| onwaiting | 在 暂停缓存 时 | 文档未说明 | 无 | 无 | 无 |
H5 新增：
| 事件 | 触发条件 | 浏览器兼容性 | 示例 | 应用场景 | 说明 |
|---|---|---|---|---|---|
| 媒体播放时常用到的事件： | |||||
| onpause | 被用户或程序 暂停时 | 文档未说明 | 无 | 无 | 无 |
| onplay | 已就绪可以开始播放时 | 文档未说明 | 无 | 无 | 无 |
| onplaying | 已开始播放时 | 文档未说明 | 无 | 无 | 无 |
| ontimeupdate | 播放位置改变时 | 文档未说明 | 无 | 1. 比如当用户 快进 到媒介中一个不同的位置时 | 无 |
| onratechange | 速率改变时 | 文档未说明 | 无 | 1. 比如当用户切换到 快速播放 或 慢速播放 模式。 | 无 |
| onvolumechange | 音量改变时 | 文档未说明 | 无 | 1. 包括将 音量 设置为 静音。 | 无 |
| onended | 媒介已到达结尾时 | 文档未说明 | 无 | 1. 可发送类似 "感谢观看" 之类的消息。 | 无 |
| ondurationchange | 媒介长度改变时 | 文档未说明 | 无 | 无 | 无 |
| onreadystatechange | 媒体 就绪状态 改变时 | 文档未说明 | 无 | 无 | 无 |
| onemptied | 发生故障并且文件突然不可用时 | 文档未说明 | 无 | 1. 比如 连接意外断开，网络之类的问题。 | 无 |
| onseeking | 当 seeking 属性设置为 true（指示 定位 是活动的）时 | 文档未说明 | 无 | 无 | 无 |
| onseeked | 当 seeking 属性设置为 false（指示 定位 已结束）时 | 文档未说明 | 无 | 无 | 无 |
| 缓冲类型事件： | |||||
| oncanplay | 文件缓冲部分，但可以开始播放时 | 文档未说明 | 无 | 无 | 无 |
| oncanplaythrough | 文件完全缓冲，可以开始播放直到结束时 | 文档未说明 | 无 | 无 | 无 |
| 获取数据类型的 事件： | |||||
| onloadstart | 文件 准备开始加载 前 | 文档未说明 | 无 | 无 | 无 |
| onprogress | 浏览器正在获取媒介数据时 | 文档未说明 | 无 | 无 | 无 |
| onstalled | 浏览器不论何种原因 未能取回媒介数据 时 | 文档未说明 | 无 | 无 | 无 |
| onsuspend | 媒介数据完全加载之前不论何种原因 终止取回媒介数据 时 | 文档未说明 | 无 | 无 | 无 |
| onloadedmetadata | 元数据（比如分辨率和时长）被加载时 | 文档未说明 | 无 | 无 | 无 |
| onloadeddata | 媒介数据已加载时 | 文档未说明 | 无 | 无 | 无 |
| onerror | 加载期间发生错误时 | 文档未说明 | 无 | 无 | 无 |
7 标签 解析（共110个，其中 H5 新增30个）
7.1 基础标签（7个）
基础标签包括：
<!DOCTYPE>，<!--…-->，<html>，<head>，<title>，<base />，<body>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<!DOCTYPE> | 定义 文档类型 | All | 无 | 1. H5 文档声明：<!DOCTYPE html>2. 其他类型 的文档声明： 不常用，省略。 其他请查阅： 《HTML 文档类型》 | 1. <!DOCTYPE> 声明必须是 HTML 文档的 第一行。2. <!DOCTYPE> 声明没有 结束标记。3. <!DOCTYPE> 声明对 大小写 不敏感。4. <!DOCTYPE> 声明不是 HTML 标签。它是用来指示 web 浏览器使用哪个 HTML 版本去 解析文档 的一个 指令。 |
<!--...--> | 定义 注释 | All | 无 | 1. <!--这是一段注释 -->2. 隐藏内联脚本： <script type="text/javascript"><!--document.write("Hello World!")//--></script>3. 条件注释：可识别 IE 5+ <!--[if lt IE 8]>IE 低于 8 版本执行的 HTML <![endif]--><!--[if gt IE 8]>IE 高于 8 版本执行的 HTML <![endif]--><!--[if !IE]>IE 以外 的浏览器执行的 HTML <![endif]--> | 1. 注释不会在浏览器中显示。 2. 可以使用注释标签 <!--...-->来 隐藏 浏览器不需要的 内联 脚本代码，这样就不会把脚本显示为 纯文本。记得使用 // 去注释掉 -->，避免 js 执行了 ->。( // 是 js 的注释符号)3. 支持 识别 IE5+ 的 条件注释。 |
<html> | 定义 文档内容 | All | 1. 常用的 全局属性：lang，xml:lang。 2. xmlns：定义 XML namespace 命名空间 属性，浏览器会将此 命名空间 应用于该属性所在元素内的所有内容。 其 值 固定为： http://www.w3.org/1999/xhtmlH5 新属性： 3. manifest：定义一个 URL，在这个 URL 上描述了文档的 缓存规则信息。 值：url。 兼容性：文档未说明。 | 1. 示例：<html><head></head><body></body></html> | 1. <html> 与 </html> 标签限定了文档的 开始点 和 结束点。2. 在它们之间是文档的 头部 和 主体。 3. 头部由 <head> 标签定义，主体则由 <body> 标签。4. 即使 <html> 标签是文档的 根元素，它也不包含 <!DOCTYPE> 标签。<!DOCTYPE> 标签 必须位于 <html> 标签 之前。5. xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。 因为它的值是 固定 的，所以即使没有使用此属性，也会被自动添加进去。 |
<head> | 定义文档的 头部 | All | 预留的属性：还未投入使用 1.profile：一个由空格分隔的 URL 列表，这些 URL 包含着有关页面的 元数据 信息。 值：url。 相关说明： a. 文档的头部经常会包含一些 <meta /> 标签，用来告诉浏览器关于文档的附加信息。在将来，创作者可能会利用 预先定义好 的 标准文档 的 元信息配置文件（metadata profile），以便更好地描述它们。b. profile 属性提供了与 当前文档 相关联的 配置文件 的 URL。 c. 配置文件的 格式 以及 浏览器使用它们的 方式 都还 没有进行定义，这个属性主要是为 将来的开发 而 保留的占位符。 | <head>头部内的标签 </head> | 1. 头部内 包括的标签：<title>：标题，<base />：基准地址 和 默认目标，<meta />：元信息，<link />：外部资源 (常用于链接 外联样式表)，<style>：内联样式信息，<script>：内联脚本代码 或 链接 外联脚本文件。2. <title> 是 <head> 中 唯一必需 的标签。3. <head> 标签必须处于 <body> 或 <frameset> 标签 之前。 |
<title> | 定义文档的 标题 | All | 无 | <title>文档的标题</title> | 1. <title>的 内容 会出现在：a. 浏览器窗口标题。 b. 书签标题。 c. 搜索引擎 结果列表 中显示的标题。 2. <title>是头部中 必须存在 的标签。 |
<base /> | 定义页面中所有链接的 基准地址 和 默认目标 | All | 1. href（必须属性）：规定页面中所有 相对URL 的 基准 URL。 (只对 相对路径 有效，对 绝对路径 无效) 值：url。 2. target：指定在 何处 打开 页面中 所有的链接。 值： _self：默认，相同的框架中 _top：在整个窗口中 _blank：新窗口中 _parent：父框架集中 framename：指定的框架中 | <basehref="https://www.baidu.com/s"target="_top"/> | 1. 一般地，浏览器会根据 当前文档的 URL 来补充页面中 相对 URL 中的空白。 2. 当使用 <base /> 标签后，浏览器会使用 指定的基准 URL 来补充所有的 相对URL。 |
<body> | 定义文档的 主体 | All | 1. 常用的全局 Window 事件属性：onload。 | <body onload="load()"></body> | 1. 主体内 包括的 标签有：文本、超链接、图像、列表、表格、表单、音视频、脚本、框架 等 包含 文档 的所有内容。 |
7.2 元信息标签（1个）
元信息标签：
<meta />。
应用背景：
服务器 发送 响应 设置 响应头信息，可以在页面使用
<meta />标签，也可以 在响应中 通过代码设置。浏览器 发送 请求 设置 请求头信息，一般是 浏览器自行设置，对用户透明。如果是调用接口，在 ajax 中可以 自行设置 相关 请求头信息。
扩展内容较多，详情见 《HTML 详解 - 元信息相关》
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<meta /> | 定义关于 HTML 文档的 元信息 | All | 键： 1. name：给 搜索引擎 或 浏览器 提供的一些字段。但文档并没有规定它的 值，需要 自定义。 常用的键：description，keywords，viewport 等。 对应的 content 的值：用户的 自定义文本 或者 约定俗成 的值。 2. http-equiv：定义 服务器 的 响应 中，头部的 键值对 内容。 常用的 键/值： 详情见 《HTML 详解 - 元信息相关》 中对 消息头的归纳。 注意：头部的 键 和 值 都是 文档规范好 的。 3. scheme：用于指定要用来翻译 content属性值 的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件（包含元数据信息）中进行了定义。文档未说明。 值： 3. content（必须）： 定义与 name 或 http-equiv 键属性 相匹配的 值信息。 | 1. name 键： a. 给 搜索引擎 提供页面的相关信息： <!-- 搜索引擎列表 显示的摘要 --><meta name="description" content="" /><!-- 面向搜索引擎提供的 关键字 --><meta name="keywords" content="" />b. 在 响应式开发 中，修改布局视口： <metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" />2. http-equiv 键： 响应的 头部信息 设置： <!-- 文档类型 和 编码设置 --><metahttp-equiv="content-type"content="text/html, charset=UTF-8"/> | 1. 元信息 实际上是由一组的 键/值 对 组成。 2. 键属性 有 2 个：name 和 http-equiv。 如果没有提供 name 属性，那么会使用 http-equiv 属性来替代。 3. 键属性 作用： a. name 键： Ⅰ. 提供给 搜索引擎 约定的 信息，便于其 检索到你的网页。 Ⅱ. 响应式设置：控制 移动端 浏览器 的 布局视口 为 设备的宽度 (即是移动设备的 理想视口) b. http-equiv 键： 设置 响应 的头信息，用于控制 浏览器 的行为。 比如告诉 浏览器，它将要接受到的 文档 的，类型，编码方式 等。 4. 值属性：content，它是 必须存在 的。 |
7.3 样式，脚本标签（4个）
样式，脚本 标签包括：
<link />，<script>，<noscript>，<style>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<link /> | 定义文档与外部资源的关系 | All | 1. rel：规定当前文档与被链接文档之间的关系。常用的值：stylesheet（外联样式表） 2. type：规定被链接文档的 MIME 类型。 最常见的 MIME 类型是 text/css，该类型描述 样式表。 和 <style> 标签的 type 属性相同。3. href：规定被链接文档的位置。 如果 链接 的最后 不是文件，是文件夹的话，记得在最后加上 正斜杠。不然 服务器会添加 正斜杠 到这个地址，然后创建一个新的请求，这样就造成两次请求了。如： href="http://www.w3school.com.cn/html/"4. media：规定被链接文档将被显示在什么设备上。 属性值： screen(计算机屏幕, 默认) print(打印预览模式) all(适合所有设备) handheld(手持设备, 小屏幕、有限的带宽)（handheld 只有 Opera 支持）等 5. sizes H5 新属性：规定被链接资源的尺寸。仅适用于 rel="icon"（网站标题图标）。 6. hreflang：规定被链接文档中文本的语言。几乎没有主流浏览器支持 hreflang 属性。 | <head><link rel="stylesheet" type="text/css" href="theme.css" /><link rel="icon" href="/i/demo_icon.ico" type="image/vnd.microsoft.icon" sizes="16x16" /></head> | 1. 在用于外联样式表时，<link /> 标签得到了几乎所有浏览器的支持。但是几乎没有浏览器支持其他方面的用途。2. <link /> 标签是 空元素。3. <link /> 标签 只能存在于 <head> 内，不过它可出现任何次数。 |
<script> | 定义 内联脚本 或 链接 外联脚本 | All | 1. type：脚本的 MIME 类型，必须属性。 常用的值： JavaScript 的 MIME 类型：type="text/javascript" 2. src：规定外部脚本文件的 URL。 3. defer：让 外联脚本 延迟加载，在页面加载完毕再执行。 属性值省略，或为本身。 4. async H5新属性：规定异步执行 外联脚本。 属性值省略，或为本身。 5. charset：规定在外部脚本文件中使用的字符编码。默认的字符编码是 ISO-8859-1。 如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。 charset 属性与 src 属性一起使用，告诉浏览器用来编码这个 javascript 程序的字符集。 6. xml:space：规定是否保留代码中的空白。 文档未说明。 | <script type="text/javascript">document.write("Hello World!")</script> | 1. 如果 脚本 不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。只适用于外部脚本。 2. 框架集 <frameset> 标签之后的脚本会被忽略。 |
<noscript> | 定义 不支持 客户端脚本 时的 提示信息 | All | 无 | <noscript>Your browser does not support JavaScript!</noscript> | 无 |
<style> | 定义 内联css样式 | All | 1. type（必须）：规定样式表的 MIME 类型。唯一值：text/css。 2. media：为样式表规定不同的媒介类型。 常用的值： screen(计算机屏幕, 默认) print(打印预览模式) all(适合所有设备) handheld(手持设备, 小屏幕、有限的带宽)（handheld 只有 Opera 支持）等 | <style type="text/css" media="screen, print">h1 {color:red}p {color:blue}</style> | 1. <style> 标签位于 <head> 标签中。2. type 属性是必需的，定义文件类型。且唯一可能的值是 "text/css"。 |
7.4 标题，分区 等标签（15个）
标题，分区标签 包括：
普通 标题，分区 标签 6个：
<div>，<h1>，<p>，<span>，<br />，<hr />H5 新增 语义化 分区 标签 9个：
<header>，<footer>，<nav>，<section>，<article>，<aside>，<dialog>，<details>，<summary>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<div> | 定义文档中的分区(division) / 节(section)。结构化标记，无语义。 | All | 无 | 无 | 1. <div> 是一个块级元素，浏览器会在 div 元素前后放置一个换行符。2. 使用 <div> 元素来组合块级元素。 |
<h1> ... <h6> | 定义 HTML 标题 | All | 无 | 无 | 1. <h1> 定义最大的标题。<h6> 定义最小的标题。 |
<p> | 定义段落 | All | 无 | 无 | 1. 浏览器会自动在 <p> 前后创建一些空白，您也可以在样式表中规定。 |
<span> | 定义文档中的分区(division) / 节(section)。结构化标记，无语义。 | All | 无 | 无 | 1. 如果不对 span 应用样式，那么 span 元素中的文本 与 其他文本不会有任何视觉上的差异。2. 使用 <span> 来组合行内元素。 |
<br /> | 定义简单的换行 | All | 无 | 无 | 1. <br /> 标签是空标签。2. 请使用 <br /> 来输入空行，而不是分割段落。3. <br /> 标签只是简单地开始新的一行，区别于，当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。 |
<hr /> | 定义水平线 | All | 无 | 无 | 无 |
H5 新增：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<header> | 定义 section 或 page 的页眉 | IE 8 以及更早的版本不支持 | 无 | 无 | 无 |
<footer> | 定义 section 或 page 的页脚 | IE 8 以及更早的版本不支持 | 无 | <footer><p>Posted by: W3School</p><p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p></footer> | 1. 页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。 |
<nav> | 定义导航链接 | IE 8 以及更早的版本不支持 | 无 | <nav><a href="index.asp">Home</a><a href="html5_meter.asp">Previous</a><a href="html5_noscript.asp">Next</a></nav> | 1. nav 是一个偏向语义化的标签。 2. 如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。 |
<section> | 定义 section，比如章节、页眉、页脚 或 文档中的其他部分 | All | cite：section 的 URL，假如 section 摘自 web 的话。 | 无 | 1. <section> 常用的作为 章节 等的容器，里应该有 标题 等。2. 而 <div> 才是一个专用来做容器的标签。 |
<article> | 定义文章，来源包括 论坛帖子，报纸文章，博客条目，用户评论 等。 | IE 8 以及更早的版本不支持 | 无 | 无 | 1. 一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。 |
<aside> | 定义页面内容之外的内容 | IE 8 以及更早的版本不支持 | 无 | 无 | 1. aside 的内容应该与附近的内容相关。 2. <aside> 的内容可用作文章的侧栏。 |
<dialog> | 定义对话框或窗口 | All | open：定义是否显示窗口。 | <dialog open>对话窗口的内容</dialog> | 1. 经过测试，对话框是悬浮在页面之上的，对原有的页面没有影响。 2. 可以在 dialog 中添加一些 输入框 和 按钮，来制作对话框。 |
<details> | 定义文档或文档某个部分的细节 | All | open：定义细节是否展开。默认不展开。 | <details open><summary>Copyright 2011.</summary><p>All pages and graphics on this web site are the property of W3School.</p></details> | 无 |
<summary> | 为 <details> 元素定义可见的标题 | All | 无 | 无 | 1. "summary" 元素应该是 "details" 元素的 第一个 子元素。 |
7.5 图像 标签（6个）
图像标签 包括：
普通 图像标签 3个：
<img />，<map>，<area />H5 新增 图像标签 3个：
<canvas>，<figure>，<figcaption>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<img /> | 定义图像 | All | 1. src（必须）：规定显示图像的 URL。 2. alt（必须）：规定图像的替代文本。 3. height：定义图像的高度。 4. width：设置图像的宽度。 5. usemap：将图像定义为 客户器端 图像映射。图像映射指的是带有可点击区域的图像。 属性值为：#mapname 或 #mapid。 需要配合 <map>，<area> 标签一起使用。6. ismap：将图像定义为 服务器端 图像映射。 当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。 7. longdesc：规定指向图像描述信息页面的 URL。 没有浏览器支持该属性。 | 1. 客户端 图像映射：<img src="planets.gif" alt="Planets" usemap="#planetmap" /><map name="planetmap"><area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /><area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /><area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /></map>2. 服务端 图像映射： <a href="demo_form.asp"><img src="tulip.gif" ismap /></a> | 1. usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img /> 与 <map> 之间的关系。消除了 服务器端 对鼠标坐标的处理，以及由此带来的网络延迟问题。2. 只有当 <img /> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性。3. <img /> 是空标签。 |
<map> | 定义客户端 图像映射 | All | 1. id（必须的属性）：为 map 标签定义唯一的名称。 2. name：对应 <img /> 的 usemap 属性值。 | 无 | 1. <img /> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。 |
<area /> | 定义图像地图（<map>）内部的区域 | All | 1. alt（必须）：定义此区域的替换文本。 2. shape：定义区域的形状。 3. coords：定义可点击区域（对鼠标敏感的区域）的坐标。 4. href：定义此区域的目标 URL。如果没有目标则定义 noherf 属性。 5. nohref：表示该区域没有相关的链接。属性值为 本身。 6. target：规定在何处打开 href 属性指定的目标 URL。 常用的值： _self：默认，相同的框架中 _top：在整个窗口中 _blank：新窗口中 _parent：父框架集中 framename：指定的框架中 相关说明： shape 和 coords匹配的格式： 1. 圆形：shape="circle"，coords="x,y,r" 2. 矩形：shape="rect"，coords="x1,y1,x2,y2"，（x1,y1） 和 （x2,y2）分别是矩形两个对角顶点的坐标 3. 多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..." | 无 | 1. <area /> 永远嵌套在 <map> 内部。2. <area /> 是空标签。 |
H5 新增：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<canvas> | 定义图形，比如图表 和 其他图像。 | IE 8 以及更早的版本不支持 | 1. height：设置 canvas 的高度，默认150。 2. width：设置 canvas 的宽度，默认 300。 | 绘制一个简单的红色矩形：<canvas id="myCanvas"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.fillStyle = '#FF0000';ctx.fillRect(0,0,80,100);</script> | 1. <canvas> 标签只是图形容器，必须使用 JavaScript 脚本 来绘制图形。2. <canvas> 自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript，以使脚本能够把想绘制的东西都绘制到一块画布上。3. canvas 与 SVG，VML 的区别： <canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑，只要从其描述中移除元素就行。但是要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。4. 绘图方法：大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过 Canvas 对象 的 getContext('2d') 方法获得的一个 “绘图环境” 对象 CanvasRenderingContext2D 上。然后使用绘图环境的各种属性，如 fillStyle 等。Mozilla 提供的： 《Canvas 教程（中文）》 Canvas技术详解：《HTML 详解 - Canvas 详解》 博文 5. Canvas API 没有对绘制 文本 提供任何支持。要把文本加入到一个 <canvas> 图形，要么自己绘制它再用 位图图像 合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。6. 出于性能考虑，不建议过多使用。 |
<figure> | 定义独立的流内容（图像、图表、照片、代码等等） | IE 8 以及更早的版本不支持 | 无 | <figure><figcaption>黄浦江上的的卢浦大桥</figcaption><img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure> | 1. 注意：<figure> 标签的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。2. <figure> 标签 四周会有边距，产生 显突效果。3. 请使用 <figcaption> 为 <figure> 添加标题。 |
<figcaption> | 定义 <figure> 标签的标题 | IE 8 以及更早的版本不支持 | 无 | 无 | 1. <figcaption> 标签应该被置于 <figure> 标签里的 第一个 或 最后一个 子元素的位置。 |
7.6 链接 标签（1个）
链接标签：
<a>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<a> | 定义超链接 | All | 1. href：规定链接指向的页面的 URL。属性值包括 片段标识符 和 JavaScript 代码段。2. target：规定在何处打开链接文档。常用的值： _self：默认，相同的框架中 _top：在整个窗口中 _blank：新窗口中 _parent：父框架集中 framename：指定的框架中 3. rel：规定当前文档与被链接文档之间的关系。作用不大。4. download H5新属性，重点：规定被下载的超链接目标。设置一个值来规定下载文件的 名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件。 只有 Firefox 和 Chrome 支持 download 属性。5. media H5新属性：规定被链接文档是为何种媒介/设备优化的。属性值： screen(计算机屏幕, 默认)print(打印预览模式)all(适合所有设备) handheld(手持设备, 小屏幕、有限的带宽)（handheld 只有 Opera 支持）等6. type H5新属性：规定被链接文档的的 MIME 类型。7. hreflang：规定被链接文档中文本的语言。几乎没有主流浏览器支持 hreflang 属性。8. 全局属性： title 等。 | 图像链接：<a href="http://www.w3school.com.cn/index.html"><img src="/i/w3school_logo_white.gif" /></a>可以下载的链接： <a href="/images/myw3schoolimage.jpg" download="w3logo">邮件链接： <a href="mailto:xxx@yyy">media 属性： <a href="att_a_media.asp?output=print" media="print">打开用于打印的 media 属性页面 </a> | 1. 在所有浏览器中，链接的默认外观是：未被访问的链接：带有下划线而且是蓝色的。已被访问的链接：带有下划线而且是紫色的。活动 (鼠标移上去的) 链接：带有下划线而且是红色的。可以使用CSS修改默认的样式。2. 如果不使用 href 属性，则不可以使用如下属性：target, download, media 以及 type 等属性。3. 在 HTML 4.01 中， <a> 标签可以是超链接 或 锚。在 H5 中，<a> 标签始终是超链接。4. 关于 href 属性值： a. 如果未设置 href 属性 或者 属性值为 javascript:void(0)，则只是超链接的占位符，无效果。可通过 全局事件属性 onclick 来添加点击事件。b. 如果 href 属性值为 空，则表示 刷新。c. 如果属性值为 #，则表示 回到页面顶部。 |
7.7 列表，菜单 标签（9个）
列表，菜单 标签包括：
普通 列表，菜单 标签 8个：
<ul>，<ol>，<li>，<dl>，<dt>，<dd>，<menu>，<menuitem>H5 新增 菜单 标签 1个：
<command>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<ul> | 无序列表 | All | 无 | 无 | 无 |
<ol> | 有序列表 | All | 1. type：规定在列表中使用的标记类型。属性值有：1，A，a，I，i。2. start：规定有序列表的起始值。3. reversed H5新属性：降序设置。只有 Chrome 和 Safari 6 支持。 | 无 | 无 |
<li> | 列表的项目 | All | 无 | 无 | 无 |
<dl> | 自定义列表 | All | 无 | 无 | 无 |
<dt> | 自定义列表中 多个项目的 组名 | All | 无 | 无 | 无 |
<dd> | 自定义列表中的项目 | All | 无 | 无 | 无 |
<menu> | 定义 命令 的列表 或 右键菜单 | 所有主流浏览器暂不支持 （测试 Firefox 支持定义 右键菜单） | 1. type H5新属性：规定菜单类型。所有主流浏览器暂不支持。属性值： list：默认。规定列表菜单。一个用户可执行或激活的命令列表（li 元素）。 context：规定上下文菜单。该菜单必须在用户能够与命令进行交互之前被激活。 toolbar：规定工具栏菜单。活动式命令，允许用户立即与命令进行交互。 2. label H5新属性：规定菜单的可见标签。所有主流浏览器暂不支持。 | 无 | 1. HTML 4.01 中已弃用 <menu> 元素，在 HTML5 中重新定义了 <menu> 元素。2. 实现右键菜单需要配合全局属性 "contextmenu"。 |
<menuitem> | 定义右键菜单项目 | 1. 依赖 <menu>2. 只有 Firefox 8.0 及以上 支持。 | 1. 全局时间属性 onclick：可以用来定义菜单项目的 点击事件。H5新属性(文档没有详细说明)：2. type：规定命令/菜单项的类型。值有 command(默认)，checkbox，radio。3. radiogroup：规定命令组的名称。仅在类型为 radio 时使用。4. checked：定义是否被选中。仅用于 radio 或 checkbox 类型。5. disabled：定义是否可用。6. icon：规定命令/菜单项的图标的 url。7. label 必需：规定命令/菜单项的名称，以向用户显示。8. default：把命令/菜单项设置为默认命令。9. open：定义 details 是否可见。 | 无 | 1.<menuitem> 这些新属性的出现，应该是为了简化 单选框，复选框 等组件的原生代码编写。 |
H5 新增：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<command> | 定义命令按钮，可以用来替代 <menuitem> | 1. 依赖 <menu>。2. 文档说只有 IE9 支持。 | 1. 全局时间属性 onclick：可以用来定义命令的点击事件。2. type：定义该 command 的类型，值有 command(默认)，checkbox，radio。3. radiogroup：定义 command 所属的组名。仅在类型为 radio 时使用。4. checked：定义是否被选中。仅用于 radio 或 checkbox 类型。5. disabled：定义 command 是否可用。6. icon：定义作为 command 来显示的图像的 url。7. label：为 command 定义可见的 label，即显示的文本内容。 | 无 | 1. <command> 的出现，应该是为了简化 单选框，复选框 等组件的原生代码编写。 |
7.8 表格 标签（10个）
表格 标签包括：
普通 表格 标签 7个：
<table>，<caption>，<tr>，<th>，<td>，<col />，<colgroup>语义化 表格标签 3个：
<thead>，<tbody>，<tfoot>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<table> | 定义表格 | All | 从实用角度出发，下面6个属性最好用 CSS样式 来替代： 1. border：规定表格边框的宽度。2. width：规定表格的宽度。如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。 3. cellpadding：规定单元边沿与其内容之间的空白。4. cellspacing：规定单元格之间的空白。5. rules：规定内侧边框的哪个部分是可见的。属性值略，兼容性差 且 显示效果不统一。 6. frame：规定外侧边框的哪个部分是可见的。属性值略， IE 不支持。考虑屏幕阅读器的可以利用该属性：7. summary：规定表格的摘要。 | <table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table> | 1. 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。2. 复杂的 HTML 表格也可能包括 caption 元素。 |
<caption> | 定义表格标题 | All | 无 | 无 | 1. caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 |
<tr> | 行 | All | 1. align：定义表格行的内容对齐方式。常用的属性值： right，left，center，justify（行伸展），char。 注意： a. IE 无法正确地处理 "justify" 值，会以居中的方式进行处理。 b. 没有浏览器支持识别 "char" 值。 2. char：属性规定将表格行中的内容相对某个字符的对齐方式。仅当 align 属性设置为 "char" 时，才能使用 char 属性。几乎没有浏览器支持 char 属性。3. valign：规定表格行中内容的垂直对齐方式。常用的属性值：top，middle，bottom，baseline（基线对齐）。 4. charoff：规定第一个对齐字符的偏移量。几乎没有浏览器支持 charoff 属性。 | 无 | 无 |
<th> | 行 里的 表头单元格 | All | 1. colspan：合并列数。2. rowspan：合并行数。3. align，valign 等。 | 无 | 无 |
<td> | 行 里的 标准单元格 | All | 1. colspan：合并列数。2. rowspan：合并行数。3. align，valign 等。 | 无 | 无 |
<col /> | 定义表格中一个或多个 列 的 属性值 | All | 1. 包括 <th>，<td> 的属性都可以统一设置。2. span：规定 <col /> 应该横跨的列数。默认为 1。 | 无 | 1. 请为 <col /> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。2. 如果希望在 <colgroup> 内部为每个列规定不同的属性值时，请使用此元素。如果没有 <col />，列会从 <colgroup> 那里继承所有的属性值。3. 经测试，浏览器都不支持 设置 align 属性。 |
<colgroup> | 定义表格中供 格式化 的 列组 | All | 1. 包括 <th>，<tr> 的属性都可以统一设置。2. span：规定 <colgroup > 应该横跨的列数。 | 无 | 同 <col /> |
<thead> | 定义表格中的 表头内容 | 所有浏览器 部分支持 | align，valign 等。 | 无 | 1. 偏向语义化：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。2. <thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。 |
<tbody> | 定义表格中的 主体内容 | 所有浏览器 部分支持 | align，valign 等。 | 无 | 同 <thead> |
<tfoot> | 定义表格中的 表注内容（脚注） | 所有浏览器 部分支持 | align，valign 等。 | 无 | 同 <thead> |
7.9 表单 标签（13个）
表单 标签包括：
普通 表单 标签 10个：
<form>，<fieldset>，<legend>，<label>，<input />，<textarea>，<select>，<optgroup>，<option>，<button>H5 新增 表单 标签 3个：
<datalist>，<output>，<keygen>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<form> | 定义供用户输入的 HTML 表单，用于向服务器传输数据 | All | 1. action：数据提交的目的地 URL。2. method：规定用于发送 form-data 的 HTTP 方法，常用的值包括 get, post 等。3. name：规定表单的名称，提供了一种在脚本中引用表单的方法。4. target：规定在何处打开 action URL。对页面中所有的 链接 或 跳转 都有效。常用的值： _self：默认，相同的框架中 _top：在整个窗口中 _blank：新窗口中 _parent：父框架集中 framename：指定的框架中 5. enctype：规定在发送表单数据之前如何对其进行编码。可能的值： a. application/x-www-form-urlencoded：在发送前编码所有字符（默认）b. multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。c. text/plain：空格转换为 "+" 加号，但不对特殊字符编码。6. accept-charset：规定服务器可处理的表单数据字符集。如需规定一个以上的字符集，请使用逗号来分隔各字符集。 常用值： UTF-8：Unicode 字符编码ISO-8859-1：拉丁字母表的字符编码7. autocomplete H5新属性：规定是否启用表单的自动完成功能。属性值包括：on（默认开启），off。 8. novalidate H5新属性：如果使用该属性，则提交表单时不进行验证。值为 "novalidate"。 | 无 | 1. 下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color 中，属性 formaction，formmethod，formtarget，formenctype，formnovalidate 可以覆盖 <form> 中对应的属性。 2. form 元素是 块级元素，其前后会产生折行。 |
<fieldset> | 定义围绕表单中元素的边框，包含 legend 元素一起使用 | All | 无 | 无 | 1. 会有特殊的样式。 |
<legend> | 定义 fieldset 元素的标题 | All | 无 | 无 | 1. 不是 fieldset 中的必需元素。 |
<label> | 定义 input 元素的标注，作用是联动触发 input 控件 | All | 1. for：规定 label 绑定到哪个表单元素的 id。2. form H5新属性：规定 label 字段所属的一个或多个表单的 id。 | 无 | 无 |
<input /> | 定义输入控件 | All | 内容过多，属性在下面一小节归纳。 | 无 | 无 |
<textarea> | 定义多行的文本输入控件 | All | 1. cols：规定文本区内的可见宽度（以 字符数 计）。2. rows：规定文本区内的可见高度（以 行数 计）。3. name：规定文本区的名称。用于在表单提交之后，对表单数据进行引用。 或者用于在 JavaScript 中对元素进行引用。 4. readonly：规定文本区为只读。5. disabled：规定禁用文本区。H5 新属性： 6. wrap：规定当在表单中 提交 时，文本区域中的文本如何换行。属性值包括： a. soft：当在表单中提交时，textarea 中的文本不换行。默认值。b. hard：文本换行。当使用 "hard" 时，必须规定 cols 属性。7. placeholder：填写输入字段的默认提示。IE 9 以及更早的版本不支持。8. maxlength：规定文本区域的最大字符数。IE 9 以及更早的版本不支持。9. required：规定文本区域是必填。IE 和 Safari 不支持。10. autofocus：在页面加载后文本区域自动获得焦点。IE 9 以及更早的版本不支持。11. form：规定文本区域所属的一个或多个表单。属性值为 form 的 id。IE 不支持。 | 无 | 1. 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 2. 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。 3. 在文本输入区内的文本行间，用 "%0D%0A" （回车/换行，这里是 URL 字符编码）进行分隔。 |
<select> | 定义选择列表 | All | 1. multiple：规定可选择多个选项。默认单选。2. name：规定下拉列表的名称。3. disabled：规定禁用该下拉列表。4. size：控制前台可见显示的选项数目，默认为 1。5. autofocus H5新属性：规定在页面加载后文本区域自动获得焦点。6. required H5新属性：规定是必选的。7. form H5新属性：规定文本区域所属的一个或多个表单。属性值为 form 的 id。 | <select><optgroup label="Swedish Cars"><option value ="volvo" se>Volvo</option><option value ="saab" selected="selected">Saab</option></optgroup></select> | 无 |
<optgroup> | 给选择列表中的 option 进行分组 | All | 1. label 必须的属性：选项组规定描述。 | 无 | 无 |
<option> | 选项，在 datalist，select，optgroup 等中使用 | All | 1. value：定义送往服务器的选项值 或 datalist 的下拉项显示的文本。2. label：项目的显示文本。不过一般直接在标签里放置文本。只有 IE 7 及以上支持。 3. selected：规定选项在首次加载时表现为选中状态。类似 input 的 radio，checkbox 类型的 checked 属性。4. disabled：规定此选项应在首次加载时被禁用。 | 无 | 1. <option> 标签 不是 空元素。 |
<button> | 定义按钮 | All | 略 | 无 | 1. 建议使用 input 元素来创建按钮。 |
H5 新增：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<datalist> | 定义 input 的历史下拉列表，配合 input 和 option 一起使用 | 除了 IE 和 Safari 暂不支持 （测试， 最新 IE 支持 datalist 标签） | id：使用 input 元素的 list 属性来绑定 datalist 的 id。 | <input id="myCar" list="cars" /><datalist id="cars"><option value="BMW"></option><option value="Ford"></option><option value="Volvo"></option></datalist> | 1. 如果 表单自动完成属性 autocomplete 没有关闭，则在 IE 中，历史记录会被 datalist 内容 取代。在 chrome中，历史内容 会分开排在 datalist 内容的后面。2. 同选择列表 select 一样， datalist 及其 选项 不会在前台 直接 显示出来，它仅仅是合法的输入值列表。 |
<output> | 定义不同类型的输出，比如脚本的输出。配合 <input> 标签 及 form 的 oninput 事件属性 一起使用。具体看示例 | IE8 及以前版本 暂不支持 | 1. name：定义对象的唯一名称（表单提交时使用）。2. for：规定了计算结果中使用到的元素列表。属性值为 一个或多个元素的 id 列表。以空格分隔。 3. form：定义输入字段所属的一个或多个表单。属性值为 form 的 id。 | <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output id="x" for="a b" ></output></form> | 无 |
<keygen> | 规定用于表单的 密钥对 生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。 | IE 和 Safari 暂时不支持 | 1. name：定义 keygen 元素的唯一名称。用于在提交表单时搜集字段的值。2. keytype：定义加密类型。属性值有 "rsa" 等。 3. challenge：如果使用，则将 keygen 的值设置为在提交时询问。属性值为 "challenge"。 4. autofocus：加载时获得焦点。5. disabled：禁用 keytag 字段。6. form：定义该 keygen 字段所属的一个或多个表单。 | 无 | 用到再归纳。 |
7.9.1 input 标签 属性详解（29个）
input 标签 属性 包括：
普通 input 标签 属性 11个：
type，value，name，size，maxlength，readonly，disabled，checked，src，alt，acceptH5 新增 input 标签 属性 18个：
autocomplete，autofocus，list，placeholder，required，step，min，max，multiple，pattern，height，width，form，formaction，formmethod，formtarget，formenctype，formnovalidate
普通 input 标签 属性：
| 属性 | 作用 | 属性值 | 说明 | 示例 |
|---|---|---|---|---|
1.type | 规定 input 元素的类型 | text：单行文本框。 | 1. 默认宽度为 20 个字符。 | 无 |
password：单行密码框。 | 1. 该字段中的字符被 掩码。 | 无 | ||
hidden：隐藏的输入字段。 | 1. 隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。 | <input type="hidden" name="country" value="China" /> | ||
button：可点击按钮。 | 1. 多数情况下，用于通过 JavaScript 启动脚本。 | <input type="button" value="Click me" onclick="msg()" /> | ||
submit：提交按钮。 | 无 | 无 | ||
reset：重置按钮。 | 无 | 无 | ||
image：图像形式的提交按钮。 | 1. 必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。 | <input type="image" src="/i/eg_submit.jpg" alt="Submit" /> | ||
file：文件浏览按钮。 | 1. 供文件上传。 | <input type="file" name="pic" accept="image/gif" /> | ||
radio：单选按钮 | 无 | 无 | ||
checkbox：复选按钮。 | 1. 单选按钮 或 复选按钮，同一组的 name 属性必须相同。 | <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /><input type="checkbox" name="vehicle" value="Car" /> I have a car<br /><input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br /> | ||
其他的 H5 输入类型，包括：number，range，color，email，search，tel，url，month，week，date，time，datetime，datetime-local。 | 1. 老式 web 浏览器不支持的输入类型，会被视为输入类型 text。 | 数字（提供快捷上下调整控件）：<input type="number" name="points" min="0" max="100" step="10" value="30">数字选择滑动器： <input type="range" name="points" min="0" max="10">颜色： <input type="color" name="favcolor">email： <input type="email" name="email">搜索： <input type="search" name="googlesearch">电话号码： <input type="tel" name="usrtel">url： <input type="url" name="homepage">月份： <input type="month" name="bdaymonth">周数 和 年： <input type="week" name="week_year">日期： <input type="date" name="bday" min="2000-01-02">时间： <input type="time" name="usr_time">日期时间(有时区)： <input type="datetime" name="bdaytime">日期时间(无时区)： <input type="datetime-local" name="bdaytime"> | ||
2.value | 规定 input 元素的值 | 对于 text，password，hidden：定义输入字段的初始值。 | 1.对于不同的输入类型，value 属性的用法也不同。 2. value 属性无法与 <input type="file"> 一同使用。 | 无 |
对于 button，submit，reset：定义按钮上的显示的文本。 | 无 | 无 | ||
对于 radio，checkbox，image：定义和按钮相关联的文本。 | 无 | 无 | ||
3.name | 定义 input 元素的名称 | 文本 | 1. 作用： a. 用于对提交到服务器后的表单数据进行标识。 b. 在客户端通过 JavaScript 引用表单数据。 2. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 | 无 |
4.size | 定义输入字段的宽度 | 对于 text，password：定义的是可见的 字符数。 | 1. 由于 size 属性是一个 可视化的设计属性，我们推荐您使用 CSS 来代替它。 | 无 |
| 对于其他类型： 定义的是以 像素 为单位的输入 字段宽度。 | 无 | 无 | ||
5.maxlength | 规定输入字段中的 字符的最大数 | 数字 | 无 | 1. maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。 |
6.readonly | 规定输入字段为只读 | "readonly” | 1. readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。 2. readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。 | <input readonly="readonly"> |
7.disabled | 当 input 元素加载时禁用此元素 | "disabled" | 1. 被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。 2. disabled 属性 无法 与 <input type="hidden"> 一起使用。 | <input disabled="disabled"> |
8.checked | 规定此 input 元素首次加载时应当被选中 | "checked" | 1. checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。 2. checked 属性 与 <input type="radio"> 或 <input type="checkbox"> 配合使用。 | <input checked="checked"> |
9.src | 定义以提交按钮形式显示的图像的 URL | URL | 1. src 属性只能与 <input type="image"> 配合使用。 | 无 |
10.alt | 定义图像输入的替代文本 | 文本 | 1. alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。 | 无 |
11.accept | 规定通过文件上传来提交的文件的类型。 | MIME_type：image/gif，image/jpeg 等等。如果不限制图像的格式，可以写为： accept="image/*"。 | 1. 请避免使用该属性。应该在服务器端验证文件上传。2. accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。 | <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> |
H5新增 input 标签 属性：
| 属性 | 作用 | 属性值 | 说明 | 示例 |
|---|---|---|---|---|
1.autocomplete | 规定是否使用输入字段的自动完成功能。也可以在 form 中统一配置 | on（默认开启），off | 无 | <input type="email" name="email" autocomplete="off" /> |
2.autofocus | 规定输入字段在页面加载时是否获得焦点 | "autofocus" | 1. 不适用于 type="hidden"。 | <input type="text" name="fname" autofocus="autofocus" /> |
3.list | 引用包含输入字段的预定义选项的 <datalist> | <datalist> 的 id | 1. 见上面的 <datalist> 标签。 | 无 |
4.placeholder | 填写输入字段的默认提示 | 文本 | 1. 该提示会在输入字段为空时显示，并会在字段获得焦点时消失。 | <input type="search" name="user_search" placeholder="Search W3School" /> |
5.required | 指示输入字段的值是必需的 | "required" | 无 | <input type="text" name="usr_name" required="required" /> |
6.step | 数字输入控件，并设置间隔 | number | 1. step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。 2. step，max 和 min 属性适用于以下 input 类型：number，range，date，datetime，datetime-local，month，time，week。 | <input type="number" name="points" step="3" /> |
7.min | 规定输入数字，日期 等的最小值 | number 或 date | 1. min 属性与 max 属性配合使用，可创建合法值范围。 | <input type="number" name="points" min="0" max="10" /> |
8.max | 规定输入数字，日期 等的最大值 | |||
9.multiple | 如果使用该属性，则允许 file 和 email 一个以上的值 | "multiple" | 1. multiple 属性使用与以下 input 类型：email 和 file。 | <input type="file" name="img" multiple="multiple" /> |
10.pattern | 字段的值的 正则表达式 格式化 | 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 | 1. pattern 属性适用于以下 input 类型： text, search, url, telephone, email, password 。 2. 请使用标准的 "title" 属性来描述模式。 | <input type="text" name="country_code" pattern="[A-z]{3}" title="三个字母的国家代码" /> |
11.height | 定义 type="image" 的高度 | 以像素计 或 百分比 | 1. height 属性只适用于 <input type="image">，它规定 image input 的高度。 | <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/> |
12.width | 定义 type="image" 的宽度 | 以像素计 或 百分比 | ||
13.form | 规定输入字段所属的一个或多个表单 | form 属性的值必须是其所属表单的 id。 | <input type="text" name="lname" form="idform1,idform2" /> | |
14.formaction | 覆盖表单的 action 属性 | URL | 1. 适用于提交按钮： type="submit" 和 type="image" 2. 它会覆盖 form 中的 action 属性。 | <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> |
15.formmethod | 覆盖表单的 method 属性 | get，post | 1. 适用于提交按钮： type="submit" 和 type="image" 2. 它会覆盖 form 中的 method属性。 | <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" /> |
16.formtarget | 覆盖表单的 target 属性 | 常用的值： _self：默认，相同的框架中 _top：在整个窗口中 _blank：新窗口中 _parent：父框架集中 framename：指定的框架中 | 1. 适用于提交按钮： type="submit" 和 type="image" | 无 |
17.formenctype | 覆盖表单的 enctype 属性 | 属性值见上面 form 中的 enctype 属性 | 1. 适用于提交按钮： type="submit" 和 type="image" 2. 它会覆盖 form 中的 enctype 属性。 | <input type="submit" formenctype="multipart/form-data" value="Submit" /> |
18.formnovalidate | 规定是否执行验证。会覆盖表单的 novalidate 属性 | "formnovalidate" | 1. 适用于以下类型的 input： text，search，url，telephone，email，password，date pickers，range，color。 2. 它会 部分 或 全部 覆盖 form 中的 全局 novalidate 属性。3. 使用该属性，则提交表单时，该项 或 全部不会执行验证过程。 | 验证按钮：<input type="submit" value="Submit" />不验证按钮： <input type="submit" formnovalidate="formnovalidate" value="Submit" /> |
7.9.2 正则表达式的研究（待补充）
涉及到 input 的
pattern属性值 设置。
7.9.3 rsa 加解密的研究（待补充）
涉及到 表单类标签
<keygen>的 使用。
7.10 对象嵌入 标签（3个）
对象嵌入 标签包括：
普通 对象嵌入 标签 2个：
<object>，<param />H5 新增 对象嵌入 标签 1个：
<embed />
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<object> | 定义嵌入的对象，向 HTML 页面添加多媒体 | 所有主流浏览器 部分 支持。 | 这里 图片 使用 <img>，音视频 用 H5 的音视频标签，其他资源使用 <embed />代替。对于 object 标签不做深入了解。 | <object height="400" width="800" data="/i/horse.mp3"></object> | 1. <object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。2. 浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。 而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。 |
<param /> | 定义 <object> 对象的相关参数 | All | 略 | 无 | 无 |
H5 新增：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<embed /> | 为外部应用程序（非 HTML）定义容器。比如插件 | 1. src：嵌入内容的 URL。2. type：定义嵌入内容的类型。属性值为： [MIME 类型]。 3. width：设置嵌入内容的宽度。4. height：设置嵌入内容的高度。 | <embed height="400" width="800" src="song.mp3" /><embed src="/i/helloworld.swf" />或 <embed src="helloworld.swf" type="application/x-shockwave-flash" /> | 1. 用来取代 <object> 标签。 |
7.11 音视频 标签（H5新增，4个）
音视频 标签 包括：
<audio>，<video>，<source />，<track>
H5 新增：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<audio> | 定义声音内容 | IE 8 以及更早的版本不支持 | 1. src：要播放的音频的 URL。2. controls：显示控件。3. autoplay：设置自动播放。4. loop：设置循环播放。5. preload：预加载。如果使用 "autoplay"，则忽略该属性。6. muted：设置播放开始为静音。 | <audio controls muted><source src="/i/horse.ogg" type="audio/ogg"><source src="/i/horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio> | 1. 可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。 |
<video> | 定义视频 | IE 8 以及更早的版本不支持 | 除了 audio 的属性外，还包括： 1. poster：首帧的图片 URL。2. width：设置视频播放器的宽度。3. height：设置视频播放器的高度。 | <video controls muted><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video> | 无 |
<source /> | 定义媒介源。 规定 可替换的视频/音频文件，供浏览器根据它对 媒体类型 或者 编解码器 的支持进行选择。 | IE 8 以及更早的版本不支持 | 1. src：规定媒体文件的 URL。2. type：规定媒体资源的 MIME 类型。属性值包括： audio： audio/oggaudio/mpegvideo： video/oggvideo/mp4 | 无 | 1. <source /> 的作用是提供 可替换 的视频/音频文件。 |
<track> | 定义视频文本轨道 | 主流浏览器都暂不支持 | 无 | 无 | 无 |
7.12 框架 标签（4个）
框架 标签 包括：
<frameset>，<frame>，<noframes>，<iframe>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<frameset> | 定义框架集 | 1. cols：框架集中列的数目 或 每列所占百分比 (用逗号隔开)。2. rows：框架集中行的数目 或 每行所占百分比 (用逗号隔开)。 | 无 | 1. 不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！ | |
<frame> | 定义 框架集 的窗口 | 1. src：规定在框架中显示的文档的 URL。2. name：规定框架的名称。name 可以作为链接的 target 属性的 值。3. scrolling：框架中显示滚动条。属性值 auto，yes, no。4. frameborder：规定是否显示框架周围的边框。属性值 0，1。5. marginwidth：定义 框架内容 与 框架左右边框 的距离。6. marginheight：定义 框架内容 与 框架上下边框 的距离。7. noresize：规定无法调整框架的大小。属性值 "noresize"。 | 无 | 无 | |
<noframes> | 定义针对不支持框架的用户的替代内容 | 无 | 无 | 无 | |
<iframe> | 定义内联框架 | 1. src：规定在 iframe 中显示的文档的 URL。2. name：规定 iframe 的名称。name 可以作为链接的 target 属性的 值。3. scrolling：框架中显示滚动条。属性值 auto，yes, no。4. frameborder：规定是否显示框架周围的边框。属性值 0，1。5. marginwidth：定义 框架内容 与 框架左右边框 的距离。6. marginheight：定义 框架内容 与 框架上下边框 的距离。7. width：定义 iframe 的宽度。8. height：定义 iframe 的高度。H5新属性：9. srcdoc：书写在 iframe 中的 HTML 内容，会显示出来。IE 不支持。10. seamless：它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）。IE，Firefox 不支持。11. sandbox：启用一系列对 <iframe> 中内容的额外限制。属性值： 多个用空格间隔 a. ""：应用以下所有的限制，除非指定解除限制。b. allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源。c. allow-top-navigation：允许 iframe 内容从包含文档导航（加载）内容。d. allow-forms：允许表单提交。e. allow-scripts：允许脚本执行。 | 无 | 1. 可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。 |
7.12.1 frame 与 iframe 的区别
frame 不能脱离 frameset 单独使用。iframe 可以脱离，也可以嵌套。
frame 不能放在 body 中。嵌套了的 iframe 必须放在 body中。
单独使用的 iframe 可以随意放置。
frame 的高度只能通过 frameset 控制。iframe 可以自己控制，不能通过frameset 控制。
小结：
frame 是整个页面的框架，iframe 是内嵌的网页元素，更加灵活。
7.13 格式 标签（33个）
格式 标签 包括：
普通 格式 标签 11个：
<abbr>，<acronym>，<address>，<blockquote>，<q>，<del>，<ins>，<sup>，<sub>，<pre>，<bdo>H5 新增 格式 标签 9个：
<mark>，<meter>，<progress>，<wbr>，<bdi>，<ruby>，<rt>，<rp>，<time>语义化短语 格式标签 8个：
<em>，<strong>，<code>，<var>，<kbd>，<cite>，<dfn>，<samp>字体样式 格式 标签 5个：
<b>，<i>，<big>，<small>，<tt>
普通：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<abbr> | 定义缩写 | All | 1. title：定义缩写的完整全称提示信息。 | The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949. | 无 |
<acronym> | 定义缩写 | All | 无 | 无 | 1. H5 不支持，请使用 <abbr> 标签代替。 |
<address> | 定义 文档 或 文章的作者 的联系信息 | All | 无 | <address>Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address> | 1. 文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。 2. <address> 元素通常连同其他信息被包含在 <footer> 元素中。 |
<blockquote> | 定义长的引用 | All | 无 | 无 | 1. 所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。 |
<q> | 定义短的引用 | All | 无 | 无 | 1. <q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。 |
<del> | 被删除文本 | All | 无 | 无 | 1. 文本会显示 中划线。 2. 请与 <ins> 标签配合使用，来描述文档中的 修正 和 更新。 |
<ins> | 插入文本 | All | 无 | 无 | 1. 文本会显示 下划线。 |
<sup> | 上标文本 | All | 无 | 无 | 无 |
<sub> | 下标文本 | All | 无 | 无 | 无 |
<pre> | 定义预格式化的文本 | All | 无 | 无 | 1. 文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 |
<bdo> | 覆盖默认的文本方向 | All | 1. dir：规定 bdi 元素内的文本的文本方向。属性值有： ltr（左至右）rtl（右至左） | 无 | 无 |
H5 新增：
| 标签 | 作用 | 浏览器兼容性 | 属性 | 示例 | 说明 |
|---|---|---|---|---|---|
<mark> | 有记号的文本 | IE 8 以及更早的版本不支持 | 无 | 无 | 1. 文本显示为黄色背景。 |
<meter> | 指定范围内的度量的 图形化 | IE 暂不支持 | 无 | <meter value="3" min="0" max="10">3/10</meter><meter value="0.6">60%</meter> | 1. 当不支持 meter 标签时，会显示里面的文本。 |
<progress> | 任务进度的 图形化 | IE9 以及更早的版本不支持 | 1. value：已经完成多少任务。2. max：一共需要多少工作。 | <progress value="22" max="100"></progress> | 1. 如果不添加属性，则默认的样式是来回抖动效果。 2. <progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替。 |
<wbr> | 被 wbr 包括的文字 或 单词，在换行的时候不会被中断。 | IE 不支持 | 无 | 无 | 1. 联想，区别于 <textarea> 中的 H5 新属性 wbr（是在表单 提交 时，指定文本区域中的文本如何换行） |
<bdi> | 设置一段文本，使其脱离其父元素。另外可以设置文本方向 | 只有 Firefox 和 Chrome 支持 | 1. dir：规定 bdi 元素内的文本的文本方向。属性值有： a. auto（默认）b. ltr（左至右）c. rtl（右至左） | 无 | 无 |
<ruby> | 定义 ruby 注释。 | 无 | 无 | <ruby> 漢 <rt> ㄏㄢˋ </rt></ruby> | 无 |
<rt> | 定义 ruby 注释的 解释，会显示在注释的 上方。 | 无 | 无 | 无 | 无 |
<rp> | 定义若浏览器不支持 ruby 元素显示的内容。 | 无 | 无 | 无 | 无 |
<time> | 定义日期/时间 | 所有主流浏览器暂不支持 | 无 | <p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p> | 1. <time> 标签不会在任何浏览器中呈现任何特殊效果。 |
语义化短语 格式标签：
| 短语元素 | 定义 | 显示效果 |
|---|---|---|
<em> | 把文本定义为 强调 的内容 | 斜体 |
<strong> | 把文本定义为语气 更强的强调 的内容 | 粗体 |
<code> | 定义 计算机代码 文本 | 等宽字体 |
<var> | 定义 变量 。您可以将此标签与 <pre> 及 <code> 标签配合使用 | 斜体 |
<kbd> | 定义 键盘文本 | 等宽字体 |
<cite> | 定义 引用 | 斜体 |
<dfn> | 标记那些对 特殊术语 或 短语 的定义 | 斜体 |
<samp> | 定义 样本文本 | 正常显示 |
字体样式 格式 标签：
| 字体样式元素 | 显示效果 |
|---|---|
<b> | 粗体 |
<i> | 斜体 |
<big> | 大号 |
<small> | 小号 |
<tt> | 等宽 |
8. 响应式 Web 设计
响应式 Web 设计：RWD，Responsive Web Design。
特点：能够以可变尺寸传递网页。对于 平板 和 移动设备 是必需的。
8.1 移动端开发中关于 像素 的各种专有名词
| 名词 | 介绍 |
|---|---|
像素 | 又称画素，是图像显示的基本单位。译自英文 pixel（ pix 是英语单词图像 picture 的常用简写，加上英语单词 元素 element，就得到 pixel。故 "像素" 表示 "图像元素" 之意），有时亦被称为 pel ( picture element )。 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。 |
设备像素 | 又称为 物理像素。指 设备 能控制显示的 最小物理单位，意指显示器上一个个的点，从屏幕在工厂生产出的那天起，它上面设备像素点就 固定不变 了。一个设备像素点就是，1pt，单位为 pt。当 DPR = 1 时，1px = 1pt。每一个 css 声明 和 几乎所有的 javascript 属性都使用 css像素，因此实际上从来用不上 设备像素 。唯一的例外是 js 中的属性 window.screen.width / height：获取的是 设备像素，即设备的 分辨率。 |
设备独立像素 | DIP，device independent pixel，也叫 密度无关像素 或 逻辑像素。是为 web开发者 创造的，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的 虚拟像素，比如 css 像素。这个点是没有固定大小的，越小越清晰，然后由相关系统 转换 为 物理像素。 |
css 像素 | 也叫 虚拟像素，属于 设备独立像素 。指的是 CSS 样式代码中使用的 逻辑像素。在 CSS 规范中，长度单位可以分为两类，绝对单位 (absolute) 以及 相对单位 (relative)。px 是一个 相对单位，相对的是 设备像素。 |
DPR | 设备像素比，也称为 像素缩放比。设备像素比 = 设备像素 / 设备独立像素。js 中对应的属性 window.devicePixelRatio。当 DPR = 1 时（非视网膜屏幕），1 个设备独立像素 等于 1 个 设备像素，简单点理解就是， css 虚拟像素 px 相对于 屏幕的物理像素，是 1 : 1 的关系。桌面端一般 DPR = 1。当 DPR = 2 时（retina 视网膜屏幕），1 个设备独立像素 等于 2 个 设备像素，简单点理解就是， 1个 css 虚拟像素 1px 要用 屏幕的两个物理像素 来显示，是 1 : 2 的关系。UI 设计师按照手机 物理像素 出设计稿，切图时是根据其 设备像素比 来换算设备独立像素（就是给到我们手上的的 CSS像素）。比如 视网膜手机 iPhone6，物理像素 750px×1334px，由于其 设备像素比 DPR 为2，CSS切图时需要将设计稿的所有尺寸除以 2，才是正确 CSS像素值。手机端，由于屏幕尺寸限制，一般 DPR = 2。 |
retina 视网膜屏幕 | 之所以叫做视网膜屏幕，如果在相同尺寸的屏幕，CSS像素大小设计不变 的情况下，PPI / DPI (屏幕像素密度) 太高的话，人的视网膜会无法分辨出屏幕上的像素点，显示的画面会很小，这个时候就必须使用 2个物理像素 来表示 1个 CSS 像素 来进行 放大，即 DPR = 2，以让显示效果到达最佳。故 DPR 也可以称为 像素缩放比。视网膜屏幕（DPR 高）的好处：当你仔细看屏幕的时候，颗粒感会越小，显示越细腻。屏幕像素密度 PPI / DPI 也是同样的道理。目前 视网膜屏幕 已经是 旗舰手机 的标配了，不只是苹果一家。未来 90 HZ 刷新率 也会普及。 |
分辨率 | 是指 宽度 上和 高度 上最多能显示的 物理像素点 的个数。电影常识拓展： P 是 Progressive，代表逐行扫描，画面是从左到右一行一行扫描出来的。 一般情况下，1 个 24位 bmp 原彩图中， 1个像素等于3个字节（B），但是电影中的一帧画面不一定是 bmp 原彩图，大小尚不确定。电影中的分辨率： 192×144（即 144P，一帧大约 3 万 像素） 320×240（即 240P，一帧大约 8 万 像素） 480×360（即 360P，一帧大约 17 万 像素） 640×480（即 480P， 标清，一帧大约 30 万 像素）1280×720（即 720P， 高清，一帧大约 92 万 像素）1920×1080（即 1080P， 全高清，一帧大约 210万 像素）2560×1440（即 2k， 超高清，一帧大约 370 万 像素））3840×2160（即 4k， 接近蓝光原盘，一帧大约 830 万像素） |
PPI | Pixels Per Inch，用于电脑手机领域，屏幕像素密度，指的是屏幕 1英寸所拥有的 设备像素 的数目，单位为 ppi。屏幕尺寸 和 点距 决定了 PPI 的大小，而 PPI 的大小 决定了 分辨率 的高低。 |
DPI | dots per inch，用于印刷领域，指垂直方向 或 水平方向，每英寸单位所包含的 点，单位为 dpi。和 PPI 不同的是，PPI 指的是 像素密度，而 DPI 指的是分辨率，分为 垂直分辨率，和 水平分辨率。 |
屏幕尺寸 | 指的是屏幕对角线的长度。1英寸 = 2.54厘米。 |
点距 | 设备像素 与 设备像素 之间的距离。 |
BPP | 比特每像素，也称为 颜色分辨率，或者 调色板的比特深度，表示图片的每像素占的位数。 |
8.2 移动端开发中的 视口viewport
移动端中常说的 视口：viewport，指的是 浏览器显示 页面内容 的屏幕区域。
移动端和PC端视口的区别：在手机上，布局视口 不会被自动缩放，但是在 PC端 上会（因为 PC 的 布局视口 和 视觉视口 大小是一样的）。
| 视口 | 介绍 |
|---|---|
布局视口 | layout viewport，一般 移动设备 的 浏览器 都默认设置了一个 <meta /> 的 viewport 视口元标签，定义一个虚拟的 布局视口，用于解决早期的 网站页面 在手机上显示的问题。Android，iOS 基本都将这个视口分辨率设置为 960px，所以pc上的网页基本能在手机上呈现，只不过 元素看上去很小，一般默认可以通过 手动缩放 网页。 |
| 视觉视口 | visual viewport，用户正在看到的网站的区域。手动缩放 操作的是 视觉视口，但不会影响 布局视口。 缩放程度 DPR 和 视觉视口的大小是逆相关的：缩放程度越大，显示的css像素越少，视觉视口越小。 一般情况下，视觉视口对于开发人员来说并不是那么重要，到那时如果有，需要 看到用户正在看什么区域 的需求，可以用 js 来获取。 |
理想视口ooooooooo | ideal viewport，理想视口，对设备来讲，是最理想的视口尺寸。默认情况下，移动设备的 默认布局宽度 为 768～1024px，虽然这能让桌面网站不被压扁，但这并不是理想情况，尤其是对于小屏幕的使用者，因为在狭小的屏幕上，更适合狭小的网站。简单的说，就是，布局视口的 默认宽度 并不是一个理想的宽度。1. 显示在 理想视口 中的网站拥有 最理想的宽度，不需要缩放。 2. 但，只有当网站是手机（或者平板）的时候，才应该 使用 理想视口。 |
所以，下面的 视口元标签，就是要告诉浏览器，我要使用理想视口了，让 布局视口 的宽度width 和 理想视口device-width 的宽度一样：
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> meta 标签新增 minimal-ui 属性，让网页在加载时便可 隐藏 顶部的 地址栏 与 底部的 导航栏（IOS）。
8.3 通过 js 获取窗口的属性
待补充。
8.4 响应式设计方案
8.4.1 直接使用 css 浮动等属性，让元素自动适应
这是原始的解决方案，会显得有些麻烦。
8.4.2 使用 Bootstrap
Bootstrap是一款 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
是可以用来开发 响应式 web 的 HTML, CSS, 和 JS 框架，帮助开发在任何尺寸都外观出众的站点，包括显示器、笔记本电脑、平板电脑 或 手机。
用到再总结。
9 H5 相关
9.1 新特性介绍
HTML5拥有新的语义、图形以及多媒体元素。提供的新元素和新的API简化了 web 应用程序的搭建。
新的语义元素。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由
<canvas>和<svg>）强大的多媒体支持（借由
<video>和<audio>）强大的新 API，比如用
本地存储取代 cookie。
9.2 帮助老版本浏览器处理 H5
所有现代浏览器都支持 HTML5。
所有浏览器，不论新旧，都会自动把未识别元素当做
行内元素来处理。2 个处理方法，可以结合起来：
H5 定义了八个新的语义 HTML 元素，所有都是
块级元素。可以把 CSSdisplay属性设置为block，以确保老式浏览器中正确的行为。header, section, footer, aside, nav, main, article, figure { display: block; } 复制代码
IE 8 以及更早的版本，不允许对未知元素添加样式。幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript"，引入 shiv 脚本文件即可。shiv 脚本引入必须位于
<head>标签中，因为 IE 需要在读取之前认识所有新元素。html <head> <title>Styling HTML5</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
9.3 H5 代码约定
命名规则：
使用
小写 标签名，小写 属性名。
id和class的命名，也是小写，多个单词之间的连字符，可以使用 中划线-分隔。使用
小写 文件名。大多数 web 服务器（Apache、Unix）对文件名的大小写敏感。
空格，缩进，注释规则：
属性 等号 "=" 两旁
不要添加空格。请使用
2个空格进行缩进。请勿使用Tab。因为不同的编辑器对 tab 的解释不一定相同。请使用
空行来分隔 大型或逻辑 代码块。短注释应该在
单行中书写，并在<!--之后增加1个空格，在-->之前增加1个空格。长注释，跨越
多行，在<!--和-->里的内容，应缩进 2 个空格，更易观察。
编程习惯和准则：
属性值加 双引号。
关闭所有 HTML 标签，包括
空标签。添加必需的属性。
避免长代码行。
元数据：为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好。
样式表：type 属性不是必需的**。短规则可以压缩为 1 行。 长规则应该分为 多 行。
脚本：type 属性不是必需的。把脚本置于
<body>元素的底部，可改善显示速度，因为 脚本编译 会拖慢显示。
9.4 H5 Canvas，SVG
具体详解见 《Html 详解 - Canvas 详解》 博文。
9.5 H5 媒体
9.5.1 各种媒体格式
9.5.1.1 图片格式
| 格式 | 类型 | 说明 |
|---|---|---|
BMP | 无压缩 像素格式 | 1. 存储在文件中时先有文件头、再图像头、后面就都是像素数据了，上下颠倒存储。 2. 用 windows 自带的 mspaint 工具保存 bmp 格式时，可以发现有四种 bmp 可供选择： a. 1位/单色：一个像素只占一位，要么是0，要么是1，所以只能存储黑白信息。b. 4位/16色 位图：一个像素 4 位（bit），有 16 种颜色可选。c. 8位/256色 位图：一个像素 8 位，有 256 种颜色可选。d. 24位 位图: 一个像素 24 位，颜色可有 2^24 种可选，对于人眼来说完全足够了。这里的 位数 也可以称为 比特每像素，或者 颜色分辨率，或者 调色板的比特深度。3. 计算大小：1 个 5000*5000 的 24位图 原图，所占文件大小为 5000 * 5000 * 3 字节 = 71.5MB。 |
JPEG / JPG | 有损压缩 格式 | 1. Joint Photograhic Experts Group，扩展名为 jpg。 2. 将 像素信息 用 jpeg 保存成文件再读取出来，其中某些像素值会有少许变化。 没有透明效果。在保存时有个质量参数可在[0,100]之间选择，参数越大图片就越保真，但图片的体积也就越大。 一般情况下选择70或80就足够了。 3. JPEG 比较适合用来存储相机拍出来的照片，这类图像用 jpeg 压缩后的体积比较小。 |
PNG | 无损压缩 格式 | 1. 可以有透明效果。 2. png 比较适合 矢量图,几何图。 比用 jpeg 保存体积要小。 3. jpeg, png 文件之于图像，就相当于 zip, rar 格式之于 普通文件 ( 用 zip, rar 格式对 普通文件 进行压缩)。 4. jpeg 比较适合存储 色彩"杂乱" 的拍摄图片，png 比较适合存储 几何特征强 的图形类图片。 |
GIF | 多帧图片 | 1. 上面提到的 bmp，jpeg，png 图片都只有 一帧，而 gif 可以保存 多帧 图像。 2. gif 中有个参数可以控制图片变化的快慢。在程序中可以使用这个参数，也可以自己定义一个参数。 这就是为什么gif图片，在不同程序中查看时其变化速度不一样。 |
webp | google 开发的一种 有损压缩 格式 | 1. 可以有透明效果。 2. 相当于 jpeg 和 png 的 合体，google 声称其可以把图片大小减少40%。 |
9.5.1.2 音频格式
| 格式 | 文件 | 描述 |
|---|---|---|
| MP3 | .mp3，.mpga | MP3 文件实际上是 MPEG 文件 的 声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。 |
| OGG (音视) | .ogg | 它是一种新的 音频压缩格式，类似于 MP3 等现有的音乐格式。但有一点不同的是，它是完全免费、开放 和 没有专利限制 的。OGG Vobis 有一个很出众的特点，就是支持多声道。 |
| MIDI | .mid，.midi | MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
| RealAudio (音视) | .rm，.ram | RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。 |
| Wave | .wav | Wave (waveform) 格式是由 IBM 和 微软 开发的。所有运行 Windows 的计算机 和 所有网络浏览器（除了 Google Chrome）都支持它。 |
| WMA | .wma | WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于 网络电台 或 在线音乐 很实用。 |
使用策略：
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。
Wave 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。
9.5.1.3 视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
| 格式 | 文件 | 描述 |
|---|---|---|
| Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器 和 HTML5 的因特网 共享格式。 |
| WEBM | .webm | 由Google提出，是一个开放、免费的媒体文件格式。 |
| OGG (音视) | .ogg | ogg 可以是 视频 也可以是 音频。ogg 被建议作为音频文件。 |
| Flash | .swf，.flv | Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要 额外的组件 来播放。但是该组件会 预装 到 Firefox 或 IE 之类的浏览器上。 |
| MPEG | .mpg，.mpeg | MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是 跨平台 的，得到了所有最流行的浏览器的支持。 |
| RealVideo (音视) | .rm，.ram | RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是 低带宽 优先的，质量常会降低。 |
| AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但 非 Windows 计算机并不总是能够播放。 |
| WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果 未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。 |
| QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在 没有安装额外的（免费）组件的 Windows 计算机上播放。 |
9.5.2 主流浏览器 对各种 音视频格式 的支持列表
Audio：为了最大程度支持下面提到的浏览器，建议开发者同时使用MP3和Ogg Vorbis/Wave格式。Video：为了最大程度支持下面提到的浏览器，建议同时使用MP4和WebM视频文件作为 source元素。
| 浏览器 | 对 音频 的支持列表 | 对 视频 的支持列表 |
|---|---|---|
Chrome | MP3，Ogg Vorbis，WAV，AAC | MP4，Ogg Theora，WEBM |
IE 9+ | MP3，AAC | MP4 和 WEBM (需要安装插件) |
Safari | MP3，AAC | MP4 |
IOS | MP3，AAC | MP4 |
Android | MP3 ，AAC | MP4 和 WEBM (Android 2.3版本以上) |
Firefox | Ogg Vorbis，WAVE | WEBM，Ogg Theora |
Opera | Ogg Vorbis ，WAVE | WEBM，Ogg Theora |
9.5.3 音视频 最佳解决方案
单独使用
object时，IE和FireFox显示空白，Chrome和Safari正常显示。 嵌套embed时，全部显示正常。
9.5.3.1 音频
下面的例子使用了一个 mp3 文件，这样它在 IE、Chrome 以及 Safari 中是有效的。 为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，代码将回退尝试
<embed>元素。 如果失败，会显示错误消息。
方案一：使用 <audio>，<object> 和 <embed />
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <!-- object 需要Flash支持，当IE8-时考虑 --> <object data="movie.mp3" width="320" height="240"> <!-- embed 需要Flash支持，当IE8-，不支持 object 时考虑 --> <embed src="song.mp3" width="100" height="100" /> </object> </audio> 复制代码
方案二：使用 雅虎媒体播放器：
雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。
使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：
<a href="song.mp3">Play Sound</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 复制代码
9.5.3.2 视频
H5 里的视频 video 标签如果要覆盖 主流的浏览器 的话，至少要包含 mp4、webm 和 ogg 三种视频格式。
方案一：使用 <object> 和 <embed />
<object width="425" height="344"> <param name="movie" value="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf"/> <param name="allowFullScreen" value="true" /> <param name="allowScirptaccess" value="always" /> <embed src="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash" /> </object> 复制代码
方案二：使用 video， <object> 和 <embed />
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogg" type="video/ogg" /> <!-- object 需要Flash支持，当IE8-时考虑 --> <object data="movie.mp4" width="320" height="240"> <!-- embed 需要Flash支持，当IE8-，不支持 object 时考虑 --> <embed src="movie.swf" width="320" height="240" /> </object> </video> 复制代码
方案三：优酷播放器
可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" type="application/x-shockwave-flash" width="480" height="400" /> 复制代码
9.6 H5 拖动
见 H5 拖动事件属性。
9.7 H5 Web 存储，应用缓存，地理定位，Web Workers，SSE
H5
Web 存储，应用缓存，地理定位，Web Workers，SSE这 5 个新特性，涉及到 JS 内容，归纳在 《JavaScript 详解》 博文。
作者：谌中钱
链接：https://juejin.cn/post/7018693042743803935