H5新增标签

新增表单标签

之前的表单标签：input（text）、input（password）、input（radio）、input（checkbox）、input（button）、select、textarea、button、form。
H5新增了很多功能性的表单标签。

邮箱输入框

提供了邮箱格式的验证，只有邮箱格式正确才可以提交数据，以后可以通过js来验证。
语法：

<input type="email">

数字输入框

只能输入数字
语法：

<input type="number">

网址输入框

对网络地址进行验证，输入的地址必须是以http或者https开头的完整网络地址。
语法：

<input type="url">

搜索输入框

提供了输入文本可以清空内容的控件。
语法：

<input type="search">

选取范围

语法：

<input type="range">

选择颜色

语法：

<input type="color">

文件上传

可以上传文件，默认只能上传一个文件。
语法：

<input type="file" multiple>

multiple:设置可以上传多个文件。

时间控件

有兼容问题，慎用，以后可以引入第三方脚本直接使用。
语法： ``` 年/月/日年/月某年第几周时间 ```

选项列表

需要绑定input才能使用。
语法：

<input type="text" list="datalist的id名">
<datalist id="id名">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>
    <option value="">5</option>
</datalist>

注意：通过input的list属性指定datalist的id名进行绑定。

属性

required：必填项，必须填写内容才能提交。
readonly：只读，文本只读，不能更改，可以复制，可以提交给数据库。
disabled：禁用，文本框禁用，不能更改，可以复制，不可以提交给数据库。
autofocus：自动获取焦点。

H5媒体标签

H5新增了音频和视频的标签。

音频标签

用于页面引入音频文件。
语法：

写法一：
<audio src="连接音频文件的文件路径" controls></audio>
写法二：
好处：以后可以写多个source，一首歌曲有多种文件格式，不同的浏览器兼容不同的文件格式
<audio controls>
    <source src="连接mp3格式的音频文件" type="audio/mp3">
    <source src="连接ogg格式的音频文件" type="audio/ogg">
</audio>

属性：
src：链接音频文件的文件路径；
controls：是控制器，控制音频的播放等操作；
autoplay：自动播放；
loop：循环播放；
muted：静音播放；

视频标签video

引入页面中视频文件。
语法：

写法一：
<video src="链接视频文件的文件路径" controls></video>
写法二：
<video controls>
    <source src="链接视频文件文件格式1的文件路径">
    <source src="链接视频文件文件格式2的文件路径">
</video>

属性：
src：链接视频文件的文件路径；
controls：是控制器，控制视频的播放等操作；
autoplay：自动播放；
loop：循环播放；
muted：静音播放；

语义化标签

语义化标签能够通过标签名很好的合理正确的表达标签内容的意思。

语义化标签的好处

易于用户阅读，样式丢失的时候，可以让页面呈现清晰的代码结构；
有利于SEO优化，搜索引擎根据标签来确定上下文的各个标签的关键字关系以及权重。
方便其他的设备进行解析，比如盲人阅读器。
有利于开发和维护，语义化标签具有可读性，代码更好维护。

语义化标签的使用

标签名字          标签描述
<header>         定义整个文档头部
<footer>         定义整个文档的尾部
<main>           网页中主体部分，内容区域，页面上有且仅有一个
<nav>            这个标签用于定义导航
<aside>          定义网站中的侧边栏
<article>        定义网页中一块独立的区域，一般放内容
<section>        定义网页中的一个模块，理解为平时的div
<thead>          表格的头部
<tbody>          表格的内容
<tfoot>          表格的尾部
<time>           定义一个时间、日期
<audio>          音频标签
<video>          视频标签
<source>         资源标签，定义多媒体资源
<canvas>         定义图形，绘制图形或者形状

标签的选择

（1）最外层的标签尽量使用HTML5的语义化标签，比如header、main、footer等；
（2）标题尽量使用标题标签，主要是为了seo优化；
（3）对于网页的内容的框架，重复出现的使用section，大体内容区域article标签；
（4）具体内容该使用什么标签就使用什么标签，比如图片就使用图片标签等等。

H5标签