必须知道的22个学习html5的技巧
互联网科技发展速度惊人，稍不留神就可能跟不上步伐。HTML5的变化和更新也让不少人应接不暇。本文将为大家介绍一些最基本且必要的HTML5技巧。
1. 新的文档类型（Doctype）
过去，我们可能使用如下既麻烦又难记的XHTML文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
现在，是时候切换到新的HTML5文档类型了，仅需15个字符：
<!DOCTYPE html>
注意：doctype的申明需要出现在HTML文件的第一行。
2. 图形（Figure）元素
以往标记图片可能会使用如下代码：
<img src="path/to/image" alt="About image" />
<p>Image of Mars.</p>
这种方式无法用简单、富有语义关联的方式将图形与标题关联起来，因为它只是用段落标记和图片元素包裹。而HTML5通过引进<figure>元素改进了这一点。结合<figcaption>元素使用时，可将图形标题与图形配对，代码如下：
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting.</p>
</figcaption>
</figure>
3. 重新定义<small>
在过去，<small>元素可用于创建与logo密切相关的副标题。但在HTML5中，<small>元素被重新定义，现在它用来代表小字或其他边注，如网站底部的版权声明。
4. 不再需要脚本、链接类型
过去，我们可能会像下面这样给链接和脚本标签添加类型属性：
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
在HTML5中，这已不再必要，因为这两个标签分别代表样式和脚本，可删除类型属性，代码如下：
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
5. 使用还是不使用引号
HTML5与XHTML不同，若不喜欢，不必用引号将属性包裹起来。当然，若使用引号让你更舒服，也没问题。示例如下：
<p class=myClass id=someId>Start the reactor.
6. 使你的内容可编辑
HTML5的“contenteditable”功能非常强大，它允许用户编辑元素（包括其子元素）内包含的任何文本内容。其用途广泛，如简单的任务清单或基于wiki的站点，还可利用本地存储。示例代码如下：
<!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>
<li>Watch video of self</li>
</ul>
</body>
</html>
或者，按照第五条技巧，可将第九行代码写成（不用引号）：
<ul contenteditable=true>
7. 电子邮件输入
若应用“电子邮件”类型指定输入形式，可命令浏览器只允许符合有效电子邮件地址结构的字符串输入。不过，内置的表单验证并非完全可靠，较旧的浏览器可能不理解“电子邮件”类型，会简单返回到普通文本框。示例代码如下：
<!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>
需要注意的是，不同浏览器对电子邮件验证的支持情况不同。例如，Opera只有在指定name属性时才支持电子邮件验证，且不支持占位符属性。所以，可使用这种形式的验证，但不要过分依赖。
8. 占位符
此前，需使用JavaScript创建文本框的占位符。初步设定值属性，用户删除文本后输入内容会再次为空。占位符属性弥补了这一不足，示例如下：
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
9. 本地存储
得益于HTML5的local storage，高级浏览器可“记住”我们输入的内容，即使浏览器关闭或刷新也不受影响。虽然不是所有浏览器都支持，但关键的Internet Explorer 8、Safari 4、Firefox 3.5都支持。
10. 语义性的Header和Footer
过去，我们可能使用如下代码：
<div id="header">
...
</div>
<div id="footer">
...
</div>
<div>本身没有语义结构，即使应用ID也如此。在HTML5中，可使用<header>和<footer>元素，代码如下：
<header>
...
</header>
<footer>
...
</footer>
注意，不要将这两个元素与网站的头部和脚部混淆，它们仅代表其容器。
11. IE和HTML5
IE理解新的HTML5元素较费劲。为确保新的HTML5元素以块级元素正确显示，需用如下代码定义风格：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
即便如此，IE仍可能无视这些格式，还需使用如下代码解决问题：
document.createElement('article');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('menu');
12. 群组标题（hgroup）
在HTML4中，若网站有名称和副标题分别用<h1>、<h2>标签标记，无法用很好的语义关系描述两者关系，且使用<h2>显示其他标题时，层级方面问题更多。使用群组标题<hgroup>元素，可将这些标题聚集在一起，不影响文档的整个纲要，示例如下：
<header>
<hgroup>
<h1>Recall Fan Page</h1>
<h2>Only for people who want the memory of a lifetime.</h2>
</hgroup>
</header>
13. 必要（Required）属性
表单允许使用新的必要属性，规定某个特定输入是否必要。可按个人代码偏好，用以下两种方式声明该属性：
<input type="text" name="someInput" required>
或更严谨的写法：
<input type="text" name="someInput" required="required">
若浏览器支持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>
若输入为空，表单将无法提交，文本框会突出显示。
14. 自动对焦（Autofocus）属性
有了HTML5，不再需要用JavaScript方案解决自动对焦问题。若某个输入应被“选择”或聚焦，可使用HTML的自动对焦autofocus属性，示例如下：
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
15. 音频支持
HTML5提供了音频元素<audio>，无需再依靠第三方插件提供音频。目前，只有最新的浏览器支持HTML5音频，因此最好提供一些向后兼容性，示例代码如下：
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
在音频格式方面，Mozilla和Webkit尚未完全支持。Firefox希望看到.ogg文件，Webkit浏览器只支持常见的.mp3扩展名。所以，至少目前应创建两个版本的音频。Safari加载页面时，若认不出.ogg格式文件，会跳过并加载mp3版本。需注意，IE不支持，Opera 10或更低版本只支持.wav文件。
16. 视频支持
与音频元素<audio>类似，新浏览器也支持HTML5视频。最近，YouTube宣布了一项新的HTML5视频嵌入。可惜的是，HTML5说明文件未为视频指定特定编码器，主要取决于浏览器。Safari和IE9支持H.264格式的视频，Firefox和Opera则坚持Theora和Vorbis格式。因此，显示HTML5视频时，必须提供两种格式。
17. 视频预先加载
需决定是否让浏览器预先加载视频。若访客进入专门显示视频的页面，预先加载可节省等待时间。可通过设置preload="preload"或直接添加preload来预先加载视频，示例如下：
<video preload>
...
</video>
18. 显示控件
若按上述代码编写，视频只会显示成图片，没有可控制的元件。为获取播放控件，需在视频元素里指定controls属性，示例如下：
<video preload controls>
...
</video>
19. 正则表达式
借助新模式的属性，可直接在代码中插入正则表达式，示例如下：
<form method="post" action="">
<label for="username">create a username:</label>
<input id="username" type="text" name="username" placeholder="4 <> 10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}">
<button type="submit">Go</button>
</form>
新模式[A-Za-z]{4,10}只接受大小写字母，字符串最少4个字符，最多10个字符。
20. 检测浏览器对属性的支持
并非所有浏览器都支持这些属性，可通过两种方式判断浏览器是否能识别。一是使用Modernizr检测，二是创建并剖析元素以查看浏览器能力。例如，要确定浏览器是否支持pattern属性，可在页面添加JavaScript：
alert('pattern' in document.createElement('input')); // boolean;
这是确定浏览器兼容性的常用方法，jQuery库也利用了该技巧。上述代码创建了一个新的输入元素，确认pattern属性是否能被识别，能识别则浏览器支持该功能，否则不支持。也可使用如下代码：
<script>
if (!('pattern' in document.createElement('input'))) {
// do client/server side validation
}
</script>
需注意，这依赖JavaScript实现。
21. Mark元素
<mark>元素主要用于在页面中高亮显示需向用户突出重要性的文字，包裹在此标签里的字符串必须与用户当前行为相关。例如：
<h3>search results</h3>
<h6>They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>.</h6>
22. 何时使用<div>
仍然需要使用<div>标签。例如，想在一个元素里包裹一段代码，特别是为了内容定位，<div>是理想选择。但如果是包裹博客文章或页脚的链接列表，建议分别使用<article>和<nav>元素。