HTML5 学习

HTML新增标签（自己感觉暂时用得到的）

hidden属性

游戏界面和登陆界面不可以同时存在

例 document.getElementById('login').hidden=true;

设定了hidden的元素在语义上和设置display:none的元素是完全不同的，后者仅仅针对表现层的显示状态为不渲染。而前者表示该元素和当前页面的状态没有直接关联，或者日后会被页面的其他部分所使用。这意味着hidden不能被使用在当前状态相关的元素上

比如对于在同一个对话框中被隐藏的tab 是不能使用hidden的，因为对于隐藏的tab而言，其实与当前的页面状态是有关联的，充其量算是内容溢出视图，同样的也i按如果在移动端可能会显示全部内容，并且以分组的形式展示而不是tab对话框的形式

一个链接链到hidden的元素的是不合理的，如果内容与页面无关，没有任何理由需要链接他

hidden属性还不被所有浏览器支持，但是可以用该方法来兼容

*[hidden]{

display:none;
}

data-*属性

在需要存储页面/程序私有的自定义数据，而又不知道使用什么属性，或者元素时，就用data属性

使用data属性的好处是所有的浏览器都支持

jquery用data方法来访问元素的data-*属性,并且还能自动反序列化json数据

如$tree.data('plant-height');

除了存储数据，很多javascript库都使用data-属性来进行组件或者API定义

适用情况

1.存储组件日后可能会被js使用到的参数（元素的高度或者透明度）

2.存储与模块关联的数据

3.存储分析数据（配合GA或者其他数据分析追踪工具）

4.存储游戏中的值（生命值，魔法值）

不适用的情况

1.已经更合适的属性。说明信息最好存在title属性而不是类似的data--description

2.自定义data属性和微格式数据不能混用，两者并无直接关系，微格式通常是给第三方程序如搜索引擎，而自定义的data属性是给自己程序使用

3.不要利用data属性作为css样式的标准

HTML5内容模型

区块

1.body

2.article:定义文章

3.section：定义章节，专题

4.nav：定义导航结构

5.aside：定义附属结构

6.h1-h6和hgroup：定义标题和标题组（hgroup用于组合标题）

7.header和footer：定义头部和尾部

8.address：联系人信息

src和href的区别

href指超文本引用，表示当前页面引用了别处的内容；src表示来源地址，表示把别处内容引入当前页面

img script iframe 应该使用src来引入内容，超链接则只是引用了别处的内容

rel属性中prefetch

prefech是html5新增的一个功能，使用它可以大大提升网站的可感知速度

<link rel="prefetch" href="http:......"/>

浏览器就会预先加载http对应的页面这样用户在真正访问这个页面的时候就比较迅猛

对于chrome而言，使用prerender 属性代替 prefetch  

IMG HTML5增加了srcset属性

允许作者使用一组不同的图片资源以适配不同尺寸和像素密度的屏幕

iframe HTML5新增的安全属性

sandbox属性，单用的时候默认全部安全策略

可以更改属性中的内容

embed是HTML的新标签用来定义嵌套的内容

video和audio

canvas和svg

表单是HTML5的一大亮点

<input type=email>

email类型会自动验证用户输入的内容格式是不是email类型，并给出相应的提示

autocomplete=“on”      autocomplete属性可以实现自动完成的功能

如果还需要其他的数据验证可以用pattern属性

pattern属性的值可以是一个正则表达式，如果用户的输入匹配增则表达式则该字段能够提交

<input type=number>

number类型只能接受用户输入数字

如果要限制输入数字的最大值和最小值，可以用max和min属性

<input type=tel>( type=color,search,range,data,time,datatime,datatime-local,week,month,file)

表单操作

form元素增加了autocomplete 和 novalidate

除了新增input类型，html5还提供了几个表单相关元素，meter process output keygen