实例讲解html5制作一个网站
互联网科技发展速度惊人，稍不留神就可能跟不上步伐。HTML5 的变化和更新让不少人感到压力，本文将介绍一些基本且必要的 HTML 技巧。
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>
在 HTML5 之前，<small> 元素可用于创建与 logo 密切相关的副标题。如今，它被重新定义，用于代表小字或其他边注，如网站底部的版权声明。
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> Watch video of self </li>
</ul>
</body>
</html>
也可按第 5 条技巧，将 contenteditable 属性不使用引号：
<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 创建文本框的占位符，设置 value 属性不太实用，用户删除文本后输入框会再次为空。占位符属性弥补了这一不足：
<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> 标签定义页面头部和脚部：
<div id="header">
…
</div>
<div id="footer">
…
</div>
<div> 本身无语义结构，即使设置 ID 也如此。在 HTML5 中，可使用 <header> 和 <footer> 元素替代：
<header>
…
</header>
<footer>
…
</footer>
需注意，这两个元素代表其容器，不要与网站的头部和脚部概念混淆。
11. IE 和 HTML5
IE 理解新的 HTML5 元素有困难，为确保这些元素以块级元素正确显示，需定义样式：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
即便如此，IE 仍可能无视这些格式，还需使用 JavaScript 解决：
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 解决自动对焦问题，可直接使用 autofocus 属性：
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
15. 音频支持
HTML5 提供 <audio> 元素，无需依赖第三方插件提供音频。但不同浏览器对音频格式支持不同，Mozilla 希望看到 .ogg 文件，Webkit 浏览器只支持 .mp3 扩展名，IE 不支持，Opera 10 或更低版本只支持 .wav 文件。为保证兼容性，需提供多种格式：
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
16. 视频支持
新浏览器支持 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;
若支持，浏览器能识别该属性，否则不支持。也可通过以下代码进行条件判断：
<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> 元素。