构建文档结构
除了定义页面的各个部分（如“段落”或“图像”）之外，HTML 还拥有许多块级元素，用于定义您网站的区域，例如“页眉”、“导航菜单”或“主要内容列”。本文将探讨如何规划基本的网站结构，并编写 HTML 来表示此结构。
| 预备知识 | 具备 基本 HTML 语法 中涵盖的基本 HTML 知识。文本级语义，例如 标题和段落 以及 列表。 |
|---|---|
| 学习成果 |
|
文档的基本部分
网页看起来可能会大相径庭，但它们都倾向于共享相似的标准组件，除非页面显示的是全屏视频或游戏、是某种艺术项目的一部分，或者结构很差。
- 头
-
通常顶部会有一个大条幅，其中包含大标题、徽标，可能还有标语。这通常在网站的不同页面之间保持不变。
-
指向网站主要部分的链接；通常由菜单按钮、链接或选项卡表示。与页眉一样，此内容通常在不同网页之间保持一致 — 网站上不一致的导航只会导致用户感到困惑和沮丧。许多网页设计师认为导航栏是页眉的一部分，而不是一个独立的组件，但这并非强制要求；事实上，一些人还认为将两者分开更有利于可访问性，因为屏幕阅读器在两者分开的情况下可以更好地读取这两个功能。
- 主要内容
-
中心的一个大区域，包含给定网页的大部分独特内容，例如，您想观看的视频，或您正在阅读的主要故事，或您想查看的地图，或新闻头条等。这是网站中唯一肯定会因页面而异的部分！
-
一些周边信息、链接、引用、广告等。通常，这与主要内容中包含的内容相关（例如在新闻文章页面上，侧边栏可能包含作者简介或相关文章链接），但也有些情况下您会发现一些重复元素，如辅助导航系统。
-
页面底部的一个条幅，通常包含细则、版权声明或联系信息。这是一个放置公共信息（如页眉）的地方，但通常这些信息对网站本身来说不是关键的或次要的。页脚有时也用于SEO目的，通过提供链接以便快速访问热门内容。
一个“典型网站”可以这样构建
注意：上图展示了文档的主要部分，您可以用 HTML 定义它们。然而，这里显示的页面外观——包括布局、颜色和字体——是通过对 HTML 应用CSS 来实现的。
用于构建内容的 HTML
上面显示的示例并不美观，但它非常适合说明典型的网站布局示例。有些网站有更多的列，有些则复杂得多，但您明白这个意思。使用正确的 CSS，您可以使用几乎任何元素来包裹不同的部分，并使其看起来符合您的要求，但如前所述，我们需要尊重语义并为正确的工作使用正确的元素。
这是因为视觉效果并不能说明全部。我们使用颜色和字体大小来吸引有视力的用户注意内容中最有用的部分，例如导航菜单和相关链接，但对于视力受损的人来说，像“粉色”和“大字体”这样的概念可能不是很有用，又该如何处理呢？
注意：大约 8% 的男性和 0.5% 的女性是色盲；或者换句话说，大约每 12 名男性中就有 1 名，每 200 名女性中就有 1 名。盲人及视力受损者约占世界人口的 4-5%（2015 年，有 9.4 亿人有不同程度的视力损失，而总人口约为 75 亿）。
在你的 HTML 代码中，你可以根据内容的功能性来标记内容部分——你可以使用明确表示上述内容部分的元素，辅助技术如屏幕阅读器可以识别这些元素并帮助完成“查找主导航”或“查找主要内容”等任务。正如我们本课程前面提到的，没有为正确的工作使用正确的元素结构和语义会带来许多后果。
为了实现这种语义标记，HTML 提供了专用的标签，您可以用来表示这些部分，例如：
探索我们示例的代码
上面看到的例子由以下代码表示（您也可以在我们的 GitHub 存储库中找到该示例）。我们希望您查看下面的列表，了解构成视觉输出每个部分的组件。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My page title</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- The main header used across all the pages of our website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- A Search form: another common non-linear
way to navigate through a site. -->
<form>
<input type="search" name="q" placeholder="Search query" />
<input type="submit" value="Go!" />
</form>
</nav>
<!-- Our page's main content -->
<main>
<!-- An article -->
<article>
<h2>Article heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
congue enim, ut porta lorem lacinia consectetur.
</p>
<section>
<h3>Subsection</h3>
<p>
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut
gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id
dolor.
</p>
<p>
Pelientesque auctor nisi id magna consequat sagittis. Curabitur
dapibus, enim sit amet elit pharetra tincidunt feugiat nist
imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed
odio eros.
</p>
</section>
<section>
<h3>Another subsection</h3>
<p>
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
soclis natoque penatibus et manis dis parturient montes, nascetur
ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at
sem facilisis semper ac in est.
</p>
<p>
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
ultricied. Curabitur ornare, ligula semper consectetur sagittis,
nisi diam iaculis velit, is fringille sem nunc vet mi.
</p>
</section>
</article>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well…</a></li>
</ul>
</aside>
</main>
<!-- The footer that is used across all the pages of our website -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>
花一些时间仔细阅读并理解代码——代码中的注释也应该能帮助您理解它。在这篇文章中，我们不要求您做更多的事情，因为理解文档布局的关键是编写一个健全的 HTML 结构，然后用 CSS 进行布局。我们将等到您开始学习 CSS 布局作为 CSS 主题的一部分时再进行。
HTML 布局元素详解
详细了解所有 HTML 分区元素的整体含义是很有益的——这是您随着 Web 开发经验的增长而逐步掌握的。您可以通过阅读我们的HTML 元素参考找到许多详细信息。目前，您应该努力理解以下主要定义：
<main>用于此页面独有的内容。每页只使用一次<main>，并将其直接放置在<body>内部。理想情况下，它不应嵌套在其他元素中。<article>包含一个相关内容块，它可以在没有页面其余部分的情况下独立存在（例如，一篇独立的博客文章）。<section>与<article>类似，但它更侧重于将页面中构成单一功能（如迷你地图，或一组文章标题和摘要）或主题的单一部分组合在一起。最佳实践是每个部分都以标题开头；另请注意，您可以将<article>分解为不同的<section>，或者将<section>分解为不同的<article>，具体取决于上下文。<aside>包含与主要内容没有直接关系但可以间接提供相关信息的附加内容（词汇表条目、作者简介、相关链接等）。<header>表示一组介绍性内容。如果它是<body>的子元素，则它定义网页的全局页眉，但如果它是<article>或<section>的子元素，则它定义该部分的特定页眉（请勿将其与标题和标头混淆）。<nav>包含页面的主要导航功能。辅助链接等不会放在导航中。<footer>表示页面的一组结尾内容。
以上提到的每个元素都可以点击，以阅读“HTML 元素参考”部分中对应的文章，提供更多关于每个元素的详细信息。
非语义包装器
有时您会遇到无法找到理想的语义元素来将某些项目组合在一起或包装某些内容的情况。有时您可能只想将一组元素组合在一起，以便用一些CSS或JavaScript将它们作为一个实体来影响。对于这种情况，HTML 提供了<div>和<span>元素。您应该优先将它们与合适的class属性一起使用，以便为它们提供某种标签，从而可以轻松定位。
<span> 是一个内联非语义元素，只有在您想不到更好的语义文本元素来包装内容，或者不想添加任何特定含义时才应使用。例如：
<p>
The King walked drunkenly back to his room at 01:00, the beer doing nothing to
aid him as he staggered through the door.
<span class="editor-note">
[Editor's note: At this point in the play, the lights should be down low].
</span>
</p>
在这种情况下，编辑的注释只是为戏剧导演提供额外的指导；它不应该具有额外的语义含义。对于有视力的用户，CSS 可能会用于将注释与正文略微分开。
<div> 是一个块级非语义元素，只有在您想不到更好的语义块级元素来使用，或者不想添加任何特定含义时才应使用。例如，想象一个购物车小部件，您可以在电子商务网站上随时选择调出它：
<div class="shopping-cart">
<h2>Shopping cart</h2>
<ul>
<li>
<p>
<a href=""><strong>Silver earrings</strong></a>: $99.95.
</p>
<img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
</li>
<li>…</li>
</ul>
<p>Total cost: $237.89</p>
</div>
这并不是一个真正的 <aside>，因为它不一定与页面的主要内容相关（您希望它在任何地方都可见）。它甚至不特别需要使用 <section>，因为它不属于页面的主要内容。所以在这种情况下，使用 <div> 是可以的。我们添加了一个标题作为路标，以帮助屏幕阅读器用户找到它。
警告： div 使用起来非常方便，以至于很容易过度使用。由于它们不带任何语义价值，它们只会使您的 HTML 代码变得混乱。请注意仅在没有更好的语义解决方案时才使用它们，并尽量减少它们的使用，否则您将难以更新和维护您的文档。
换行符和水平线
<br>：换行符元素
<br> 在段落中创建换行符；它是强制在需要一系列固定短行（例如邮政地址或诗歌）的情况下保持严格结构的唯一方法。例如：
<p>
There once was a man named O'Dell<br />
Who loved to write HTML<br />
But his structure was bad, his semantics were sad<br />
and his markup didn't read very well.
</p>
如果没有 <br> 元素，段落将以一长行呈现（正如我们本课程早些时候所说，HTML 会忽略大多数空白）；有了代码中的 <br> 元素，标记将呈现如下：
<hr>：主题分隔符元素
<hr> 元素在文档中创建一条水平线，表示文本中的主题变化（例如主题或场景的变化）。在视觉上它看起来只是一条水平线。例如：
<p>
Ron was backed into a corner by the marauding netherbeasts. Scared, but
determined to protect his friends, he raised his wand and prepared to do
battle, hoping that his distress call had made it through.
</p>
<hr />
<p>
Meanwhile, Harry was sitting at home, staring at his royalty statement and
pondering when the next spin off series would come out, when an enchanted
distress letter flew through his window and landed in his lap. He read it
hazily and sighed; "better get back to work then", he mused.
</p>
将渲染如下
构建一个基本网站
规划单个网页结构之后的下一个阶段是规划整个多页网站的结构，包括它们应如何排列和相互链接以获得最佳用户体验。这被称为信息架构。
在一个大型、复杂的网站中，这个过程需要大量的规划，但对于一个只有几个页面的基本网站来说，这可能是一个快速而有趣的练习。
这个过程可能看起来像这样
-
您会有一些大多数（如果不是所有）页面都共有的元素——例如导航菜单和页脚内容。例如，如果您的网站是为某个企业设计的，那么在每个页面的页脚中提供联系信息是一个好主意。记下您希望每个页面都共有的内容。例如：
- 页眉
- 标题和标志
- 网站语言选择器
- 导航菜单
- 页脚
- 版权声明
- 条款和条件、联系方式以及无障碍政策的链接
- 页眉
-
接下来，草绘您可能希望每个页面结构的样子（它可能看起来像我们上面简单的网站）。记下每个区块将是什么。
-
现在，集思广益，思考您网站上所有其他（非每个页面共有）内容。例如：
- 航班
- 住宿
- 交通
- 可做之事
- 特价优惠
- 热门度假套餐，例如冬季阳光、滑雪
- 搜索结果
- 评论
- 签证/入境要求
- 货币
- 语言和文化
- 购买假期
-
接下来，尝试将所有这些内容项进行分组，以便了解哪些部分可能在不同页面上共存。这与一种名为卡片分类的技术非常相似。
- 搜索
- 航班
- 住宿
- 交通
- 可做之事
- 特价优惠
- 热门假期
- 冬季阳光
- 滑雪
- 搜索结果
- 评论
- 国家特定信息
- 签证/入境要求
- 货币
- 语言和文化
- 购买假期
- 搜索
-
现在尝试草绘一个粗略的站点地图——为您网站上的每个页面画一个框，并画线以显示页面之间典型的流程。主页可能会在顶部或中心，并链接到大部分（如果不是全部）其他页面。小型网站中的大多数页面都应该可以从主导航中访问，尽管也有例外。您可能还希望包含关于事物如何呈现的注释。
尝试为您自己创建的网站进行上述练习。您想制作一个关于什么内容的网站？作为一项进阶目标，利用您迄今为止获得的 HTML 知识来创建网站上的几个页面。您可以使用我们的基本 HTML 模板作为起点。
总结
至此，您应该对如何构建网页/网站有了更好的理解。在本模块的下一篇文章中，我们将探讨如何创建超链接，这是 Web 的基本功能之一。