积极拥抱HTML5
1、HTML5新特性的使用。
（1）使用HTML5中简化的定义方式：
定义文档类型声明：
<!DOCTYPE html>
定义页面编码：
<meta charset="utf-8">
样式和脚本文件的引用：
<!-- 可以省略type属性的设置 -->
<link rel="stylesheet" href="style.css" />
<script src="javascript.js"></script>
（2）使用HTML5中的新标签和新属性：
新标签主要分为三个部分：语义化标签、功能性标签以及新的输入控件类型。
新引入的语义化标签包括：section、article、aside、hgroup、header、footer、nav、figure及figcaption。
新引入的功能性标签包括：svg、canvas、audio、video等。
新的输入控件类型包括：tel、url、search、date、email、number、range、color等。
新属性：
a、 <script>标签的async属性：
<script>标签中有两个和脚本加载时机有关的属性，即async和defer。这两个属性只有在<script>标签中设置了src属性时才能起作用。属性defer表明 <script>元素中包含的JavaScript代码并不会修改DOM结构，因此代码可以延迟执行。属性async表明脚本以异步的方式加载和执行。
<!-- HTML4.01规范中定义了defer属性 -->
<script src="file.js" defer="defer"></script>
<!-- HTML5规范中定义的async属性 -->
<script src="file.js" async="async"></script>
b、 <base>标签的target属性：指定页面<a>标签的默认窗口，省去了在<a>标签中定义target属性的麻烦。
<head>
<!-- 单击页面上的超链接时会在新窗口打开 -->
<base taget="_blank">
</head>
c、 <input>和<textarea>中的placeholder、required及autofocus属性。
d、标签上的自定义属性data-*。
<ol>
<li id="byond_sea" data-length="2mlls">Beyond The Sea</li>
...
</ol>
对应的读取和设置数据的方式如下：
var beyondSea=docment.getElementById('byond_sea');
//获取数据
beyondSea.dataset['length'];
//设置数据
beyondSea.dataset['length']='3mlls';
2、不要使用HTML5中已废弃的标签和属性。
移除标签的原因：
（1）标签仅仅是为了设置外观，没有任何语义。涉及的标签包括：<basefont>、<big>、<font>、<strike>和<tt>。
（2）标签破坏了可用性。包括：<frame>、<frameset>、<noframes>。
（3）标签很少被使用，能引起混淆或者是有更好的代替标签。包括：<acronym>、<applet>、<isindex>和<dir>。
常见的不规范属性：
（1）<table>、<div>、<input>、<hx>系列等标签中的align属性。
（2）<tr>、<td>、<th>等标签中的valign属性。
（3）<table>、<body>标签中的bgcolor属性。
（4）<iframe>标签中的scrolling属性。
（5）<img>等标签中的width和height属性。
3、如何处理浏览器的兼容问题。
（1）让浏览器识别HTML5规范中的新标签。
IE的低版本（8及其以下）都没有支持HTML5新标签。但是支持通过document.createElement方法产生新标签。再为它们设置样式。
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
i= e.length;
while (i--){ document.createElement(e[i])}
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}
最好的方式是直接使用成熟的框架，使用较多的是html5shim框架。使用方法：在页面的head部分添加框架的引用即可。
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
（2）HTML5中新特性的向后兼容。
用框架 检测浏览器是否支持某特性。检测准确率和使用率较高的是Modernizr框架。
Modernizr框架的原理是自动检测浏览器是否支持新特性，并在<html>标签中添加对应的类。如果浏览器支持某个特性，则会添加一个以特性名称命名的类。反之，则添加一个以“no-”为前缀加上特性名称命名的类 。使用方法如下：
首先 在head部分引入框架：
<script src="js/modernizr.min.js"></script>
其次在<html>标签中添加一个名为no-js的类：
<html class="no-js">
页面加载后，<html>标签类似如下：
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
在CSS中，可以通过使用这些类添加向后兼容的代码。如下是一个使用多背景图的例子：
#nice { background: url(background-one.png) top left repeat-x;}
.multiplebgs #nice { background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;}
（3）音频和视频的兼容
大约80%的浏览器支持<audio>标签
浏览器支持的音频格式列表：
|
浏览器 |
版本 |
支持格式 |
|
Internet Explorer |
9.0+ |
MP3, AAC |
|
Chrome |
6.0+ |
Ogg Vorbis, MP3, WAV（9.0+） |
|
Firefox |
3.6+ |
Ogg Vorbis, WAV |
|
Safari |
5.0+ |
MP3, AAC, WAV |
|
Opera |
10.0+ |
Ogg Vorbis, WAV |
从支持的格式来看，要让所有的浏览器可以播放<audio>元素上的音频，最佳的方式是提供MP3和Ogg_Vorbis两种格式，兼容代码如下：
<audio controls>
<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
<!-- 向后兼容代码：如，显示提示信息、提供下载链接使用flash播放器等 -->
浏览器不支持<code>audio</code>标签
</audio>
浏览器支持的视频格式的列表：
|
浏览器 |
版本 |
支持格式 |
|
Internet Explorer |
9.0+ |
MP4 |
|
Chrome |
6.0+ |
MP4,WebM,Ogg |
|
Firefox |
3.6+ |
WebM,Ogg |
|
Safari |
5.0+ |
MP4 |
|
Opera |
10.0+ |
WebM,Ogg |
从浏览器支持的格式来看，最佳的方式是提供WebM和MP4两种格式的视频，兼容代码如下：
<video controls>
<source src=video.webm type=video/webm>
<source src=video.mp4 type=video/mp4>
<!--向后兼容代码:添加一个网络视频的地址-->
<iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>
</video>
