3.3.2 大纲的编排规则(2)
5. 网页编排示例
基于以上讲解过的知识点,下面来看看应该怎样编排网页的内容。代码清单3-31为一个标准博客网页的示例,这个示例中有一个标准博客网页应具备的基本要素,只缺少为了使用样式而补充添加的div元素。
代码清单3-31 网页编排示例
<!DOCTYPE html>
<head>
<title>网页编排示例</title>
<meta charset="UTF-8">
</head>
<body>
<!-- 网页标题 -->
<header>
<h1>网页标题</h1>
<!-- 网站导航链接 -->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="help.html">帮助</a></li>
</ul>
</nav>
</header>
<!-- 文章正文 -->
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<!--文章评论 -->
<section class="comments">
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</section>
</article>
<!-- 版权信息 -->
<footer>
<small>版权所有:陆凌牛</small>
</footer>
</body>
在这个示例中,使用了嵌套article元素的方式,将关于评论的article元素嵌套在了主article元素中。在HTML 5中,推荐使用这种嵌套article元素的方式。