构建页面

高效网页的核心是结构良好、语义化的HTML。下面就来具体介绍如何构建本章案例的具体结构，操作步骤如下。

第1步，恰当地使用article、aside、nav、section、header、footer 和div 等元素将页面划分成不同的逻辑区块。本例创建了一个虚构博客，页面结构要点说明如下：

• 使用三个div，其中一个将整个页面包起来，另外两个将两部分主体内容区域包起来以便应用样式设计。
• 用作报头的 header，包括标识、社交媒体网站链接和主导航。
• 划分为多个博客条目 section 元素的main 元素，其中每个section 元素都有自己的页脚。
• 附注栏 div（同时使用了 article 和aside），提供关于博客作者和右栏（应用CSS 之后就有了）博客条目的链接。
• 页面级 footer元素，包含版权信息等内容。

第2步，按照一定的顺序放置内容，确保页面在不使用CSS 的情况下也是合理的。例如，首先是报头，接着是主体内容，然后是一个或多个附注栏，最后是页面级的页脚。将最重要的内容放在最上面，对于智能手机和平板电脑等小屏幕用户来说，不用滚动太远就能获取主体内容。此外，搜索引擎“看到”的页面也类似于未应用CSS的页面，因此，如果将主体内容提前，搜索引擎就能更好地对网站进行索引。这同样也会让屏幕阅读器用户受益。

第3步，以一致的方式使用标题元素（h1～h6），从而明确地标识页面上这些区块的信息，并对它们按优先级排序。

第4步，使用合适的语义标记剩余的内容，如段落、图和列表。

第5步，如果有必要，使用注释来标识页面上不同的区域及其内容。根据个人习惯，选用一种不同的注释格式标记区块的开始（而非结束）。

页面基本框架结构代码如下所示。

<div class="page"> 
    <!-- ==== 开始报头 ==== -->
    <header class="masthead" role="banner">
        <p class="logo"><a href="/"><img /></a></p>
        <ul class="social-sites">[社交图片链接]</ul>
        <nav role="navigation">[主导航链接列表]</nav>
    </header>
    <!-- 结束报头 -->
    <div class="container"> 
        <!-- ==== 开始主体内容 ==== -->
        <main role="main">
            <section class="post">
                <h1>[文章标题]</h1>
                <img  class="post-photo-full" />
                <div class="post-blurb">
                    <p>[正文内容]</p>
                </div>
                <footer class="footer">[博客条目页脚]</footer>
            </section>
            <section class="post">
                <h1>[文章标题]</h1>
                <img  class="post-photo" />
                <div class="post-blurb">
                    <p>[正文内容]</p>
                </div>
                <footer class="footer">[博客条目页脚]</footer>
            </section>
            <nav role="navigation">
                <ol class="pagination">[链接列表项]</ol>
            </nav>
        </main>
        <!-- 结束主体内容 --> 
        <!-- ==== 开始附注栏 ==== -->
        <div class="sidebar">
            <article class="about">
                <h2>关于自己</h2>
            </article>
            <div class="mod">
                <h2>我的经历</h2>
                ... [映射图像] ... </div>
            <aside class="mod">
                <h2>热门职位</h2>
                <ul class="links">[链接列表项]</ul>
            </aside>
            <aside class="mod">
                <h2>最近分享</h2>
                <ul class="links">[链接列表项]</ul>
            </aside>
        </div>
        <!-- 结束附注栏 --> 
    </div>
    <!-- 结束容器 --> 
    <!-- ==== 开始页脚 ==== -->
    <footer role="contentinfo" class="footer">
        <p class="legal"><small>[版权信息]</small></p>
    </footer>
    <!-- 结束页脚 --> 
</div>
<!-- 结束页面 -->

在上面结构中，使用section元素来标记每个包含部分博文的条目。如果它们是完整的博文条目，就应该使用article来标记它们，例如，在单独的、完整的博客文章页内。对它们使用article 替代section 也可以，只要代表这一段代码可以成为独立的内容。

第6步，保存文档，在浏览器中预览，则显示效果如图17.1所示，除了浏览器默认样式以外并没有设置其他样式。这个页面是一栏的。由于它的语义结构非常好，页面是完全可用，且可理解的，只是有一点朴素。

图1 页面结构默认显示效果

【注意】

不一定要在应用CSS 之前就标记好整个页面。实践中，很少先将一个区块的HTML 写好，再为其编写一些或全部的CSS，然后再对下一个区块重复这一过程。处理方式取决于个人习惯。