HTML5页结构基础知识-css教程-PHP中文网

首页

web前端

css教程

HTML5页结构基础知识

尊渡假赌尊渡假赌尊渡假赌

Feb 19, 2025 pm 12:47 PM

HTML5语义化元素详解及页面结构构建指南

核心要点

HTML5 引入新的语义化元素来增强文档结构的意义，例如 header、section、article、nav、aside 和 footer 元素。这些元素可以用来划分页面，并明确内容的目的。
header 元素不仅用于页面标题，还可以介绍内容的每个部分。section 元素表示内容的主题分组，通常带有标题。article 元素表示文档中一个完整、独立的组成部分，可以独立存在。
nav 元素表示一组导航链接，应保留用于主要导航。aside 元素表示页面的一部分，与周围的内容间接相关，可以被认为与该内容分离。
footer 元素表示其最近祖先内容部分的页脚。它通常包含版权信息、相关链接列表、作者信息以及您通常认为位于内容块末尾的类似信息。

HTML5 Page Structure Basics

(以下摘录自 Alexis Goldstein、Louis Lazaris 和 Estelle Weyl 合著的书籍《HTML5 & CSS3 for the Real World, 2nd Edition》。该书在全球各地的商店有售，您也可以在这里购买电子书版本。)

在分解了模板的基础知识之后，让我们开始为页面添加一些内容并构建其结构。

本书后面将专门介绍添加 CSS3 功能和其他 HTML5 元素；目前，我们将考虑在构建网站整体布局时要使用的元素。在本节和接下来的章节中，我们将广泛介绍语义化。当我们使用术语“语义化”时，指的是给定的 HTML 元素描述其内容含义的方式。

如果您回顾一下《The HTML5 Herald》的屏幕截图（或在线查看该网站），您会看到它被划分为以下部分：

带有徽标和标题的 header 部分
导航栏
分为三列的主体内容
列中的文章和广告块
包含一些作者和版权信息的页脚

在我们确定哪些元素适合页面的这些不同部分之前，让我们考虑一些选择。首先，我们将向您介绍一些新的 HTML5 语义化元素，这些元素可用于帮助划分页面并为文档结构添加更多含义。

header 元素

自然地，我们将首先关注 header 元素。规范简洁地将其描述为“一组介绍性或导航辅助工具”。

与您通常假设的相反，您可以包含一个新的 header 元素来介绍内容的每个部分。它不仅限于页面 header（您通常可能使用 <div> 来标记）。当我们在这里使用“section”一词时，我们并不局限于下一部分中描述的实际 section 元素；从技术上讲，我们指的是 HTML5 所称的“sectioning content”。这意味着任何可能需要自己 header 的内容块，即使这意味着在一个页面上有多个这样的块。header 元素可用于包含特定于页面的任何单个部分的介绍性内容或导航辅助工具，或应用于整个页面，或两者兼而有之。 <p>虽然 header 元素通常放置在页面或部分的顶部，但其定义与其位置无关。您的网站布局可能要求文章或博客文章的标题位于内容的左侧、右侧甚至下方；无论哪种情况，您仍然可以使用 header 来描述此内容。</p> <p><strong>section 元素</strong></p> <p>您应该熟悉的下一个元素是 HTML5 的 section 元素。规范将 section 定义如下：</p> <blockquote> <p>section 元素表示文档或应用程序的通用部分。在此上下文中，section 是内容的主题分组，通常带有标题。</p> </blockquote> <p>它进一步解释说，section 不应作为仅用于样式或脚本目的的通用容器使用。如果您无法将 section 用作通用容器（例如，为了实现所需的 CSS 布局），那么您应该使用什么？我们的老朋友 div 元素，它在语义上毫无意义。</p> <p>回到规范中的定义，section 元素的内容应该是“主题性的”，因此以通用方式使用它来包装不相关的部分内容是不正确的。</p> <p>section 元素的可接受用途的一些示例包括：</p> <ul> <li>选项卡式界面的各个部分</li> <li>“关于”页面的部分；例如，公司的“关于”页面可能包含关于公司历史、使命声明和团队的部分</li> <li>漫长的“服务条款”页面的不同部分</li> <li>在线新闻网站的各个部分；例如，文章可以分组到涵盖体育、国际事务和经济新闻的部分</li> </ul> <p><strong>注意：正确使用 section</strong></p> <p>每次向网页设计师提供新的语义标记时，都会就这些元素的正确使用、规范的意图等等进行讨论。您可能还记得以前 HTML 规范中关于 dl 元素的适当用法的讨论。不出所料，HTML5 也没有幸免于此现象，尤其是在 section 元素方面。即使是备受尊敬的 HTML5 权威人士 Bruce Lawson 也承认过去曾错误地使用过 section。为了更清楚地了解，非常值得阅读 Bruce 的文章，其中解释了他的错误。</p> <p>简而言之：</p> <ul> <li>section 是<em>通用的</em>，因此如果更具体的语义元素适用（例如 article、aside 或 nav），请改用该元素。</li> <li>section <em>具有语义含义</em>；这意味着它包含的内容在某种程度上是相关的。如果您无法仅使用几个词来简洁地描述您试图放入 section 的所有内容，则您可能需要一个语义上中性的容器：不起眼的 div。</li> </ul> <p>也就是说，与语义一样，在某些情况下它可以解释。如果您觉得您可以说明为什么使用给定的元素而不是另一个元素，请继续。如果有人真的就此批评您，由此产生的讨论对于所有参与者来说既有趣又有益，甚至可能有助于更广泛的社区理解规范。</p> <p>还要记住，如果合适，您可以将 section 元素嵌套到现有的 section 元素中。例如，对于在线新闻网站，世界新闻部分可以进一步细分为每个主要全球区域的部分。</p> <p><strong>article 元素</strong></p> <p>article 元素类似于 section 元素，但有一些显着的区别。以下是规范中的定义：</p> <blockquote> <p>article 元素表示文档、页面、应用程序或站点中完整或独立的组成部分，原则上可以独立分发或重复使用，例如在联合发布中。</p> </blockquote> <p>该定义中的关键词是<em>独立的组成部分</em>和<em>独立分发</em>。虽然 section 可以包含任何可以按主题分组的内容，但 article 必须是能够独立存在的单个内容。这种区别可能难以理解，因此如有疑问，请尝试联合发布测试：如果可以将内容在另一个网站上重新发布而无需修改，或者如果可以通过 RSS 或社交媒体网站（如 Twitter 或 Facebook）将其推送为更新，则它具有 article 的特征。</p> <p>最终，由您决定什么构成 article，但以下是一些符合规范中建议的建议：</p> <ul> <li>论坛帖子</li> <li>杂志或报纸文章</li> <li>博客文章</li> <li>用户提交的博客文章或文章的评论</li> </ul> <p>最后，就像 section 元素一样，article 元素可以嵌套在其他 article 元素中。您还可以将 section 嵌套在 article 中，反之亦然。这完全取决于您要标记的内容。</p> <p><strong>nav 元素</strong></p> <p>可以肯定的是，nav 元素几乎会在每个项目中出现。nav 正如其含义所表示的那样：一组导航链接。虽然 nav 的最常见用途是包装链接的无序列表，但还有其他选择。例如，您可以将 nav 元素包装在一个包含页面或页面部分的主要导航链接的文本段落周围。</p> <p>无论哪种情况，nav 元素都应保留用于最重要的导航。因此，建议您避免将 nav 用于页脚中的简短链接列表，例如。</p> <p><strong>注意：跳过导航链接</strong></p> <p>您可能在许多网站上看到实现的一种设计模式是“跳过导航”链接。其目的是允许屏幕阅读器用户快速跳过网站的主要导航，如果他们已经听到过它——毕竟，每次点击到新页面时都没有必要收听大型网站的整个导航菜单！nav 元素有可能消除这种需要；如果屏幕阅读器看到 nav 元素，它可以允许其用户跳过导航，而无需额外的链接。规范指出：“针对可以受益于在初始渲染中省略导航信息或可以受益于立即提供导航信息的用户（例如屏幕阅读器）的用户代理可以使用此元素来确定页面上最初要跳过或按需提供（或两者兼而有之）的内容。”</p> <p>尽管并非所有辅助设备都识别 nav，但通过现在构建标准，您可以确保随着屏幕阅读器的改进，您的页面将随着时间的推移变得更易于访问。</p> <p><strong>注意：用户代理</strong></p> <p>在浏览规范时，您会经常遇到“用户代理”一词。实际上，它只是浏览器的一个花哨术语——用户用来访问页面内容的软件“代理”。规范不简单地说“浏览器”的原因是用户代理可以包括屏幕阅读器或任何其他读取网页的技术手段。</p> <p>您可以在给定页面上多次使用 nav。如果您有网站的主要导航栏，则需要一个 nav 元素。此外，如果您有一组指向当前页面不同部分的辅助链接（使用页面内锚点或“本地”链接），这也可以包装在 nav 元素中。</p> <p>与 section 一样，关于什么构成 nav 的可接受用途以及为什么在某些情况下不推荐它（例如在页脚中）存在一些争论。一些开发人员认为此元素适用于分页或面包屑链接，或者对于构成网站主要导航方式的搜索表单（如 Google 上的情况）。</p> <p>这个决定最终取决于您，开发人员。WHATWG 的 HTML5 规范的主要编辑 Ian Hickson 直接回答了这个问题：“在您本来会使用 class=nav 的任何时候使用它”。<sup>[7]</sup></p> <p><strong>aside 元素</strong></p> <p>此元素表示页面的一部分，“与 aside 元素周围的内容间接相关，可以被认为与该内容分离”。</p> <p>aside 元素可用于包装与以下内容间接相关的内容部分：</p> <ul> <li>特定的独立内容（例如文章或部分）。</li> <li>整个页面或文档，这在向页面或网站添加侧边栏时通常会这样做。</li> </ul> <p>aside 元素绝不应用于包装属于主要内容的页面部分；换句话说，aside 不是指从句。aside 内容可以独立存在，但它仍然应该是更大整体的一部分。</p> <p>aside 的一些可能用途包括侧边栏、辅助链接列表或广告块。还应注意，aside 元素（与 header 一样）并非由其在页面上的位置定义。它可能位于侧面，也可能位于其他位置。定义它的内容本身及其与其他元素的关系。</p> <p><strong>footer 元素</strong></p> <p>本章将讨论的最后一个元素是 footer 元素。与 header 一样，您可以在单个页面上有多个 footer 元素，并且您应该使用 footer 而不是通用的东西，例如 <code><div>。根据规范，footer 元素表示其最近祖先内容部分的页脚。内容部分可以是整个文档，也可以是 section、article 或 aside 元素。 <p>footer 通常包含版权信息、相关链接列表、作者信息以及您通常认为位于内容块末尾的类似信息；但是，与 aside 和 header 一样，footer 元素并非按其在页面上的位置定义，因此它不必出现在部分的末尾或页面的底部。很可能它会，但这并非必需。例如，关于博客文章作者的信息可能显示在文章上方而不是下方，并且仍然被认为是页脚信息。</p> <p><strong>注意：我们是如何走到这一步的？</strong></p> <p>如果您对 HTML5 的路径以及我们最终获得的标签有些疑问，您可能想查看 Luke Stevens 的书《The Truth about HTML5》。Luke 的书目前已出版第二版，内容有些争议。除了涵盖许多 HTML5 技术（如视频和画布）之外，他还深入介绍了 HTML5 的历史，解释了新元素中固有的某些语义和可访问性问题，并提供了一些关于如何处理这些问题的建议。</p> <hr> <p><sup>[7]</sup> 请参阅 <a href="https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e">https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e</a>。</p> <p><strong>HTML5 页面结构常见问题解答 (FAQ)</strong></p> <h3 id="HTML-中声明的意义是什么">HTML5 中声明的意义是什么？</h3> <p>声明是 HTML5 文档的第一行。它不是 HTML 标签；而是一个关于页面使用哪个版本的 HTML 编写的指令。在 HTML5 中，声明简化为 <code>。这有助于确保浏览器以标准模式呈现页面，该模式支持最新的 HTML 规范。

元素如何在 HTML5 文档中发挥作用？

元素是元数据（关于数据的数据）的容器，位于标签和标签之间。元数据不会显示在页面上，但可以由机器解析。它通常定义文档标题、字符集、样式、脚本和其他元信息。元素的内容可以包括 <title></title>、<meta>、<link>、<style></style> 和 <base> 等元素。