html_H5新增标签和属性

1. html5简介
   狭义上指新一代html标准，广义上指前端
2. 优势
   针对js，新增很多可操作接口；
   新增一些语义化标签，全局属性；
   新增多媒体标签代替flash；
   更侧重语义化，对SEO更友好；
   可移植性好，应用在移动端
3. 兼容性
   支持:Chrome、Safari、Opera、Firefox
4. 新增布局标签

标签	语义
header	头部
footer	底部
nav	导航
article	文章、杂志、帖子、新闻、博客、评论等，article强调独立性，内部可以写多个section
section	某段文字，section强调是分段或分块
aside	侧边栏
main	文档主要内容(WHATWG无语义，IE不支持)
hgroup	包裹连续标题(w3c删除)

5. 新增状态标签

meter定义已知范围内标量测量

meter属性	含义
optimum	最优值
min	最小值
max	最大值
low	低值
high	规定高值
value	当前值

progress显示某个任务完成进度

progress属性	含义
max	最大值
value	当前值

6. 新增列表标签

datalist用于搜索框关键字提示

<input type="text" list="selectcont">
<datalist id="selectcont">
  <option>dd</option>
</datalist>

details用于展示内容答案，对专有名词解释

<details>
  <summary>执魔</summary>
  <p>小说，作者我是墨水</p>
</details>

summary写在details里，用于指定名词或问题

7. 新增文本标签

文本注音ruby

  <ruby>
    <span>拼音</span>
    <rt>pin yin</rt>
  </ruby>

文本标记mark，w3c建议用于搜索显示的关键字

8. 新增表单控件属性

属性	含义
placeholder	提示文字，适用于文字输入类的表单控件
required	必填项，适用于除按钮外表单控件
autofocus	自动获取焦点
autocomplete	自动完成，可以设置off或on，适用于文字输入类表单控件，密码框、多行输入框不可用
pattern	正则表达式，适用文本输入类表单控件， 多行输入不可用，空的表单不会验证，往往与required配合使用

9. input新增type属性值

type取值	含义
email	提交时进行邮箱格式验证 ，为空不验证
number	数字类型，为空不验证
url	URL类型，为空不验证
search	搜索框
tel	移动端输入唤起数字键盘
range	默认50，提交时范围类型验证
color	颜色
date	日期
month	月
week	周
time	时间
datetime-local	日期+时间

10. form新增属性
    novalidate表单所有输入不验证
11. 新增视频标签video

video属性	含义
src	视频地址
controls	显示视频控件
muted	静音
autoplay	自动播放
loop	循环播放
poster	视频封面
preload	auto/metadata/nono，metadata仅预先获取视频原数据(如长度)，auto下载整个文件，如果设置autoplay，忽略该属性
width	宽
height	高

12. 新增音频标签audio

audio属性	含义
src	视频地址
controls	显示视频控件
muted	静音
autoplay	自动播放
loop	循环播放
preload	auto/metadata/nono，metadata仅预先获取视频原数据(如长度)，auto下载整个文件，如果设置autoplay，忽略该属性

13. 新增全局属性(了解)

属性	含义
contenteditable	是否可被编辑，值类型布尔值
draggable	是否可被拖动，值类型布尔值
hidden	隐藏，不占位
spellcheck	拼写检查，值类型布尔值
contentmenu	规定鼠标右键显示内容
data-*	储存页面私有数据

14. 部分兼容性处理

设置IE总是使用最新文档模式进行渲染

 <meta http-equiv="X-UA-compatible" content="IE=Edge">

默认使用webkit内核进行渲染，针对360等双核浏览器

<meta name="rendener" content="webkit">

使用html5shiv让低版本浏览器认识h5语义化标签

<!--[if lt ie 9]>
<script src="html5shiv"></script>
<![endif]-->

lt小于 ， lte小于等于，gt大于 ， gte大于等于，!否

html5shi资源Google 资源库:
http://html5shiv.googlecode.com/svn/trunk/html5.js
html5shi资源百度静态资源:
http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js