| <article> | 定义 HTML 文档的文章区域块 |
| <figure> | 定义 HTML 文档的流体区域块 |
| <figcaption> | 定义 HTML 文档的流标题部块 |

<header>定义 HTML 文档的头部区域块</header>
<section>定义 HTML 文档的区段区域块</section>
<footer>定义 HTML 文档的页脚区域块</footer>
<aside>定义 HTML 文档的侧边区域块</aside>
<nav>定义 HTML 文档的导航区域块</nav>
<article>定义 HTML 文档的文章区域块</article>
<figure>定义 HTML 文档的流体区域块</figure>
<figcaption>定义 HTML 文档的流标题部块</figcaption>

3 个新表单元素

标签	描述
<datalist>	定义选项列表，与 input 元素配合使用，来定义 input 可能的值
<keygen>	规定用于表单的密钥对生成器字段
<output>	定义不同类型的输出，比如脚本的输出

6 个新媒体元素

标签	描述
<canvas>	定义画布，用于绘制图表或图像，主要基于 JavaScript 的绘图 API
<audio>	定义音频内容
<video>	定义视频内容
<source>	定义多媒体资源，配合 audio 或 video 使用
<embed>	定义嵌入的内容，比如插件
<track>	为 video 和 audio 元素之类的媒介规定外部文件轨道

6 个文本修饰

标签	描述
<bdi>	允许设置一段文本，使其脱离父元素的文本方向设置
<mark>	定义带有记号的文本
<ruby>	定义中文注音
<rt>	定义中文注音的解释或发音部分
<rp>	定义中文注音的显示内容部分
<time>	定义日期或时间

7 个特殊元素

标签	描述
<command>	定义命令按钮，比如单选按钮、复选框或普通按钮
<details>	用于描述文档或文档某个部分的细节
<summary>	定义描述文档的标题，配合 details 组合使用
<dialog>	定义对话框，比如提示框
<meter>	定义度量单位，仅用于已知最大和最小值的度量
<progress>	定义任何类型的任务进度条
<wbr>	规定在文本中的何处适合添加换行符

HTML 5 表单元素

HTML 5 Datalist 元素

用来为 input 元素提供"自动完成"的特性，用户能看到一个下拉列表，里面的选项用作用户输入数据时进行筛选操作

<input type="text" list="datalist" />
<datalist id="datalist"><option value="苹果">苹果</option><option value="橘子">橘子</option><option value="香蕉">香蕉</option><option value="菠萝">菠萝</option><option value="西瓜">西瓜</option>
</datalist>

HTML 5 Keygen 元素

用于表单提交时，私钥存储在本地，公钥发送到服务器

• name 属性：定义密钥的名称，在表单提交时搜集字段的值
• keytype 属性：定义密钥的安全算法
• • rsa - 规定 RSA 安全算法，RSA 密钥强度可有用户选择，默认
• • dsa - 规定 DSA 安全算法，DSA 密钥长度可由用户选择
• • ec - 规定 EC 安全算法，EC 密钥强度可由用户选择
• autofocus 属性：使密钥元素在也买你加载时获得焦点
• challenge 属性：设置密钥的值设置为在提交时是否询问
• disabled 属性：设置密钥元素是否被禁用
• form 属性：定义密钥元素所属的一个或多个表单

HTML 5 Output 元素

• name 属性：定义对象的唯一名称，表单提交时，通过 name 得到对应的值
• form 属性：定义输入字段所属的一个或多个表单
• for 属性，描述计算中使用的元素与计算结果之间的关系

<form oninput="num_x.value = parseInt(num_a.value) + parseInt(num_b.value)"><input type="text" name="num_a" id="num_a" value="0" /> +<input type="text" name="num_b" id="num_b" value="0" /> = <output name="num_x" for="num_a num_b"></output>
</form>

HTML 5 媒体元素

HTML 5 Audio 元素

HTML 5 提供了播放音频文件的标准，通过使用 HTML 5 中的 audio 功能，可以实现音频回放、跳转、缓冲等功能

支持音频格式：mp3、wav、ogg，通常通过后台处理非 mp3 音频转换为 mp3 格式，方便设备兼容

• src 属性：规定音频文件的 URL 地址
• autoplay 属性：规定音频控件是否自动播放音频
• controls 属性：规定音频控件是否展示应用按钮（播放/暂停按钮）
• loop 属性：规定音频控件是否循环播放音频
• muted 属性：规定音频控件是否开启静音模式
• preload 属性：规定网页加载时，是否被默认加载或如何被加载
• • auto - 当也买你加载后载入整个音频
• • meta - 当也买你加载后只载入元数据
• • none - 当页面加载后不载入音频

<audio controls><source src="./asset/horse.ogg" ><source src="./asset/horse.mp3" >您的浏览器不支持 audio 元素。
</audio>

HTML 5 Video 元素

HTML 5 提供了播放视频的标准，通过使用 HTML 5 中的 video 功能，可以实现视频回放、跳转、缓冲等功能

支持视频格式：mp4、webm、ogg，通常通过后台处理非 mp4 视频转换为 mp4 格式，方便设备兼容

• src 属性：要播放的视频的 URL 地址
• width 属性：设置视频播放器的宽度
• height 属性：设置视频播放器的高度
• autoplay 属性：规定视频控件是否自动播放音频
• controls 属性：规定视频控件是否展示应用按钮（播放/暂停按钮）
• loop 属性：规定视频控件是否循环播放音频
• muted 属性：规定视频控件是否开启静音模式
• poster 属性：规定视频正在下载时显示的图像，直到用户点击播放按钮
• preload 属性：规定网页加载时，是否被默认加载或如何被加载
• • auto - 指示一旦页面加载，则开始加载视频
• • metadata - 指示当页面加载后仅加载视频的元数据
• • none - 指示页面加载后不应加载视频

<video width="320" height="240" controls><source src="./asset/movie.mp4" type="video/mp4"><source src="./asset/movie.ogg" type="video/ogg">您的浏览器不支持 video 标签。
</video>

HTML 5 Source 元素

• src 属性：规定媒体文件的 URL
• type 属性：规定媒体资源的 MIME 类型
• • 视频取值 - video/ogg、video/mp4、video/webm
• • 音频取值 - audio/ogg、audio/mpeg
• media 属性：规定媒体资源的类型，供浏览器决定是否下载

HTML 5 Track 元素

• src 属性：规定轨道文件的 URL，必须
• default 属性：如果用户没有选择任何轨道，使用默认轨道
• kind 属性：规定文本轨道的文本类型
• • captions - 该轨道定义将在播放器中显示的简短说明
• • chapters - 该轨道定义章节，用于导航媒介资源
• • descriptions - 该轨道定义描述，用于通过音频描述媒介的内容，加入内容不可播放或不可见
• • metadata - 该轨道定义脚本使用的内容
• • subtitles - 该轨道定义字幕，用于在视频中显示字幕
• label 属性：规定文本轨道的标签和标题
• srclang 属性：规定轨道文本数据的语言

HTML 5 SVG 元素

• SVG 指可伸缩的矢量图形（Scalabel Vector Graphics）
• SVG 用于定义网络的基于矢量的图形
• SVG 使用 XML 格式定义图形（HTML 也是类似与 XML 格式）
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准
• SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 优势

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

HTML 5 CANVAS 元素

HTML 5 canvas 元素用于图形的绘制，通过脚本（通常是 JavaScript）来完成的，canvas 标签只是图形容器，必须使用脚本来绘制图形

canvas 与 svg 的比较

canvas 元素	svg 元素
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

HTML 5 文本修饰

HTML 5 Bdi 元素

允许设置一段文本，使其脱离其父元素的方向设置，在发布用于评论或其他无法完成控制的内容时，该标签很有用

HTML 5 Mark 元素

定义带有记号的文本，在需要突出显示文本时使用该标签

HTML 5 汉字拼音

通过组合 ruby-rt-rp 使用给对应信息上面加注释，常用于中文拼英标注

<ruby>汉 <rp>(</rp><rt>Han</rt><rp>)</rp>字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

HTML 5 Time 元素

用来定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的，能够以机器可读的方式对日期和时间进行编码

• pubdata 属性：指示元素中的日期 / 时间是文档的发布日期
• datetime 属性：规定日期/时间

HTML 5 特殊元素

HTML 5 Command 元素

• type 属性：定义元素的类型，默认是 “command”
• • checkbox - 使用复选框规定可切换的命令
• • command - 规定带有 action 的普通命令，默认
• • radio - 使用单选按钮规定可切换的命令
• checked 属性：规定当页面加载时，是否被选中，仅用于 radio 或 checkbox 类型
• disabled 属性：规定是否被禁用
• icon 属性：规定显示的图像的 URL
• label 属性：规定名字，对用户可见
• radiogroup 属性：规定可进行切换且将被切换的所属组名，仅在类型为 radio 时使用

HTML 5 Dialog 元素

• open 属性：规定元素是有效的，用户可以与它进行交互

<table border="1"><tr><th>一月 <dialog open>这是一个打开的对话框窗口</dialog></th><th>二月</th><th>三月</th></tr><tr><td>31</td><td>28</td><td>31</td></tr>
</table>

HTML 5 Details 元素

用来供用户开启关闭的交互式控件，任何形式的内容都能被放在标签里，常与 summany 标签配合使用定义标题，用户点击标题显示内容

• open 属性，设置 details 是否可见

<details><summary>点击查看水果列单</summary><ul><li>苹果</li><li>香蕉</li><li>橘子</li></ul>
</details>

HTML5 Progress 元素

• max 属性：规定需要完成的值
• value 属性：规定进程的当前值

<progress value="22" max="100"></progress>

提示：请与 JavaScript 一起使用来显示任务的进度，不适合用来度量衡

HTML 5 Meter 元素

• max 属性：规定范围的最大值
• min 属性：规定范围的最小值
• value 属性： 规定度量的当前值，必须
• high 属性：规定被界定为高的值的范围
• low 属性：规定被接定为低的值的范围
• form 属性：规定所属一个或多个表单
• optimum 属性：规定度量的最优值

<meter value="2" min="0" max="10"></meter>

HTML 5 Embed 元素

• src 属性：规定被嵌入内容的 URL
• type 属性： 规定嵌入内容的 MIME 类型
• width 属性：规定嵌入内容的宽度
• height 属性：规定嵌入内容的高度

HTML 5 Wbr 元素

如果单词太长，或者担心浏览器会在错误的位置换行，那么就需要使用 wbr 元素来进行换行操作

<p>学习 canvas 元素，必须熟悉 <wbr />JavaScript<wbr />基本用法</p>

HTML 5 新属性

全局属性

属性	描述
contenteditable	规定是否可编辑元素的内容
contextmenu	指定一个元素的上下文菜单，当用户右击该元素，出现上下文菜单（仅火狐浏览器支持）
date-*	用于存储页面的自定义数据
draggabl	指定某个元素是否可以拖动，需要配合 JavaScript 一起使用才能达到拖动效果
dropzone	指定是否将数据复制，移动，或链接，或删除（暂无浏览器支持）
hidden	规定对元素是否进行隐藏
spellcheck	检测元素是否拼写错误
translate	指定是否一个元素的值在页面载入时是否需要翻译（暂无浏览器支持）

<p contenteditable="true">这段落文字是可编辑的</p>
<ul><li data-name="苹果">苹果</li><li data-name="橘子">橘子</li> <li data-name="香蕉">香蕉</li> 
</ul>
<p hidden>这是一段隐藏的段落</p>
<p contenteditable="true" spellcheck="true">这是可编辑的段落，请试着编辑文本</p>

html 新属性

• mainfest 属性：定义一个 URL，在这个 URL 上描述了文档的缓存信息

meta 新属性

• charset 属性：定义文档的字符编码，通常使用 utf-8 格式

style 新属性

• scoped 属性：如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素

link 新属性

• size 属性：定义了链接属性大小，只对属性 rel=“icon” 起作用

script 新属性

• async 属性：规定异步执行脚本（仅适用于外部脚本）

object 新属性

• form 属性：规定对象所属的一个或多个表单

form 新属性

• autocomplete 属性：规定是否启用表单的自动完成功能
• • on - 规定启用自动完成功能，浏览器会基于用户之前键入的值自动完成值，默认
• • off - 规定禁用自动完成功能，用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入
• novalidate 属性：如果使用该属性，则提交表单时不进行验证

form action="https://www.baidu.com/s" method="GET" autocomplete="on" novalidate><input type="text" name="wd" /><input type="submit" value="百度一下" />
</form>

input 新属性

• autocomplete 属性：规定 input 元素输入字段是否应该启用自动完成功能，类似于 form 的 autocomplete 属性
• autofocus 属性：规定当页面加载时 input 元素应该自动获得焦点
• form 属性：规定 input 元素所属的一个或多个表单
• formaction 属性：类似于 form 的 action 属性（只针对 type=“submit” 和 type=“image” 控件）
• formenctype 属性：类似于 form 的 enctype 属性（只针对 type=“submit” 和 type=“image” 控件）
• formmethod 属性：类似于 form 的 method 属性（只针对 type=“submit” 和 type=“image” 控件）
• formnovalidate 属性：类似于 form 的 novalidate 属性（只针对 type=“submit” 和 type=“image” 控件）
• formtarget 属性：类似于 form 的 target 属性（只针对 type=“submit” 和 type=“image” 控件）
• list 属性：引用 datalist 元素时，包含 input 元素的预定义选项，效果参考 datalist 元素
• width 属性：规定 input 的宽度（只针对type=“image”）
• height 属性：规定 input 的高度（只针对type=“image”）
• max 属性：规定 input 元素的最大值
• min 属性：规定 input 元素的最小值
• multiple 属性：规定允许用户输入到 input 元素的多个值
• pattern 属性：规定用于验证 input 元素的值的正则表达式
• required 属性：规定必需在提交表单之前填写输入字段
• step 属性：规定 input 元素的合法数字间隔

<form autocomplete="off">账号：<input type="text" name="username" autocomplete="off" autofocus  /><br />密码：<input type="password" name="userpass" autocomplete="off" pattern="[0-9]{6}" /><br />数字：<input type="text" name="lucknum" min="1" max="9" required step="3" />相册：<input type="file" name="userphons" multiple /><br /><input type="image" src="./images/img_submit.gif" alt="submit" width="48" height="48" />
</form>

textarea 新属性

• autofocus 属性：规定当前页面加载时，文本区域自动获得焦点
• form 属性：定义文本区域所属的一个或多个表单
• maxlength 属性：规定文本区域允许的最大字符数
• required 属性：规定文本区域是必需的/必填的
• wrap 属性：定当提交表单时，文本区域中的文本应该怎样换行
• • soft - 在表单提交时，textarea 中的文本不换行，默认
• • hard - 在表单提交时，textarea 中的文本换行（包含换行符），必须指定 cols 属性

<textarea name="usertext" autofocus required cols="30" rows="2" wrap="hard" maxlength="50"></textarea>

select 新属

• autofocus 属性：规定在页面加载时下拉列表自动获得焦点
• form 属性：定义下拉框所属的一个或多个表单
• required 属性：规定文本区域是必需的/必填的

文章类型：<select name="type" autofocus required><option value="" selected>请选择</option><option value="军事">军事</option><option value="民生">民生</option><option value="科技">科技</option><option value="经济">经济</option></select>

button 新属性

• autofocus 属性：规定在页面加载时按钮自动获得焦点
• form 属性：定义按钮所属的一个或多个表单
• formaction 属性：类似于 form 的 action 属性（只针对 type=“submit” 控件）
• formenctype 属性：类似于 form 的 enctype 属性（只针对 type=“submit” 控件）
• formmethod 属性：类似于 form 的 method 属性（只针对 type=“submit” 控件）
• formnovalidate 属性：类似于 form 的 novalidate 属性（只针对 type=“submit” 控件）
• formtarget 属性：类似于 form 的 target 属性（只针对 type=“submit” 控件）

label 新属性

• form 属性：定义标注所属的一个或多个表单

fieldset 新属性

• name 属性： 规定 fieldset 的名称
• form 属性：规定 fieldset 所属的一个或多个表单
• disabled 属性：规定该组中的相关表单元素应该被禁用

ol 新属性

• reversed 属性：指定列表倒序(9,8,7…)

<ol type="1" reversed><li>苹果</li><li>橘子</li><li>香蕉</li>
</ol>

menu 新属性（暂无浏览器支持）

• label 属性：描述菜单项的标记
• type 属性：描述显示菜单类型. 默认为 “list”
• • context - 规定一个上下文菜单，菜单必须在用户与命令进行交互之前被激活
• • list - 规定一个列表菜单。一个用户可执行或激活的命令列表（li 元素），默认
• • toolbar - 规定一个工具栏菜单。主动式命令，允许用户立即与命令进行交互

a 新属性

• download 属性：指定下载链接
• media 属性：定目标 URL 的媒介类型，默认值：all。仅在 href 属性存在时使用
• type 属性：规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用

<p>点击 runoob.com 图片 logo 下载图片:<p>
<a href="./images/logo.png" download="./images/logo.png"><img src="./images/logo.png" alt="logo" >
</a>

img 新属性

• crossorigin 属性：设置图像的跨域属性

area 新属性

• hrefflang 属性：规定目标 URL 的语言
• media 属性：规定目标 URL 是为何种媒介/设备优化的，默认：all
• rel 属性：规定当前文档与目标 URL 之间的关系
• type 属性：规定目标 URL 的 MIME 类型

iframe 新属性

• sandbox 属性：对 iframe 的内容定义一系列额外的限制
• seamless 属性：规定 iframe 看起来像是父文档中的一部分
• srcdoc 属性：规定页面中的 HTML 内容显示在 iframe 中

HTML 5 总结归纳

学后总结

涉及到样式部分的放在 CSS 那块讲解，涉及到脚本部分的放在 JavaScript 学后单独整理，针对 HTML 5 中的存储、通讯等相关功能只能单独整理。HTML 的学习不要死记硬背，把 HTML 标签含义有所了解即可，能够知道通用的全局属性，以及部分标签独有特殊属性即可，在实际开发中，涉及到标签独有属性可以通过查询 HTML 文档手册即可，单单学完 HTML 还不能实现网站的基本形状，还需要通过 学习 CSS 基本样式表，搭配组合开发，才能做好静态网页…