H5新特性
H5媒体标签
h5新增音频和视频的技术，早期是通过flash技术。目前h5新增了视频和音频技术，让网页实现视频和音频播放更加方便。
音频 audio视频 video音频标签
<!-- 音频标签 src指定音频文件路径 controls音频控件 --><!-- loop 循环播放 muted静音播放 autoplay 自动播放--><audio src="file/music.mp3" controls loop ></audio><audio controls> <!-- source引入多个文件格式的音频文件，一首歌曲有不同的文件个数，浏览器对音频文件的格式不统一 --> <source src="file/music.mp3" type="audio/mp3"> <source src="file/music.ogg" type="audio/ogg"> </audio><!-- 老版本音频及视频标签 扩展 （不推荐使用）--><embed src="">src：链接音频文件
controls：音频的控件
loop：循环播放
muted：静音播放
autoplay：自动播放
type：文件格式
视频标签
<!-- 视频标签：默认不会播放，需要添加控制按钮才能点击播放 --><!-- 学js的时候，我们会通过js来控制视频播放，暂停，快进，弹幕等等操作 --><video src="file/play.mp4" controls loop autoplay></video><video controls> <source src="file/play.mp4"> </video>H5表单标签
回顾之前的表单标签：
form、input（text）、input（password）、input（radio）、input（checkbox）、select、textarea、button、input（button） input(submit) input(reset) input(date) input(file)
邮箱输入框
可以进行邮箱格式的验证，但是不能精准验证，以后通过js来验证
<input type="email">数字输入框
只能输入数字的输入框
<input type="number">网址输入框
可以验证网址是否正确，必须是完整的网址，包含http或者https
<input type="url"> 搜索框
输入内容后，提供清空的操作
<input type="search">选择范围
<input type="range" max="200" value="20">max=“200” 最大范围 value="20"默认值
选择范围
<input type="color">时间控件
<!-- 时间控件 date选择年月日 month选择年月 week选择某年第几周--><input type="date"><input type="month"><input type="week">文件上传
<!-- 文件上传：默认只能选择一个，multiple可以上传多个文件 --> <input type="file" multiple>选项列表 datalist
可以在输入框中提示
<!-- 给datalist的id进行命名，通过input输入框的list属性进行和datalist的id绑定 --><input type="text" list="mylist"><datalist id="mylist"> <option>小猪佩奇</option> <option>小米</option> <option>大米先生</option></datalist>语义化标签
在开发过程中，我们经常使用一些约定俗成的一些名字来命名div的class或者id。class=“header” class=“nav” class=“footer”
opera浏览去统计了运行在本浏览器的网页使用的id名和class名
id：https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/idlist-url.htm
class：https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/classlist-url.htm
语义化：
合理、正确的标签来展示内容，比如h1~h6定义标题，平时我们常用的一些命名进行提取，作为一种标签。可以通过标签名就能知道标准的功能或者作用。<nav>
语义化的好处
易于用户阅读，让页面结构更加清晰明了有利于SEO优化，搜索引擎能更好的识别语义化标签方便其他设备的解析有利于开发和维护，语义化更具有可读性，代码更好维护。根据平时使用比较频繁的词汇来设计了语义化标签，语义化标签一般用于布局
| 标签名 | 描述 |
|---|---|
| header | 代表网页的头部 |
| footer | 代表网页的尾部 |
| main | 代表网页的主体部分，内容区域，有且仅有一个 |
| nav | 代表导航区域 |
| aside | 代表网页中的侧边栏 |
| article | 代表网页中一块独立的区域，一般用于内容，相当于div |
| section | 代码网页中一个模块，相当于一个小部分内容 |
| thead | 代表表格的头部 |
| tbody | 代表表格的内容区域 |
| tfoot | 代表表格的底部 |
| audio | 音频标签 |
| video | 视频标签 |
| source | 资源标签，定义多媒体资源 |
网页中标签的选择
最外层尽量使用HTML5的语义化标签，比如header、nav 、footer标题尽量使用标题标签h系列，主要目的为了SEO优化对于网页内容板块，如果重复出现的小板块article，功能性或者带标题用section来表示，其他区域就用div具体内容该用什么标签就用标签，比如，图片img，输入框inputh5兼容性问题
兼容：IE浏览器对同一个网页解析出来的结果不一样，导致用户体验不一样。
解决方案：将main标签转成块级，标签在IE浏览器就可以支持
main{ display:block;}