一、学习内容

1.HTML5新增语义化标签

1.1 section标签

表示页面中的一个内容区块

1.2 header标签

表示整个页面的标题，或者某个区块的标题

1.3 footer标签

表示整个页面的尾部，或者某个区块的尾部

1.4 nav标签

表示页面中的导航链接部分

1.5 article标签

表示一块与上下文无关的独立的内容

1.6 aside标签

在article之外，但与article内容相关的辅助信息

1.7 figure标签

表示一段独立的流内容，可以使用figcaption标签为其添加标题

1.8 main标签

表示页面中的主要内容，IE不兼容

兼容低版本浏览器：

1.9 dialog标签

定义对话框或者窗口

属性open规定 dialog 元素是活动的，用户可与之交互。

1.10 canvas标签

HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成

canvas 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

2. 表单新增内容

2.1 input标签新增内容

<!--拖动条-->
<input type="range" name="" id="" value="20"><br>
<!--选择颜色-->
<input type="color" name="" id=""><br>
<!--选择年月日-->
<input type="date" name="" id=""><br>
<!--选择年月日时分-->
<input type="datetime-local" name="" id=""><br>
<!--邮箱-->
<input type="email" name="" id=""><br>
<!--选择文件-->
<input type="file" name="" id=""><br>
<!--定义图像作为提交按钮-->
<input type="image" src="images/Ak1.png" alt=""><br>
<!--数字-->
<input type="number" name="" id=""><br>
<!--搜索-->
<input type="search" name="" id=""><br>
<!--手机号-->
<input type="tel" name="" id=""><br>
<!--时分-->
<input type="time" name="" id=""><br>
<!--年和第几周-->
<input type="week" name="" id=""><br>
<!--定义用于 URL 的文本字段。-->
<input type="url" name="" id=""><br>
<!--年和第几个月-->
<input type="month" name="" id=""><br>

2.2 表单新增属性

placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得焦点，一个页面只能有一个。
required属性：验证输入不能为空
autocomplete属性：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。属性值：on/off。on可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中显示：
novalidate取消验证可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证partten
Multiple:可以输入一个或多个值，每个值之间用逗号分开例：还可以应用于file
pattern属性pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。显而易见，pattern的属性值要用正则表达式。
output：定义不同类型的输出，如计算结果的输出，或脚本的输出。

注：必须从属于某个表单。即，必须将它书写在表单内部
Datalist ：数据列表

例：

提示：option 元素永远都要设置 value 属性。
list属性：结合datalist元素使用

3. video和audio

video元素 定义视频
<video src="movie.ogg" controls="controls">Video元素</video>

audio元素 定义音频
<audio src="someaduio.wav">Audio元素</audio>

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<video controls>
       <source src="../mv/movie.ogg" type="video/ogg">
       <source src="../mv/web.mp4" type="video/mp4">
</video>

Type属性值： 用于视频：video/ogg   video/mp4     video/webm 用于音频：audio/ogg   audio/mpeg   audio/mp3