标题和段落

标题和段落

大多数结构化文本都由标题和段落组成，无论你是在阅读故事、报纸、大学教科书还是杂志等。

结构化内容使阅读体验更容易、更愉快。

在 HTML 中，每个段落都必须用 <p> 元素包裹，如下所示：

<p>I am a paragraph, oh yes I am.</p>

每个标题都必须用标题元素包裹。

<h1>I am the title of the story.</h1>

共有六个标题元素：h1、h2、h3、h4、h5 和 h6。每个元素代表文档中不同的内容级别；<h1> 代表主标题，<h2> 代表副标题，<h3> 代表次级副标题，依此类推。

实现结构层次

例如，在这个故事中，<h1> 元素代表故事的标题，<h2> 元素代表每个章节的标题，而 <h3> 元素代表每个章节的子部分。

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>
  It was a dark night. Somewhere, an owl hooted. The rain lashed down on the…
</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure…</p>

<h3>The specter speaks</h3>

<p>
  Several more hours had passed, when all of a sudden the specter sat bolt
  upright and exclaimed, "Please have mercy on my soul!"
</p>

至于涉及的元素代表什么，完全取决于你，只要层次结构合理即可。你在创建此类结构时只需记住一些最佳实践。

• 最好每页只使用一个 <h1>——这是最高级别的标题，所有其他标题都位于其层次结构之下。
• 确保你按照正确的层次顺序使用标题。不要使用 <h3> 元素来表示副标题，然后使用 <h2> 元素来表示次级副标题——这没有意义，会导致奇怪的结果。
• 在六个可用的标题级别中，除非你认为有必要，否则每页应尽量不要超过三个。拥有许多级别（例如，深层标题层次结构）的文档会变得笨重且难以导航。在这种情况下，如果可能的话，建议将内容分散到多个页面上。

为什么我们需要结构？

为了回答这个问题，我们来看看 text-start.html——一个美味的鹰嘴豆泥食谱。该文档的主体目前包含多段内容。它们没有以任何方式标记，但用换行符（按 Enter/Return 键进入下一行）分隔。

然而，当你在浏览器中打开文档时，你会看到文本显示为一大块！

这是因为没有元素为内容提供结构，所以浏览器不知道什么是标题，什么是段落。此外，

• 查看网页的用户倾向于快速扫描以查找相关内容，通常首先只阅读标题。（我们通常在网页上停留的时间很短。）如果他们几秒钟内看不到任何有用的东西，他们可能会感到沮丧并转到别处。
• 搜索引擎在索引你的页面时，会将标题内容视为影响页面搜索排名重要关键词。没有标题，你的页面在 SEO（搜索引擎优化）方面表现不佳。
• 视力严重受损的人通常不阅读网页；他们而是听网页。这是通过名为屏幕阅读器的软件完成的。该软件提供快速访问给定文本内容的方式。在使用的各种技术中，它们通过朗读标题来提供文档的纲要，让用户快速找到他们需要的信息。如果没有标题，他们将被迫听完整篇文档的朗读。
• 要用 CSS 来样式化内容，或者用 JavaScript 来做有趣的事情，你需要有元素来包裹相关内容，这样 CSS/JavaScript 才能有效地定位它。

因此，我们需要为内容提供结构化标记。

为内容提供结构

让我们直接开始，让你解决一个小小的代码挑战，以练习 HTML 标题和段落。

1. 单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
2. 将内容开头的适当文本包裹在 <h1> 元素中，将其转换为主标题。
3. 有两对词应该包裹在 <h2> 元素中，将它们转换为二级标题。
4. 将剩余的句子包裹在 <p> 元素中，将它们转换为段落。每个 <h2> 元素下方都应该有一个 <p> 元素。

如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。

Favorite body parts The brain Lovely shape and color. Also does thinkin' stuff.
The feet Knobbly and ugly, but useful for getting about.

<h1>Favorite body parts</h1>

<h2>The brain</h2>

<p>Lovely shape and color. Also does thinkin' stuff.</p>

<h2>The feet</h2>

<p>Knobbly and ugly, but useful for getting about.</p>

为什么我们需要语义？

语义无处不在——我们依靠过去的经验来告诉我们日常物品的功能；当我们看到某物时，我们知道它的功能会是什么。例如，我们期望红绿灯表示“停止”，绿灯表示“通行”。如果应用了错误的语义，事情很快就会变得棘手。（有没有哪个国家用红色表示“通行”？我们希望没有。）

类似地，我们需要确保我们正在使用正确的元素，赋予我们的内容正确的含义、功能或外观。在这种情况下，<h1> 元素也是一个语义元素，它赋予其所包裹的文本“页面上顶级标题”的角色（或含义）。

<h1>This is a top level heading</h1>

默认情况下，浏览器会给它一个大字体，使其看起来像一个标题（尽管你可以使用 CSS 将其样式化为任何你想要的样子）。更重要的是，它的语义值将以多种方式使用，例如被搜索引擎和屏幕阅读器使用（如上所述）。

另一方面，你可以使任何元素看起来像一个顶级标题。请看以下内容：

<span style="font-size: 32px; margin: 21px 0; display: block;">
  Is this a top level heading?
</span>

这是一个 <span> 元素。它没有语义。当你想要对内容应用 CSS（或使用 JavaScript 对其执行某些操作）而又不赋予它任何额外含义时，你使用它来包裹内容。（你将在本课程的后面了解更多关于这些内容的信息。）我们已经对其应用了一些 CSS，使其看起来像一个顶级标题，但由于它没有语义值，它将不会获得上述任何额外的好处。使用适用于该任务的相关 HTML 元素是一个好主意。

总结

至此，我们对 HTML 标题和段落的学习就结束了。接下来，我们将探讨语义化 HTML 的更多方面：强调词语。

• 上一页
• 概述：使用 HTML 构造内容
• 下一页