一、HTML5中的新增标签
1.图形的绘制
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
2.多媒体
<audio> 定义音频
属性：
autoplay="autoplay"如果出现该属性，则音频在就绪后马上播放。
controls="controls"如果出现该属性，则向用户显示控件，比如播放按钮。
loop="loop"如果出现该属性，则每当音频结束时重新开始播放。
preload="preload"如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
srcurl要播放的音频的 URL。
<video> 定义视频（video 或者 movie）
属性：
autoplay="autoplay" 如果出现该属性，则视频在就绪后马上播放。
controls="controls" 如果出现该属性，则向用户显示控件，比如播放按钮。
height="pixels" 设置视频播放器的高度。
loop="loop" 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload="preload"如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
<source> 定义多媒体资源 <video> 和 <audio> 字体
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
3.表单
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值，类似于拥有输入功能的下拉列表
<keygen> 规定用于表单的密钥对生成器字段。提供一种验证用户数据的可靠方法。在提交表单数据的时候，会生成两个键，一个私钥，一个公钥。私钥存储在本地，公钥发送到服务器。在需要做验证的时候，我们可以从服务器下载一个客户端证书，通过私钥和证书来实现相关的验证操作。
<output> 定义不同类型的输出，比如脚本的输出。4.用于展示内容，只能展示，不能进行编辑
4.语义和结构
<article> 定义页面的侧边栏内容
<aside> 定义页面内容之外的内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义运行中的进度（进程）。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。二、HTML中移除的标签：
<acronym> 字体兼容
<applet> java组件
<basefont> 字体
<big>
<center>
<dir> 目录
<font>
<frame>
<frameset>
<noframes>
<strike>三、HTML中的语义标签
<body>
<header>定义了文档的头部区域</header>
<div>
<article>定义页面的侧边栏内容</article>
<aside>定义页面内容之外的内容</aside>
</div>
<footer>定义 section 或 document 的页脚</footer>
</body>
四、如何处理HTML5新标签的浏览器兼容问题
1.在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
处理方式：在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题（测试在IE下面的兼容性：ieTester软件的使用）
五、表单新增的属性
autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。<br>
<form action="" autocomplete="on">
autofocus定位文本框焦点：<input type="text" autofocus> <br>
placeholder设置文本框默认提示：<input type="text" placeholder="请输入***"><br>
email邮件类型自带验证和提示：<input type="email"> <br>
required属性设置非空特性：<input type="tel" required><br>
pattern设置验证规则：<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br>
multiple多文件选择：<input type="file" multiple><br>
<input type="submit" value="提交"/>
</form>六、表单的输入类型
a)email： 输入email格式
b)tel： 手机号码
c)url： 只能输入url格式
d)number： 只能输入数字
e)search： 搜索框
f)range： 范围，可以进行拖动，通过value进行取值
g)color ：拾色器，通过value进行取值
h)time ：时间
i)date： 日期 不是绝对的
j)datetime： 时间日期
k)month： 月份
l)week： 星期
七、表单新增的事件：
oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发
<script>
/*oninput可以监听用户的每一次输入*/
document.getElementById("name").oninput=function(){
console.log(this.value);
}
/*监听键盘弹起，每一个键盘弹出触发一次*/
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
/*当指定表单元素验证不通过时触发*/
document.getElementById("phone").oninvalid=function(){
console.log("验证不通过");
}
</script>