在maka上制作HTML5的教程
HTML 5 要么是迈向创建更具语义化网络的重要一步，要么会因一系列不完善的标签和标记的拼凑，使网络陷入困境。
争论双方面临的问题是，在实际环境中，使用 HTML 5 的站点寥寥无几，因此目前所知晓的问题的理论解决方案，在很大程度上仍有待实践检验。即便如此，我们还是能轻易发现下一代网络标记工具的益处和潜在问题。
一、内容概述
- HTML 5 的独特之处
- 易于记忆的文档类型
- 基本语义结构
<header><nav><section><article><aside><footer>
- 标签组合运用
- 为新元素编写样式
- 兼容旧版浏览器
- 是否使用 HTML 5 的思考
二、HTML 5 的独特之处
首先，我们所说的 HTML 5 具体指什么呢？理论上，它涵盖了所有方面，包括新的语义结构标签（如 <canvas>）、API 规范（如离线存储）以及新的内联语义标签。不过，考虑到实际情况（主要是浏览器支持问题），我们这里主要聚焦于结构标签。像 <canvas>、离线存储、本地视频或地理定位 API 都非常出色，但并非所有浏览器都能一致支持这些功能。
或许你会说：“大多数浏览器也不支持新的结构元素啊！”确实如此，但大多数浏览器都愿意接受你创建的任何标签。即便像 IE6 这样的老浏览器也能处理新标签，只是如果你想用 CSS 设置样式，就需要借助一点 JavaScript。
在为新标签设置样式时，要记住一点：未知标签在大多数浏览器中没有默认样式，并且它们被视为行级元素。不过，由于 HTML 5 的大多数新标签具有结构性，我们希望它们表现出块级元素的特性。解决办法是在 CSS 样式中添加 display:block;。
为了更好地了解当今 HTML 5 的新特性，下面我们就开始使用一些新的结构元素。
三、易于记忆的文档类型
创建 HTML 5 文档的首要任务是使用新的文档类型。如果你还清晰记得 HTML 4 或 XHTML 1.x 的文档类型，那你可真是个厉害的人。以往，每次新建页面时，我们都得打开一个旧文件，复制并粘贴文档类型定义，这着实令人苦恼。
这也是我们青睐新的 HTML 5 文档类型的原因。新的文档类型如下：
<!DOCTYPE html>
是不是很容易记忆？它简单易懂，而且不区分大小写。
这种设计旨在停止 HTML 版本化，使向后兼容变得更加容易。从长远来看，其效果如何尚不确定，但至少它节省了我们输入文档类型的时间。
四、基本语义结构
我们已经将页面定义为 HTML 5 文档，目前一切顺利。那么，那些我们听说过的新标签究竟是什么呢？
在深入了解新标签之前，先想想一般网页的结构，大致如下：
<div id="header">...</div>
<div id="nav">...</div>
<div id="content">...</div>
<div id="footer">...</div>
这种结构用于展示没问题，但如果我们想了解页面元素的具体内容，就有些困难了。
在上述例子中，我们为所有结构 <div> 添加了 ID。这在有经验的设计师中很常见，目的有两个：一是 ID 可以作为锚点，用于为页面的特定段落应用样式；二是 ID 充当基本的伪语义结构。不过，当每个站点的 ID 名称不同时，高级解析器很难准确猜测其含义。
这就是新结构标签出现的原因。
当意识到这些 ID 成为一种惯例后，HTML 5 的开发者进一步将其中一些元素变成了独立的标签。以下是 HTML 5 中一些新标签的简要介绍：
1. <header>
<header> 标签设计用于作为章节或整个网页介绍信息的容器。它可以包含从页面顶部的典型标志或标语，到章节的标语和开场白等各种内容。如果你还在使用 <div id="header">，可以用 <header> 替换。
2. <nav>
<nav> 元素显然是导航元素。当然，对于什么算作导航存在一些争议，一般有基本的站点导航，某些情况下还可能有页面导航元素。HTML 5 的开发者 WHATWG 最近正在修改 <nav> 的定义，以说明如何在同一页面中使用两次。
更多关于 <nav> 的信息以及关于 HTML 5 的激烈讨论，可参考 Jeffrey Zeldman 关于 nav 元素的文章。
如果你还在使用 <div id="nav"> 来包含页面导航，可以用简洁的 <nav> 标签替换。
3. <section>
<section> 可能是新标签中最模糊的一个。根据 HTML 5 定义，一个章节是内容的主题集合，通常位于 <header> 标签之后、<footer> 标签之前。不过，如果需要，<section> 也可以相互嵌套。
在上述例子中，标记为 “content” 的 <div> 是转换为 <section> 的不错选择。此外，在该 <section> 内，根据内容还可以添加更多的 <section>。
4. <article>
根据 WHATWG 的说明，<article> 元素可以包含“组成文档或站点独立部分的一段内容，例如杂志或新闻文章、博客条目等”。
要记住，一个页面中可以有多个 <article> 标签。例如，博客首页可能有最新的十篇文章，每篇文章都包含在一个 <article> 标签内。<article> 也可以通过使用 <section> 标签分为多个段落，但在规划结构时需要更加谨慎，否则可能会导致标签混乱。
5. <aside>
<aside> 是另一个比较模糊的标签，用于“与文档主要正文流内容无关”的内容。这可能表示附加评论、内联脚注、引用、注解或像本文右侧常见的边栏内容。
根据 WHATWG 的说明，<aside> 似乎适用于所有这些情况，尽管边栏中的引用和标签云有很大不同。
6. <footer>
<footer> 的用途应该很明显，不过你可能不清楚可以有多个页脚。也就是说，除了大多数页面底部的主页脚外，段落也可以有页脚。
五、标签组合运用
让我们使用新标签重新编写之前的例子：
<header>
<h1>My Article</h1>
</header>
<nav>...</nav>
<section>
<article>
<header>
<h2>Article Title</h2>
</header>
<p>Article content...</p>
<footer>
<p>Article footer content...</p>
</footer>
</article>
</section>
<footer>
<p>Page footer content...</p>
</footer>
是不是非常清晰易懂？需要注意的是，我们可以在 <header> 标签中包含 <h1>My Article</h1> 标题。我没有这样做是因为 <h1> 元素已经表达了标题的含义，但如果文章顶部还有发布日期、署名或其他数据，添加一个 <header> 容器标签是个不错的选择。
同时，我们还可以在 <article> 元素下添加第二个 <footer> 元素，用于包含翻页导航、相关文章等内容。
六、为新元素编写样式
在大多数浏览器中，为新标签应用样式表的方法与平常一样，只需简单定义样式即可。但要确保为每个元素添加 display:block; 规则，不过随着时间推移，当浏览器开始标准化并支持新元素后，就不需要这样做了。
例如，为 <header> 应用一些样式：
header {
display: block;
background-color: #f0f0f0;
padding: 10px;
}
记住，你仍然可以为这些标签添加类和 ID 属性。如果你想单独为一个导航设置样式，可以轻松地为该标签添加类或 ID，如下所示：
<nav class="main-nav">...</nav>
然后应用样式：
.main-nav {
display: block;
background-color: #333;
color: white;
}
七、兼容旧版浏览器
但别忘了，IE 浏览器怎么办呢？上述样式在 IE6 中根本无法正常工作。如果你仍需支持像 IE6 这样的旧版浏览器，有一个解决办法。IE6 解析和显示这些标签没问题，但无法对它们应用 CSS。解决办法是使用一点 JavaScript。
我们只需让 IE 使用 createElement 方法创建 HTML 5 标签并设置样式。在 HTML 5 文件的 <head> 标签内添加以下内容，或者将其保存到一个特定文件中并引用：
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
你可能会想：“你根本没有为那个 <script> 标签定义 MIME 类型。”在 HTML 5 中，你不需要这样做。在 HTML 5 中，所有脚本都默认是 type="text/javascript"，所以没必要用属性把 <script> 标签弄得杂乱无章（除非你的脚本不是 JavaScript）。
虽然解决了 IE 的问题，但我们还没完全脱离困境。事实证明，Gecko 渲染引擎存在一个 bug，导致 Firefox2 和 Camino 的某些版本在处理这些标签时出现问题。
有两种方法可以处理这个 bug，但都不太理想。更多详细信息可查看 HTML5doctor 的这篇文章，该文章还附带了一个让所有 HTML 5 元素都能正常工作的便捷脚本。
八、是否使用 HTML 5 的思考
现在你已经了解了如何使用 HTML 5，但你是否会选择使用它呢？这需要综合考虑多方面因素，如目标受众的浏览器使用情况、项目的需求和兼容性要求等。在实际应用中，权衡利弊后再做决定。