HTML5 再学习
HTML5 的声明
<!DOCTYPE html>
只用这个声明就可以了，很简单。还有需要注意的就是 HTML 标签里的 lang 属性 设置成 zh-cn
字符设定
<meta charset="utf-8">
常用新标签
HTML5 一大特性是引入了很多带有语义的新标签。虽然老网站还没有使用新标签，但是新企业，以及手机浏览器，都开始使用HTML5新标签，尤其手机浏览器，对于HTML5 新特性的支持很好，而且很少存在兼容性问题。
W3C Shcool有所有新增的HTML5标签，下边来看一些比较重要的新标签：
| 标签 | 语义 |
|---|---|
| header | 定义文档的页眉 头部 |
| nav | 导航栏部分 |
| footer | 定义文档或节的页脚 底部 |
| article | 定义文章 |
| section | 定义文档中的节（section、区段）,有点类似DIV标签 |
| aside | 定义侧边栏部分 |
| datalist | 标签定义选项列表，需要与input元素配合使用 |
| fieldset | 将表单内元素分组，与legend元素一起使用 |
| progress | 进度条，这个很有意思， |
还有一些和音视频相关的标签在音视频部分单独介绍
HTML5新增标准属性
下边的这些属性，对于所有的元素都有效：
| 属性 | 说明 |
|---|---|
| contenteditable | 是否允许修改内容,不常用 |
| contextmenu | 上下文菜单 |
| data-yourvalue | 重要，自定义属性，必须要以data-开头，可以用来在元素上保存自己想要的任何数据。 |
| draggable | 是否允许拖动,用于链接和图片上有很明显的效果 |
| hidden | 规定该元素不显示,而且也从标准流中去除。 |
| spellcheck | 规定是否必须对元素进行拼写或语法检查。 |
| subject | 规定元素对应的项目。 |
某些属性需要设置值为false或者true，某些属性如hidden 只要添加给元素，不需要赋值就可以起作用。即使是不需要设置布尔值的元素，只要给元素添加上的时候用JS去拿同名属性，得到的布尔值是true。
HTML 5 事件
HTML5 为window 对象 和普通元素都添加了很多新的事件。不过由于一般这些事件应用较少，需要的时候到W3C查看即可
HTML5 对表单的增强
HTML5目前被浏览器普遍支持的新特性就是对表单元素的增强，为表单元素增加了一系列浏览器验证和新属性，用于更好的控制表单元素的结果。
| TYPE | 说明 |
|---|---|
| 电子邮件 | |
| url | 输入URL |
| number | 限定为输入数字 |
| range | 需要通过属性指定：<input type="range" name="points" min="1" max="10" />这个外观是一个滑块。 |
| Date Pickers | 这是一系列type的新属性，有date, month, week, time, datetime, datetime-local |
| search | 显示为常规的文本域，用于输入需要搜索的文本，主要是为了体现语义。 |
上边的这些所有属性只要规定好，在提交表单的时候，浏览器会进行验证，验证不通过不会发送请求。
HTML5 新表单属性
除了对input元素增加了新的TYPE属性之外，还对FORM元素和INPUT元素增加了新的属性。
-
FORM表单的新属性：
- autocomplete 规定表单是否要有自动完成功能，设置为on 或者 off，或者只写属性名表示开启，影响浏览器是否显示自动完成的匹配项
- novalidate 提交表单的时候是否需要验证，设置为 true 或者 false，或者只写属性名表示开启。
| 属性 | 说明 |
|---|---|
| placeholder | 常用，占位文字，不影响用户输入 |
| autofocus | 页面加载好以后自动获得焦点，最好一个页面只给一个元素使用。 |
| multiple | 适合email 和 file 域，用于选择多个文件或值。经常使用。 |
| autocomplete | 和表单的类似，使用该属性的input必须给name属性 |
| required | 必填，如果开启表单验证，这一项也会被验证 |
| accesskey | 激活该元素的快捷键 |
| form override attributes | 表单重写，有一系列的属性，可以控制表单的各个属性，用于向不同地方提交。 |
用新增的表单属性和表单类别，外加上 pattern 正则表达式验证，就会很方便的验证表单元素了。
HTML 多媒体要素
HTML5的一大特点就是可以支持音视频的播放，不用像原来一样依赖第三方的中间层播放器比如FLASH等。为此，HTML也引入了新标签，控件和对应的事件。
原来的多媒体文件支持
在早期的时候，插入视频实际上是插入一个视频网站的播放器，一般是FLASH，采用 embed 标签，然后就可以载入视频进行播放了，但是这种方式无法对视频本身进行控制，而且也调用了FLASH插件。
HTML5则致力于网页原生播放视频和音频，不再使用FLASH。比如B站，现在播放器可以选择H5播放器和FLASH播放器。
HTML5 音频标签
音频标签采用 AUDIO 标签，由于版权原因，各个浏览器可以播放的声音文件不同，由于wav不是压缩文件，对于所有浏览器，只要准备.ogg 和 .mp3的两个声音文件，就可以让所有浏览器都播放了。
- src 音频文件的地址
- controls 提供播放控件
- AUDIO标签之间的文本是供不支持AUDIO标签的浏览器显示用
- loop 循环播放，不写则播放一次就停止
- 在AUDIO 标签内部增加SOURCE 标签，其中的src属性用于多浏览器支持，浏览器会去找第一个可以用的文件格式。如果使用SOURCE 标签，则AUDIO标签内不用加src属性
- autoplay 音乐就绪后自动开始播放
- preload 音频在页面加载时进行加载，并预备播放，如果设置了autoplay则该属性不起作用。
注意，Chrome浏览器对于自动播放做了限制，一定要用户点击才可以，这样避免后台下载大量数据。关闭的方法是在地址栏内输入 chrome://flags/#autoplay-policy，找到其中的 Autoplay policy，设置为不需要用户手势即可。
实际上AUDIO标签提供的控件非常简陋，但至少给了浏览器一个通用的方法，如果要扩展，只需要通过前端和播放事件，写播放器即可。
HTML5 视频
HTML5为视频提供了VIDEO标签用于播放视频。
VIDEO标签的使用和AUDIO很类似：- autoplay 自动播放
- controls 是否显示默认控件
- loop 循环播放
- width 设置窗口宽度
- height 设置播放窗口的高度
- 依然可以通过source来进行浏览器兼容
只需要提供MP4，以及OGG和WEBM格式的视频任选一个，就可以实现全部浏览器兼容。
默认控件比较简陋，依然需要通过播放事件写功能齐全的播放器。
HTML5 音频和视频事件
如果对默认的控件不满意，需要写一个功能更强的播放器，则需要参考HTML5对于音视频新增的DOM事件以及一个例子，用到的时候再来学习。