HTML（构建 Web）之HTML 文本基础

HTML 的主要工作之一是提供文本结构，以便浏览器可以按照其开发人员的意图显示 HTML 文档。本文解释了如何使用HTML通过添加标题和段落、强调单词、创建列表等来构建文本页面。

先决条件： 基本的 HTML 熟悉度，如 HTML 入门中所述。
客观的： 学习如何标记基本的文本页面以赋予其结构和意义——包括段落、标题、列表、强调和引用。

基础知识：标题和段落

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

结构化的内容使阅读体验更轻松、更愉快。

在 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>元素代表每一章的小节：

<!DOCTYPE html>
<html>
<!--头部信息-->
<head>
    <meta charset="utf-8">
    <title>&lt; title &gt; 元素</title>
</head>
<!--内容信息-->
<body>
<!--h1标题-->
<h1>The Crushing Bore.</h1>
<!--p段落-->
<p>By Chris Mills.</p>

<!--h2章节-->
<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章节-->
<h2>Chapter 2: The eternal silence</h2>
<p>Our protagonist could not so much as a whisper out of the shadowy figure...</p>
<!--h3章节-->
<h3>The specter speaks</h3>
<p>Several more hours had passed, when all of a sudden the spector sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
</body>
</html>

只要层次结构有意义，所涉及的元素代表什么完全取决于您。在创建此类结构时，您只需要牢记一些最佳实践：

  • 最好<h1>每页使用一个标题——这是顶级标题，所有其他标题在层次结构中位于此下方。
  • 确保在层次结构中以正确的顺序使用标题。不要使用<h3>元素来表示子标题，然后用<h2>元素来表示子标题——这没有意义并且会导致奇怪的结果。
  • 在可用的六个标题级别中，除非您觉得有必要，否则您的目标应该是每页使用不超过三个。具有多个级别（例如，很深的标题层次结构）的文档变得笨重且难以导航。在这种情况下，建议尽可能将内容分布在多个页面上。

为什么我们需要结构？

要回答这个问题，让我们看一下text-start.html — 本文运行示例的起点（一个不错的鹰嘴豆泥食谱）。您应该在本地计算机上保存此文件的副本，因为稍后的练习将需要它。该文档的正文当前包含多条内容。它们没有以任何方式标记，但用换行符分隔（按 Enter/Return 进入下一行）。

但是，当您在浏览器中打开文档时，您会看到文本显示为一大块！

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

  • 查看网页的用户倾向于快速扫描以找到相关内容，通常只是阅读标题。（我们通常在网页上花费的时间很短。）如果他们在几秒钟内看不到任何有用的东西，他们可能会感到沮丧并转向其他地方。
  • 为您的页面编制索引的搜索引擎将标题内容视为影响页面搜索排名的重要关键字。没有标题，您的页面在SEO（搜索引擎优化）方面将表现不佳。
  • 严重视障人士通常不阅读网页；他们反而听他们的。这是通过称为屏幕阅读器的软件完成的。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，他们通过读出标题来提供文档大纲，从而使用户能够快速找到所需的信息。如果没有标题，他们将被迫听大声朗读整个文件。
  • 要使用CSS设置内容样式，或使用JavaScript使其做一些有趣的事情，您需要用元素包装相关内容，这样 CSS/JavaScript 才能有效地定位它。

因此，我们需要给我们的内容结构化标记。

主动学习：给我们的内容结构

让我们直接进入一个活生生的例子。在下面的示例中，将元素添加到输入字段中的原始文本，使其在输出字段中显示为一个标题和两个段落。

为什么我们需要语义？

语义在我们周围无处不在——我们依靠以前的经验来告诉我们日常物品的功能是什么；当我们看到某样东西时，我们就知道它的功能是什么。因此，例如，我们期望红色交通灯表示“停止”，绿色交通灯表示“行驶”。如果应用了错误的语义，事情会很快变得棘手。（是否有任何国家/地区使用红色表示“去”？我们希望不会。）

同样，我们需要确保使用正确的元素，为我们的内容赋予正确的含义、功能或外观。在这种情况下，该<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 元素。

列表

现在让我们把注意力转向列表。清单在生活中无处不在——从您的购物清单到您每天下意识遵循的路线清单，再到您在这些教程中遵循的说明清单！列表在网络上也无处不在，我们需要担心三种不同的类型。

无序

无序列表用于标记项目的顺序无关紧要的项目列表。我们以购物清单为例：

milk
eggs
bread
hummus

每个无序列表都以一个<ul>元素开始——它环绕着所有列表项：

<ul>
milk
eggs
bread
hummus
</ul>

最后一步是将每个列表项包装在<li>(list item) 元素中：

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

主动学习：标记无序列表

尝试编辑下面的实时示例以创建您自己的 HTML 无序列表。

已订购

有序列表是其中项目的顺序很重要的列表。我们以一组方向为例：

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

标记结构与无序列表相同，只是您必须将列表项包装在一个<ol>元素中，而不是<ul>：

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

主动学习：标记有序列表

尝试编辑下面的实时示例以创建您自己的 HTML 有序列表。

主动学习：标记我们的食谱页面

因此，在本文的这一点上，您拥有了标记我们的食谱页面示例所需的所有信息。您可以选择保存我们的text-start.html起始文件的本地副本并在那里完成工作，或者在下面的可编辑示例中完成。在本地完成可能会更好，因为这样您就可以保存正在做的工作，而如果您将其填写到可编辑示例中，下次打开页面时它就会丢失。两者各有利弊。

  • 代码
     
    <h1>Quick hummus recipe</h1>
<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>
<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>

<h2>Ingredients</h2>
<ul>
<li>1 can (400g) of chick peas (garbanzo beans)</li>
<li>175g of tahini</li>
<li>6 sundried tomatoes</li>
<li>Half a red pepper</li>
<li>A pinch of cayenne pepper</li>
<li>1 clove of garlic</li>
<li>A dash of olive oil</li>
</ul>

<h2>Instructions</h2>
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.</li>
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
<li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

<p>For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>

<h2>Storage</h2>
<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.</p>
<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>
  • 示例

如果您遇到困难，您可以随时查看我们 GitHub 存储库上的text-complete.html示例。

嵌套列表

将一个列表嵌套在另一个列表中是完全可以的。您可能希望在顶级项目符号下方放置一些子项目符号。让我们从食谱示例中获取第二个列表：

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

由于最后两个项目符号与前面的项目符号密切相关（它们读起来像是适合该项目符号下方的子指令或选项），因此将它们嵌套在它们自己的无序列表中并将该列表放在当前的第四个列表中可能是有意义的子弹。这看起来像这样：

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>
        If you want a coarse "chunky" hummus, process it for a short time.
      </li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

尝试回到之前的主动学习示例并像这样更新第二个列表。

重点和重要性

在人类语言中，我们经常强调某些词来改变句子的意思，并且我们经常想以某种方式将某些词标记为重要或不同。HTML 提供了多种语义元素，使我们能够用这种效果标记文本内容，在本节中，我们将介绍一些最常见的元素。

强调

当我们想在口语中强调重点时，我们会强调某些词，巧妙地改变我们所说的意思。同样，在书面语言中，我们倾向于用斜体字来强调单词。例如，下面两个句子有不同的意思。

我很高兴你没有迟到。

我很高兴你没有迟到。

第一句话听起来真的因为这个人没有迟到而松了一口气。相比之下，第二个用斜体字表示“很高兴”和“迟到”，听起来带有讽刺意味或消极攻击性，表达了对这个人来晚了一点的烦恼。

在 HTML 中，我们使用<em>(emphasis) 元素来标记此类实例。除了使文档阅读起来更有趣之外，它们还可以被屏幕阅读器识别，可以配置为以不同的语调朗读它们。浏览器默认将其样式设置为斜体，但您不应纯粹使用此标签来获得斜体样式。为此，您需要使用一个<span>元素和一些 CSS，或者一个<i>元素（见下文）。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

重要性强

为了强调重要的词，我们倾向于在口头语言中强调它们，在书面语言中将它们加粗。例如：

这种液体有剧毒。

我指望你了。不要迟到！

在 HTML 中，我们使用<strong>(strong importance) 元素来标记此类实例。除了使文档更有用之外，屏幕阅读器也可以识别这些内容，可以将其配置为以不同的语调朗读。浏览器默认将其设置为粗体文本，但您不应纯粹使用此标记来获得粗体样式。为此，您需要使用一个<span>元素和一些 CSS，或者可能使用一个<b>元素（见下文）。

<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>

如果需要，您可以将 strong 和 emphasis 相互嵌套：

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

主动学习：让我们变得重要

在这个主动学习部分，我们提供了一个可编辑的示例。在其中，我们希望您尝试为您认为需要它们的单词添加重点和高度重要性，只是为了进行一些练习。

  • 代码
     
    <!DOCTYPE html>
<html>
<!--头部信息-->
<head>
    <meta charset="utf-8">
    <title>&lt; title &gt; 元素</title>
</head>

<!--内容信息-->
<body>
    <!--标题-->
    <h1>Important notice</h1>
<p>
    On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing 
    <br>
　　 <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. 
    <br>
    They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. 
    <br>
    If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.
</p>
</body>
</html>
  • 示例

斜体、粗体、下划线……

到目前为止我们讨论的元素具有明确的关联语义。<b>、<i>和的情况<u>稍微复杂一些。它们的出现是为了让人们可以在 CSS 支持不佳或根本不支持的时代编写粗体、斜体或带下划线的文本。像这样的元素只影响表示而不影响语义，被称为表示元素，不应再使用，因为正如我们之前所见，语义对于可访问性、SEO 等非常重要。

HTML5 重新定义了<b>, <i>, 和<u>新的、有点令人困惑的语义角色。

这是您能记住的最佳规则：只有在没有更合适的元素时，才适合使用<b>、<i>或<u>传达传统上用粗体、斜体或下划线传达的含义；通常有。考虑<strong>、<em>、<mark>或<span>是否更合适。

始终保持可访问性的心态。斜体的概念对使用屏幕阅读器的人或使用拉丁字母以外的书写系统的人不是很有帮助。

  • <i>用于传达传统上由斜体传达的含义：外来词、分类名称、技术术语、思想……
  • <b>用于传达传统上由粗体传达的含义：关键词、产品名称、引导句……
  • <u>用于传达传统上由下划线传达的含义：专有名称，拼写错误......

❗️ 注意：人们强烈地将下划线与超链接联系在一起。因此，在网络上，最好只给链接加下划线。在语义上合适时使用该<u>元素，但考虑使用 CSS 将默认下划线更改为在网络上更合适的内容。下面的示例说明了它是如何完成的。

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common
  hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>Someday I'll learn how to <u class="spelling-error">spel</u> better.</p>

<!-- term being defined when used in a definition -->
<dl>
  <dt>Semantic HTML</dt>
  <dd>
    Use the elements based on their <b>semantic</b> meaning, not their
    appearance.
  </dd>
</dl>

测试你的技能！

您已读完本文，但您还记得最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证您是否记住了这些信息——请参阅测试您的技能：HTML 文本基础知识。

概括

就这样吧！本文应该让您很好地了解如何开始在 HTML 中标记文本，并向您介绍了该领域中一些最重要的元素。在这个领域有更多的语义元素要涵盖，我们将在本课程后面的高级文本格式文章中看到更多内容。在下一篇文章中，我们将详细了解如何创建超链接，这可能是网络上最重要的元素。

posted on 2022-12-14 14:54  梁飞宇  阅读(34)  评论(0)    收藏  举报