html5开发小技巧

前言

Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。

新的Doctype声明

XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明

HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

---

去掉了Javascript和CSS标签的type属性

通常你会在和

在HTML5中，不再需要type属性了，因为这显得有点多余，去掉之后可以让代码更为简洁

---

是否使用双引号

这有点让人纠结，HTML5并不是XTHML，你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号，因为这让代码看起来会更标准。不过，这可以根据你的个人喜好来确定是到底要不要双引号

 start the reactor. 

---

占位符

在HTML5中新增了占位符属性placeholder

---

更有语义的header和footer

下面的代码在HTML5中将不复存在

     ...


     ...

通常我们都会给header和footer定义一个div，然后再添加一个id，但是在HTML5中可以直接使用

和

标签，所以可以将上面的代码改写成：

    ...


    ...

要注意不要将这两个标签和网站的头部和页脚混淆起来，它们只是代表它们的容器

---

标题群( hgroup)

如果用h1和h2标签分别表示网站的名称和副标题，但这会让两个本义上密切相关的标题并没有关联起来。这个时候可以使用

标签将它们组合起来，这样代码会更有语义

 Recall Fan Page 
 Only for people who want the memory of a lifetime. 

---

自动获取焦点

HTML5新增了自动获取焦点属性autofocus：

---

使用正则表达式

在HTML5中，我们可以直接使用正则表达式。

    create a username:  

    Go 

---

检测浏览器对HTML5属性的支持

由于各浏览器对HTML5属性的支持度不同，这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性，上例中的代码如果要检测pattern属性是否被浏览器识别，可以使用Javascript代码来检测。

alert( 'pattern' in document.createElement('input') ) // boolean;

其实这是确定浏览器兼容常用的方法，jQuery库就经常使用这种方法。上面的代码中创建了一个input标签，并检测pattern属性是否被浏览器支持，如果能支持的话，浏览器就支持这个功能，否则就不支持

---

Mark标签

标签用于高亮显示那些需要在视觉上向用户突出其重要性的文字，包裹在此标签里的字符串必须与用户当前的行为相关。

 search results 
 They were interrupted, just after Quato said, "Open your Mind". 

---

Audio支持

HTML5提供了标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如

---

Video支持

和Audio很像，标签提供了对于video的支持.

---

预加载视频

preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频

显示视频控制

---

Output元素

元素用来显示计算结果，也有一个和label一样的for属性
用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值

input[type=range]:before { content: attr(min); padding-right: 5px;

}

input[type=range]:after { content: attr(max); padding-left: 5px;}