HTML页面的基础文本结构

HTML的主要工作是编辑文本结构和文本内容，以便浏览器能正确显示。本小节主要介绍HTML的使用方法：在一段文本中添加标题和段落，强调语句，创建列表等等。

基础：标题和段落

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

人民日报

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

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

<p>我的的确确是一篇文章的某一个段落！</p>

每个标题是通过”标题标签“进行定义的：

<h1>而我就是这篇文章的标题</h1>

这里有六个标题元素标签——<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容；<h1>表示主标题，<h2>表示二级子标题，<h3>表示三级子标题，以此类推。

编辑结构层次

这里有一个例子。在一个故事中，<h1>表示故事的名字，<h2>表示每个章节的标题，<h3>表示每个章节下的子标题，以此类推。

<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>

所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要层次结构是合理的。在创建此类结构时，你只需要记住一些最佳实践：

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

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

• 在可用的六个标题级别中，只在每页使用不超过三个，除非你认为有必要使用更多。

为什么我们需要结构化

回答这个问题之前，我们先来看一段文档示例“text.html”。在这个文档的主体（body）中包含了多个内容——这些内容没有做任何标记，但是编辑时使用了换行（输入回车/换行跳转到下一行）处理。

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

没有结构化的文本内容

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

• 用户在阅读网页时，往往会快速浏览以查找相关内容，经常只是阅读开头的标题。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到失望并离开。

• 对你的网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，你的网页在SEO（搜索引擎优化）方面效果不佳。

• 严重的视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器。该软件提供了快速访问给定文本内容的方法。如果标题不可用，用户将被迫听到整个文档的大声朗读。

• 使用CSS样式化的内容，或者使用JavaScript做一些有趣的事情，你需要包含相关内容的元素，所以CSS/JavaScript可以有效地定位它。

因此我们需要给我们的内容做标记。

试一试

在HTML文档中添加元素，让浏览器打开的效果是，显示标题和两个段落。

为什么我们需要语义？

在我们身边的任何地方都依赖语义学。举个例子，我们知道红色的交通灯表示“停止”，绿色的交通灯表示“通行”。如果没有语义化交通灯，我们不知道什么时候可以通行，那么我们的交通将会是拥堵，出现事故，也就没了秩序。

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

<h1>这是一个顶级标题，一个页面只有一个</h1>

一般来说，浏览器会给它一个更大的字形让它看上去像个标题。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器（前面提到过）。

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

<span style="font-size: 32px; font-weight:bold;">这是顶级标题吗？</span>

这是一个<span>元素，它没有语义。我们已经对它使用CSS来让它看起来像一个顶级标题。然而，由于没有语义值，所以它不会有任何上文提到的帮助。最好的办法是使用相关的HTML元素来标记这个项目。

列表Lists

列表在生活中随处可见——从购物清单到回家的路线方案，再到本节的说明列表，在网上，列表也随处可见，大致包含了两种不同类型的列表。

无序Unordered

无序列表用于标记列表项目顺序无关紧要的列表——我们以早点清单为例。

豆浆
油条
胡辣汤

每份无序的清单从<ul>元素开始——需要包裹清单上所有被列出的项目：

<ul>
  豆浆
  油条
  胡辣汤
</ul>

然后就是用<li>元素把每个列出的项目单独包裹起来：

<ul>
  <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

将一个列表嵌入到另一个列表是完全可以的。

<ol>
  <li>我是有序列表项1</li>
  <li>我是有序列表项2</li>
  <li>我是有序列表项3</li>
  <li>我是有序列表项4
      <ul>
        <li>我是有序列表项4中的无序列表</li>  
        <li>我是有序列表项4中的无序列表</li>
    </ul>
  </li>
 <li>我是有序列表项5</li>
</ol>

重点强调

在日常生活中，我们常常会加重某个字的读音，或者在书写过程中用加粗等方式突出某句话的重点。与这个类似，HTML也提供了相应的标签，用于标记某些文本，让它具有加粗、倾斜、下划线等效果。下面我们将学习一些最常见的标签。

强调

在口语表达中，我们常常会强调某些字，来改变这句话的意思。同样，在书面用语中，我们可以用斜体字来达到同样的效果。

我今天吃了一个苹果。
我今天吃了一个苹果。

第一句话强调我今天吃了“一个”苹果，而不是“两个”或者“三个”。而第二句话强调的是“苹果”，而不是“香蕉”或者其他。

在HTML中，我们用<em>（emphasis）元素来标记这样的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。

<p>我今天吃了<em>一个</em>苹果。</p>
<p>我今天吃了一个<em>苹果</em>。</p>

非常重要

为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。例如：

你今天一定要把这个苹果吃掉。

在HTML中，我们用<strong>（strong importance）元素来标记这样的情况。这样既可以让文档更加地清晰，也可以被屏幕阅读器识别出来，并以不同的语调发出。

<p>你今天<strong>一定</strong>要把这个苹果吃掉。</p>

斜体字、粗体字、下划线...

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

HTML5用新的语义规则重新定义了<b>，<i>和<u>，使得它们的语言显得稍微有点混乱。

最好的经验法则：如果没有更合适的元素，那么使用<b>、<i>或<u>来表达传统上的粗体、斜体或下划线是合适的。然而，始终拥有可访问性的思维模式是至关重要的。

• <i>被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想......

• <b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句......

• <u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误......

使用下划线的忠告：因为我们常常会认为网页中的下划线代表着一个超链接，所以最好只用下划线来代表超链接。而在语义适合的情况下不得不使用<u>元素时，可以使用CSS来改变<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 style="text-decoration-line: underline; text-decoration-style: wavy;">错字</u>的毛病。
</p>
<!-- 在一组指令中突出显示关键字 -->
<ol>
<li>
<b>切</b>下两片面包，
</li>
<li>
在两片面包中间<b>夹入</b>一片西红柿和一片生菜叶。
</li>
</ol>

小结

本小节我们了解了如何开始在HTML中标记文本，并学习了一些最重要的元素。在这一领域还有许多语义元素。