基础内容

本章是最常见的的 HTML 标签介绍。

标题和段落

大部分的文本结构由标题和段落组成。不管是小说、报刊、教科书还是杂志等。

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

在 HTML 中，每个段落是通过 <p> 元素标签进行定义的, 比如下面这样:

一个段落

<p>我是一个段落，千真万确。</p>

每个标题(Heading)是通过“标题标签”进行定义的:

一个标题

<h1>我是文章的标题</h1>

这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题(the main heading)，<h2> 表示二级子标题(subheadings)，<h3> 表示三级子标题(sub-subheadings)，等等。

最佳实践

• 您应该最好只对每个页面使用一次 <h1> — 这是顶级标题，所有其他标题位于层次结构中的下方。

• 请确保在层次结构中以正确的顺序使用标题。不要使用 <h3> 来表示副标题，后面跟 <h2> 来表示副副标题 - 这是没有意义的，会导致奇怪的结果。

• 在可用的六个标题级别中，您应该旨在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档(即，较深的标题层次结构)是难以操作和导航的。在这种情况下，如果可能，建议将内容分散在多个页面上。

为什么需要结构化

因为如果元素没有给出内容结构，浏览器将不知道什么是标题，什么是段落。此外:

• 用户在阅读网页时，往往会快速浏览以查找相关内容，通常只是阅读开头的标题 (我们通常在一个网页上会花费很少的时间)。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。
• 对您的网页建立索引的搜索引擎会将标题内容视为影响网页搜索排名的重要关键字。标题的缺失意味着您的网页在 SEO (搜索引擎优化) 方面效果不佳。
• 严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器(screen reader)。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将被迫听到整个文档的大声朗读。
• 使用 CSS 样式化内容，或者使用 JavaScript 做一些有趣的事情，您需要包含相关内容的元素，所以 CSS / JavaScript 可以有效地定位它。

为什么需要语义

我们在许多地方需要依赖语义学。我们依靠以前的经验就知道日常事物都代表什么；当我们看到什么，我们就会知道它代表什么。举个例子, 我们都知道红色交通灯表示“停止”，绿色交通灯表示”通行“。

同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。在这里，<h1> 元素也是一个语义元素，它给出了包裹在您的页面上用来表示顶级标题的角色(或意义)的文本。

<h1>这是一个顶级标题</h1>

一般来说，浏览器会给它一个更大的字形来让它看上去像个标题。虽然您可以使用 CSS 让它变成任何您想要的样式。更重要的是，它的语义值将以多种方式被使用，如被搜索引擎和屏幕阅读器利用 (正如上文提到过的)。

在另一方面，您可以让任一元素看起来像一个顶级标题，如下:

一个看起来很像顶级标题的 span

<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗? </span>

这是一个 <span> 元素，它没有语义。当您想要对它用 CSS (或者 JavaScript )时，您可以用它包裹内容，且不需要附加任何额外的意义。我们已经对它使用了 CSS 来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的 HTML 元素来标记这个项目。

列表

列表在生活中随处可见，共有三种不同类型的列表。

无序 Unordered

无序的列表中项目的顺序并不重要。

豆浆
油条
豆汁
焦圈

每份无序的清单从 <ul> 元素开始，它包裹所有列表项目，下一步就是用 <li> 元素把每个列出的项目分别包裹起来:

无序列表

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

有序 Ordered

有序的列表将根据项目的顺序列出每一个项目:

沿着条路走到头
右转
直行穿过第一个十字路口
在第三个十字路口处左转
继续走 300 米，学校就在您的右手边

这个标记的结构和无序列表一样，唯一不同的是您需要用 <ol> 元素将所有项目包裹, 而不是用 <ul>:

有序列表

<ol>
  <li>沿着条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在您的右手边</li>
</ol>

描述列表

详情请见 格式化 → 描述列表

嵌套列表 Nesting lists

请务必注意正确嵌套列表，不要忘记父元素 <ul>。

一个嵌套列表

<ol>
  <li>
    先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。
  </li>
  <li>
    用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。
  </li>
  <li>
    鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。
  </li>
  <li>
    在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
    <ul>
      <li>
        如果您采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。
      </li>
      <li>如果您在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
    </ul>
  </li>
</ol>

重点强调

在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者在某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。

强调

当我们想要在口语中添加强调，我们会通过重读某些词来表达我们想要说的意思。类似的，在写作中，我们通过将文字写成斜体来强调它。比如，接下来的两个句子就有不同的含义:

I am glad you weren’t late.

I am glad you weren’t late.

第一句话听起来真的像松了一口气因为没有迟到。相反，第二句话听起来具有讽刺性而且有隐含的攻击性，表达对一个人迟到的恼怒。

在 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 元素和 em 元素嵌套在其他的标签中:

标签的嵌套

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

斜体字、粗体字、下划线

迄今为止我们已经讨论的元素都是意义清楚的语义元素。<b>, <i>, 和 <u> 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但 CSS 仍然不被完全支持的时期。像这样仅影响表象而没有语义的元素，被称为表象元素(presentational elements)。它们不应该再被使用。因为正如我们在之前看到的，语义对可访问性，SEO(搜索引擎优化)等非常重要。

HTML5 用新的语义规则重新定义了 <b>,<i> 和 <u>,稍微有点混乱。

这里是最好的经验法则: 使用 <b>,<i>,<u> 来传达传统意义上的粗体，斜体或下划线是合适的，没有其他元素更适合这样用了。然而，始终拥有可访问性的思维模式是至关重要的。斜体的概念对人们使用屏幕阅读器是没有帮助的，对使用其他书写系统而不是拉丁文书写系统的人们也是没有帮助的。

• <i> 被用来传达传统上用斜体表达的意义: 外国文字，分类名称，技术术语，一种思想……
• <b> 被用来传达传统上用粗体表达的意义: 关键字，产品名称，引导句……
• <u> 被用来传达传统上用下划线表达的意义: 专有名词，拼写错误……

斜体字、粗体字、下划线

<!-- 学名 -->
<p>红喉北蜂鸟(学名: <i>Archilocus colubris</i>) 是北美东部最常见的蜂鸟品种。</p>

<!-- 舶来词 -->
<p>
  菜单上有好多舶来词汇，比如 <i lang="uk-latn">vatrushka</i>(东欧乳酪面包),
  <i lang="id">nasi goreng</i>(印尼炒饭)以及<i lang="fr">soupe à l'oignon</i
  >(法式洋葱汤)。
</p>

<!-- 已知的错误书写 -->
<p>总有一天我会改掉写<u>措字</u>的毛病。</p>

<!-- 系列说明文字中需要突出的文字 -->
<ol>
  <li><b>切</b>下两片面包，</li>
  <li>在两片面包中间<b>夹入</b>一片西红柿和一片生菜叶。</li>
</ol>