如果你现在询问web开发的资深人士对于HTML5的看法，你得到的答案可能是两个极端。”HTML 5是让网络更语义化和开放的重要步伐”，或者“HTML5是在用一系列不完整的标记让web陷入困境”。
为什么会有这样的结果。其实归根结底是因为，很少有站点在自然情况下使用HTML 5，所以目前所认识到的理论方案仍然在很大程度上来自于理想，并且未经考验。
现在，我们就开始自己用HTML5动手制作一个网站，让你亲身试验一下，HTML5到底是“福音”还是“灾难”。
第一，我们想通过HTML 5表达什么？理论上，我们表达所有的事——新的语义结构标签，例如canvas或者离线储存等API规范，以及新的内联语义标签。但是，我们把实际的原因仅仅局限于结构标签。canvas，离线储存，本地视频或者地理定位API都很绝妙，然而他们还不能被所有浏览器一致的支持。
人们常说“大多数浏览器也都不支持新的结构元素！”这是真的，但他们中的绝大多数将会很乐意去接受你想要创建的任何标签，并且即将默认支持。甚至IE6也可以处理新标签，尽管如果你想要使用CSS设置样式并且需要一点JavaScript的帮助。
当你对HTML5新标签设置CSS时，你需要注意，那就是未知标签在大部分浏览器中没有默认样式，或者默认为是简单的行级元素。虽然如此，由于大部分HTML 5的新标签可以构造，我们将让他们拥有块级元素的行为。解决方法是在CSS样式中包含display:block;。
为了帮助你了解HTML 5的一些新东西，我们马上开始使用一些新的结构元素。
我们创建HTML 5文档一件很重要的事情就是使用新的文档类型（DOCTYPE）。目前，如果你还清楚的记得HTML 4或者XHTML 1.x的文档类型，你真是一个聪明人，因为他们是如此复杂。每当我们新建一个页面，我们必须打开一个旧的文件，剪切并粘贴文档类型定义。
这真是痛苦，也是为什么我们喜欢新的HTML 5文档类型。因为在HTML5中，你只需要：
<!DOCTYPE html>
不难记,简单并且容易理解,不区分大小写。
这个构想是取消HTML版本化，使其向后兼容变得更容易。从长远看是否成功不得而知，但这至少节省了你输入的时间。
我们已经将我们的页面定义为HTML 5文档。到目前为止，一切都不错。那么，这些我们一直听说的新标签到底是什么？
在我们研究新标签前，想想你一般网页的结构，这点不需要我再举例了：
这对于展示用途很好，但如果我们想要知道一些关于页面元素包含什么的问题，这又怎么办呢？
上面的例子中，我们为我们所有的结构div添加了ID。这在有见识的设计师中是很平常的事。目 的有两个方面，首先，ID提供了可以能用于给页面的特殊段落应用样式的锚，其次，ID充当基本的伪语义结构。高明的解析器将会查看标签的ID属性，并尝试 去猜测他们的含义，但当每个站点的ID名称不同的时候很难。
这就是新结构标签到来的理由。
当认识到这些ID成为了惯例，HTML 5的缔造者们更进一步，使这些元素中的一部分变成他们独立的标签。这儿有一个HTML 5中生效的新标签的快速概要：
头部标签被设计作为关于一个章节或者一整张网页介绍信息的容器。<header> 标签可以包含从你位于大多数页面顶部的典型标志或者标语，到介绍一个章节的标语和开场白的任何东西。如果你还在你的页面里使用<div id=”header”>，那可以使用<header>替换
nav元素非常明显，这是你的导航元素。当然什么被算为导航是有一些争议的，有一个基本的站点 导航，但一些情况下还可能有页面导航元素。HTML5的缔造者WHATWG最近在修改<nav>的解释，来表现怎样在同一个页面使用两次。
如果你还在使用<div id=”nav”>标签来包含你的页面导航，你可以使用简洁的<nav>标签来替换。
Section可能是新标签中最模糊的。根据HTML 5定义，一个章节是一个内容的主题集合，通常在header标签后，在footer标签前。但是如果 需要，section也可以相互嵌套。
在我们上面的例子里，被“content”标记的div就是一个变为section的很好的选 择。另外在那个section内，根据内容，我们可以增加section。
根绝WHATWG的注释，article元素可以包含“组成文档或站点独立部分的一段内容；例 如，杂志或者新闻的文章，或者博客条目。”
记住一个页面里可以有多个article标签；例如一个博客首页可能有最新的十篇文章，每一篇 包含在一个article标签内。Article也可以通过使用section标签分为多个段落，然而当你计划你的结构时需要稍微仔细一些，否则你容易引 起以一些难看的标签大杂烩结尾的情况。
另一个相当模糊的标签，aside元素用于“与组成文档主要的正文流内容无关的”内容。那表示 一条附加的评论，内联的脚注，引用，注解或者像你看到的在这篇文章右边的更多典型的边栏内容。
根据WHATWG的注释，看起来<aside>可以用于所有的这些情况，尽管你边 栏里的引用和标签云有着很大的不同。
没人说HTML 5是完美的！
Footer的用处也应该是很明显的，除了可能你不清楚可以拥有多个脚标。换句话说，除了通常 在大多数页面底部看到的主脚标，段落也可以含有脚标。
让我们使用新标签重新编写我们原来的例子：
<!DOCTYPE html>
<html>
<head>…stuff..</head>
<body><header><h1>My Site</h1></header>
<nav>
<ul>
<li>Home</li><li>About</li><li>Contact</li>
</ul>
</nav>
<section><h1>My Article</h1>
<article>
</section>
<footer><p>…</p></footer>
<body>
</html>
非常清楚，并且容易理解，不是么？一些注释：我们可以在header标签中包含我们 的<h1>My Article</h1>标题。我没有这样做，因为h1元素已经表达了标题的含义，但如果你还有发布日期，署名或者其他数据在你文章的顶部， 为标签集添加一个header容器标签是一个很好的选择。
同时注意我们可以在article元素下添加第二个footer元素来包含诸如翻页导航，相关 文章或者其他内容。
在大多数浏览器中，所有你需要做的就是像你通常做的那样，为在新标签上应用样式表，简单的定义 你的样式。但请确认为每一个元素添加了display:block;规则，无论如何，从现在开始。经过一段时间后，当浏览器开始标准化，并支持新元素后， 那就不必要了。
例如，让我们在我们的header里应用一些样式：
header{
display:block;
font-size:36px;
font-weight:blod;
}
记住，你仍然可以给这些标签添加类和ID属性。所以，如果你想要单独为一个导航设置样式，你可 以轻易的给这个标签添加一个类或者样式，就象这样：=
<nav class = “main-menu”>
然后你可以应用一个样式：
nav.main-menu{
font-size:18px;
}
但等一下，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>
我知道你在想什么：“你根本没有为那个脚本标签定义一个MIME类型。”
你根本不需要在HTML 5做这些事情。在HTML 5中，所有的脚本都被假定为type=”text/javascript”，所以没有必要让属性把你的脚本标签搞得乱七八糟（除非你的脚本并不是 JavaScript）。
这解决了IE的问题，但我们并没有摆脱困境。目前被证明Gecko渲染引擎有一个bug，导致 了Firefox2和Camino的一些版本在这些标签上卡住。
这儿有两个方法来处理这个bug，没有一个是理想的。
记住，尽管Firefox 2的使用率很快在所有网站流量中降到了10%以下，但单纯忽略这个bug可能还是需要根据你网站的访问者来定。
简短的回答是：我们会。
复杂一点的是：那要看站点了。如果你指责重新制作CNN主页，好吧，你可能会有一点抗拒，直到 浏览器的支持变好些。但如果你要给你的博客改版，我们支持你。
但是，如果IE的缺点阻止你了，这样考虑吧：就连Google也在他们的主要搜索页面上使 用了HTML 5的文档类型。就算如果你不使用所有新的结构标签，你可以至少利用一下简洁的脚本声明。
翻译自英文资料：http://www.webmonkey.com/2010/02/building_web_pages_with_html_5/
讲师:don 浏览数:51 
相关课程: