HTML5的和 CSS3终于来了，使用HTML5标签进行全新的战争已经开始了。所有这些技术是一个熟练的开发人员工作在等待合适的项目仅仅是工具。作为开发人员，我们不应该陷入哪些标记是做好的这种。相反，我们必须得到一个全新的思维修改我们的编码习惯，保持Web的可访问性。
既然HTML5的和CSS3已经开始慢慢变成工作进程中的一部分，并且将来会变成一种普及的技术，我们没有理由不现在开始使用它。毕竟，时间的证明， 未完成的规范也能顺利的实施，并且容易被误认为这是一个完整的W3C议案。这是一种进步并开始发挥作用。
所以今天我们将用这些新技术进行实验。在这篇文章的最后，您将学习到如何:
• 用优美兼容的技术去兼容传统浏览器。
• 使用改进后的新技术。
• 使用与HTML5的同时崛起的技术：Microformats。
• 让你对那些最令人兴奋的新功能的HTML5和CSS3功能有一种清晰的看法。
读这些文章的第一部分是一个好主意:
• HTML5 and The Future of the Web讲解HTML5的基本技术，介绍引入了新的元素和解释了新的标记语言的一些优点。
• HTML5 enabling script介绍一个使IE6能够进行HTML5标签渲染的方法。
• Understanding aside对新标签的误解进行解释。
在文章中我会认为你已经掌握HTML和CSS的基础知识。包括所有的“老派”标签的基本选择器和属性。
开始前…
在开始冒险是使用这些标签前，你必须了解一些事情。 HTML5的是并不适合每一个人。因此，你必须适当的选择如何以及在哪里使用它。使用正确的工具做正确的事情。
因此，如果你的网站是在严格的标准兼容的XHTML编码的话，那就没有必要升级到HTML5。
此外，还通过使用HTML5的代码，现在你的网站可能会遭到冷遇，因为很可能浏览器不认识这些标签。这也适用于其他软件，如screenreaders和搜索引擎。
最后，你必须考虑到，HTML5的仍然是需要一段时间才能普及，它可能是W3C做过的 “最开源”项目。随着巨大的反馈量和周围的炒作，目前的草案是必然的变化，不可能预测多少。
因此，如果你准备做使用HTML5，这种在将来变得更有意义的技术，不用害怕每一段代码都可能需要重新编写的话，可以继续往下阅读。
关于逐步加强和优雅降级
那么，这两个词的呢？优雅降级是一种广泛使用的术语，基本思想是利用最新的技术，然后再解决旧版浏览器兼容问题。我们每天都这样的：首先考虑FireFox，然后兼容IE浏览器。这是在实践中的优雅降级。
逐步加强指的是先考虑能力较差，过时的浏览器的，然后使用最新技术。我们也每天使用这一点。例如，大多数时候我们在编码的时候，我们开始写标签，然后应用一个外部CSS文件来定义样式。这是在实践中逐步增强。
这两种技术，我们使用了多年。现在，这些做法都需要发展的是，由于临近新的语言。如果你想进入这些方面均有较深，可以查看accessites.org相关文章。
1.设计
这是我们要通过编码得到样本布局:
一个被命名为S mashing HTML5 非常基本的布局!其中涉及的大部分内容，我们可以开始编码使用HTML5的。包括网页的名称和口号，菜单，突出显示（功能）区，一个列表，与一些外部链接的中，一个关于的box以及版权声明。
2.标签
这是我们的HTML文件框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body id="index" class="home">
</body>
</html>
几处比较突出的:
• 针对IE浏览器有三处不同。第一个包含html5 shiv代码，是直接指向Google代码，可以在所有版本IE中使用。第二个文件是为了更好的向后兼容性IE7以下浏览器的IE8.js。第三个就是一个CSS文件来修复IE6的Bug。
• 在<body>标签上使用一个“index”ID和一个“home”类。这是我在过去的一年，对于内部的过于复杂的网站一个编码开发习惯.
• 在这个 HTML5的文件我用的是XHTML 1.0语法。你也可以使用普通的HTML语法在这里，取决于你。
这是一个很基本的可能你以后会在HTML 5项目使用的开局。有了这个，我们就可以开始为我们分配标签布局的不同Section。
如果我们有一台网站设计X光机的，这将是我们网页的骨架:
头部
该布局的头部是就像你看到的那样简单。新<header>标签内容规范:
头元素了起到了介绍或导航辅助网站的作用。
相比来说它更合理来布局我们的头部了。我们还将使用<nav>标记。该规范内容如下：
nav元素为页面的一个部分，是其他网页链接或页面的某些部分的链接导航，并不是所有的页面上需要一个导航元素，只有在包含了导航内部的时候使用。
关于nav元素有很多争议，“主要的导航块”是不是一个非常有用的描述。但是，我们正在谈论我们的主要网站导航，没有比它更主要的了。所以使用了id和class在头部，如下：
<header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header><!-- /#banner -->
Featured 模块
下一步是featured 模块. 这里最好的标签是<aside>了，因为相关规范如下：
aside元素指的是一个网页的一个包含相关内容的部分，常被用作定义页面内容部分的侧边栏。这些部分往往用在印刷排版工具条。
看完了featured模块。现在，这个区块内其他东西。首先是<article>，所以沿着<aside>标签，我们应该用<article>。
我们也有两个连续标题（‘Featured Article’ and ‘HTML5 in Smashing Magazine!’），所以我们将使用另一个新的元素：<hgroup>。这是一个很好的标签，且正是我们在这里<h#>标签系列中分组需要用到的。
关于这个块的最后一个元素是Smashing Magazine logo在右边。在这里可以使用另外一个新标签：<figure>。这个标签是用来附上一些流动的内容，选择一个标题，这是自包含的，通常作为文档的主要流动布局的一个独立的单元。此标记允许我们使用一个<legend>标签在里面添加标题。也就是说，<figure>用于定义一组媒体内容以及它们的标题的。
最终，此模块的编码如下:
<aside id="featured" class="body"><article>
<figure>
<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
</figure>
<hgroup>
<h2>Featured Article</h2>
<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
</hgroup>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->
布局的 body部分
再往下是我们的document的body部分。由于这是一个通用的文档块和一节一节的内容专题分组，毫无疑问的可以使用<section>标签。
我们将使用比较老的<ol>标签，它用来表示一个有序列表。每个<li>应该有一个<article>标记，一个标题<header>，用<footer>表示相关信息和一个帖子内容用<div> 。
对于使用一个DIV原因很简单：我们将使用hAtom 0.1 Microformat，它需要的内容条目由一个元素包裹着。由于没有其他标签适用于这种情况（这不是一个部分，它不是一个完整的文章，它不是一个页脚，等等），我们将使用一个<div>因为它本身不提供价值并保持语义的标记尽可能的清晰。
代码如下所示:
<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
</header>
<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
10th October 2005
</abbr>
<address class="vcard author">
By <a class="url fn" href="#">Enrique Ramírez</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
...
</article></li>
<li><article class="hentry">
...
</article></li>
</ol><!-- /#posts-list -->
</section><!-- /#content -->
对于强大的：是的，我没有使用<time>元素。这是比较新的标签，不过不兼容当前的microformat。因为我实在使用hAtom，它指向了一个无效的microformat都和一个难以理解的标签。如果你不使用microformat，我建议使用<time>代替。
附加信息块
附加信息块是我们的文档另一部分。你可能会一直在考虑是用<aside>还是<section>标签。最后，这个部分不能被认为是从主要内容是分开的，因为它包含的blogroll链接和一些网站的社交信息。因此，<section>元素是更为合适。
在这里，我们还得用到div。对于样式的需求和分组的缘故，在这里我们可能会增加两个div：对blogroll的部分，为社交部分。
至于其余的区块有没有太多需要考虑得。这是日常<ul>，这最终可能看起来像这样的链接:
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
关于和页脚部分
页脚并没有什么难点。我们将使用全新的<footer>标签来包装都与版权有关的资料，因为该规范内容为:
页脚元素用作表示了页脚内容。页脚通常包含有关其部分信息，如作者，相关文件的链接，版权资料，等等。
我们将使用一个<address>标记，它包含了它最近的<article>或<body>的联系方式。我们还将使用hCard Microformat提高语义值。对于版权的信息，我们会去用一个简单的<p>标签这样的代码:
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Smashing Magazine</a></strong>
<span class="role">Amazing Magazine</span>
</span><!-- /.primary -->
<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
<span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
</address><!-- /#about -->
<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->
总结起来
完整的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body id="index" class="home">
<header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header><!-- /#banner -->
<aside id="featured" class="body"><article>
<figure>
<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
</figure>
<hgroup>
<h2>Featured Article</h2>
<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
</hgroup>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->
<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
</header>
<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
10th October 2005
</abbr>
<address class="vcard author">
By <a class="url fn" href="#">Enrique Ramírez</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
...
</article></li>
<li><article class="hentry">
...
</article></li>
</ol><!-- /#posts-list -->
</section><!-- /#content -->
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Smashing Magazine</a></strong>
<span class="role">Amazing Magazine</span>
</span><!-- /.primary -->
<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
<span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
</address><!-- /#about -->
<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->
</body>
</html>
Ok，这是不是可读性很好呢？这比一大堆Div语义性更强吧。
原文：Coding A HTML 5 Layout From Scratch
作者：Enrique Ramirez
翻译：莫文
扫一扫
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
