10个你需要立即知道的html5新特性
原文在这里，http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/我从中抽出10个认为有说头的陈述给大家。不算翻译，不算原创， 就算读书笔记吧。
1 新的DOCTYPE
不再需要：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
取而代之的是：
<!DOCTYPE html>
别看这一点改动， 想想整个互联网， 该节省了不少带宽. 环保啊。
2 正则表达式
你是否曾经也像这样写过表单验证代码？ 现在html5就支持。
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>
当我点Go的时候，Chrome会提示输入错误信息.
但是ie9似乎不感冒。
3 元素内容可编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
4 email 类型的输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
如果您输入的不是email, 则submit的时候会提示错误。
5 输入框占位符
<input name="email" type="email" placeholder="[email protected]" />
则该输入框初始化的时候会显示一个默认值[email protected], 当onfocus的时候会消失. 节省了js。
6 本地存储
功能上类似cookie, 但是容量大了很多. 浏览器支持的情况也还乐观. 不过下面的代码在用ie8/ie9/ff3.5+测试的时候需要把它上传到server上方可成功（同时别忘了jquery）, 这个应该是基于安全上的考虑.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
<script src="jquery-1.6.1.js"></script>
</head>
<body>
<ul id="edit" contenteditable="true">
<li>试着编辑以下这里吧.</li>
</ul>
</body>
<script>
$(document).ready(function(){
$('#edit').blur(function(){
localStorage.setItem('todoData', this.innerHTML);
});
if(localStorage.getItem('todoData')){
$('#edit').html(localStorage.getItem('todoData'));
}
});
</script>
</html>
浏览器支持情况：
7 语义化的header, footer, section
HTML4的时候， 我们通常会用这样的代码体现页面的模块化：
<div id="header"></div> <div id="content"></div> <div id="footer"></div>
HTML5 提供了语义化的标签， 还是拿上面的例子来完善一下。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
section{
border: solid red 1px;
border-radius: 6px;
}
</style>
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<header>
<h1>This is the header</h1>
</header>
<section>
<ul id="edit" contenteditable="true">
<li>First line.</li>
<li>Second line.</li>
<li>Third line.</li>
</ul>
</section>
<footer>
<span>This is the footer. ©sunxing007 2011</span>
</footer>
</body>
<script>
$(document).ready(function(){
$('#edit').blur(function(){
localStorage.setItem('todoData', this.innerHTML);
});
if(localStorage.getItem('todoData')){
$('#edit').html(localStorage.getItem('todoData'));
}
});
</script>
</html>
但是，Ie8还不能识别header, section, footer等，但是这个问题可以通过下面的js代码轻松的fix掉。
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
有了这段代码，ie8可以识别他们，但是他们被默认为inline元素，所以还需要一句css：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
8 required属性
它的意思不用多说。
<form method="post" action=""> <label for="someInput"> Your Name: </label> <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> <button type="submit">Go</button> </form>
9 autofocus属性
以前需要用js来实现：element.focus(); 现在只需要给一个autofocus属性即可：
<form method="post" action=""> <label for="someInput"> Your Name: </label> <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required autofocus> <button type="submit">Go</button> </form>
10 Audio/Video标签
以前需要借助第三方插件如wmp，flash来播放音频视频，现在html5提供了audio/video标签：
<audio autoplay="autoplay" controls="controls"> <source src="burning.mp3" /> </audio>
Chrome下截图：
Ie9下截图：
试图对他们应用一些样式，比如width, border, border-radius, display: none都是可以的，但是控件的样子在不同浏览器中差别太大。 不过，audio/video提供了丰富的属性和控制接口，这为我们打造自己的播放器提供了足够的要素。相关资料可参考http://www.w3.org/TR/2008/WD-html5-20080610/video.html#audio， 也可以自行baidu “html5 audio 属性 方法 事件”。
关于视频video的播放，我测试了如下的两个网上的视频, mp4可以在ie9下播放， ogg可以在ff下播放， chrome都可以播放。
<video controls="controls" preload> <source src="http://www.w3school.com.cn/i/movie.ogg" /> <p> Your browser is old. <a href="http://www.w3school.com.cn/i/movie.ogg">Download this video instead.</a> </p> </video> <br /><br /> <video src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls="controls" />
但是我试图播放我自己用手机拍摄的mp4却没有成功，对视频以前没有接触过，查资料发现， mp4也有好多种编码方式， 其中html5支持的格式是H.264编码格式的，如果你的mp4文件无法播放， 可以用格式工厂导出一下， 输出选项中编码格式选H264 .