文档和网站结构

文档和网站结构

上一个

概述：HTML 简介

下一个

除了定义页面的各个部分（例如“一段文字”或“一张图片”）之外，HTML 还拥有许多块级元素，用于定义网站的区域（例如“页眉”、“导航菜单”、“主要内容列”）。本文探讨了如何规划基本的网站结构，以及如何编写 HTML 来表示此结构。

先决条件

基本的 HTML 熟悉程度，如 HTML 入门 中所述。HTML 文本格式化，如 HTML 文本基础 中所述。超链接的工作原理，如 创建超链接 中所述。

目标

学习如何使用语义标签构建文档结构，以及如何确定简单网站的结构。

文档的基本部分网页的外观可能会有很大的不同，但它们通常都包含类似的标准组件，除非页面正在显示全屏视频或游戏，是某种艺术项目的一部分，或者只是结构不良。

页眉

通常是一条横跨顶部的宽条，包含大标题、徽标，以及可能还有一条标语。这通常在各个网页之间保持一致。

导航栏

指向网站主要部分的链接；通常以菜单按钮、链接或选项卡的形式呈现。与页眉一样，此内容通常在各个网页之间保持一致——网站上导航不一致只会导致用户感到困惑和沮丧。许多网页设计师认为导航栏是页眉的一部分，而不是一个独立的组件，但这并不是必需的；事实上，有些人还认为将两者分开对于 无障碍 更好，因为屏幕阅读器可以更好地读取这两个功能，如果它们是分开的。

主要内容

一个位于中心的较大区域，包含给定网页的大部分独特内容，例如，您想观看的视频、您正在阅读的主要故事、您想查看的地图或新闻标题等。这是网站中唯一一个肯定会因页面而异的部分！

侧边栏

一些外围信息、链接、引用、广告等。通常，这与主要内容中包含的内容相关（例如，在新闻文章页面上，侧边栏可能包含作者的简介或相关文章的链接），但也有一些情况，您会发现一些重复出现的元素，例如辅助导航系统。

页脚

页面底部的一条横条，通常包含免责声明、版权声明或联系信息。它是一个放置常见信息（如页眉）的地方，但通常，这些信息对于网站本身并不重要或次要。页脚有时也用于 SEO 目的，通过提供快速访问热门内容的链接。

“典型网站”的结构可能如下所示

注意：上图说明了文档的主要部分，您可以使用 HTML 定义这些部分。但是，此处显示的页面的外观——包括布局、颜色和字体——是通过将 CSS 应用于 HTML 来实现的。

在本模块中，我们不会教授 CSS，但一旦您了解了 HTML 的基础知识，请尝试深入学习我们的CSS 入门模块，开始学习如何为您的网站设置样式。

用于构建内容的 HTML上面显示的简单示例并不美观，但对于说明典型的网站布局示例来说已经足够了。有些网站有更多列，有些网站要复杂得多，但您应该理解了基本思路。使用正确的 CSS，您可以使用几乎任何元素来包裹不同的部分，并使其看起来符合您的预期，但正如之前所讨论的，我们需要尊重语义并**为合适的工作使用合适的元素**。

这是因为视觉效果并不能说明全部内容。我们使用颜色和字体大小来吸引有视力用户的注意力，让他们关注内容中最有用的部分，例如导航菜单和相关链接，但例如视力障碍者呢？他们可能不会觉得像“粉红色”和“大字体”这样的概念很有用。

注意：大约 8% 的男性和 0.5% 的女性是色盲；或者换句话说，大约每 12 个男性中就有 1 个，每 200 个女性中就有 1 个。盲人和视力障碍者约占世界人口的 4-5%（2015 年有9.4 亿人患有某种程度的视力障碍，而当时总人口约为75 亿）。

在您的 HTML 代码中，您可以根据内容的功能来标记内容部分——您可以使用明确表示上述内容部分的元素，辅助技术（如屏幕阅读器）可以识别这些元素并帮助完成“查找主导航”或“查找主要内容”等任务。正如我们在课程前面提到的，不使用正确的元素结构和语义来完成合适的工作会产生一些后果。

为了实现这种语义标记，HTML 提供了专用的标签，您可以使用它们来表示这些部分，例如

页眉：