上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
2.4 综合案例
旧的HTML页面都是用div元素，再配上适当的样式表，但<div>元素的问题在于，它本身不反映与页面相关的任何信息。而HTML5的页面就是将这些<div>元素替换为具有描述性的语义元素。下面的例子包含了HTML5中用于描述文档结构的主要的语义元素，语义元素的使用和它们标注的内容的含义密切相关，理解了它们的含义，就能灵活地使用它们。
例题2-21：用语义化标记重定义博客。
在博客应用中，有大量内容需要使用结构化标记进行组织。博客包括了头部、尾部、多种导航（博文归档链接、至其他博客或网站的链接列表和内部链接）、博文和回帖。
我们的设计方案如图2-14所示。这是一个非常典型的博客结构，结构本身并没有任何新意，唯一不同的是，我们将使用语义化标签来代替以往大量使用的<div>标签。
图2-14 典型的博客结构布局
其整个布局结构如下面代码所示：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用语义化标记重定义博客布局</title>
</head>
<body>
<header class="header">header</header>
<nav class="nav">nav</nav>
<section class="section">
<article class="article">article</article>
<aside class="aside">aside</aside>
</section>
<footer class="footer">footer</footer>
</body>
</html>
运行上面的代码，你会发现，其实在效果上完全和图2-14显示的不一样，这是为什么呢？请读者在后面的学习中找到问题的答案吧。