HTML 文本基础
HTML的主要作用之一是给出文本结构和意义（也称为语义），以便浏览器可以正确显示它。本文介绍了HTML通过添加标题和段落，强调单词，创建列表等来构建文本页面的方式。
| 前提: | 了解基本的HTML知识，如 HTML入门所述。 |
|---|---|
| 目的: | 学习如何用标记（段落、标题、列表、强调、引用）来建立基础文本页面的文本结构和文本内容。 |
基础: 标题和段落
大部分的文本结构由标题和段落组成。不管是小说、报刊、教科书还是杂志等。
内容结构化会使读者的阅读体验更轻松，更愉快。
在HTML中，每个段落是通过<p>元素标签进行定义的，比如下面这样：
<p>I am a paragraph, oh yes I am.</p>
每个标题（Heading）是通过 "标题标签" 进行定义的：
<h1>I am the title of the story.</h1>
这里有六个标题元素标签—<h1>, <h2>, <h3> , <h4>, <h5>, and<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 - 并从运行这段文档示例（美味的豆沙食谱）开始。首先，你可以复制一份并保存到本地机器上，在之后的练习中你将用到它。在这个文档的主体（body）中包含了多个内容 - 这些内容没有做任何标记，但是编辑时使用了换行（输入Enter键/换行跳转到下一行）处理。
但是，当你在浏览器中打开文档时，你会看到文本显示为一整块！
这是因为没有元素给内容结构，所以浏览器不知道什么是标题，什么是段落。此外:
- 用户在阅读网页时，往往会快速浏览以查找相关内容，经常只是阅读开头的标题（我们通常在一个网页上会花费很少的时间spend a very short time on a web page）。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。
- 对你的网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，你的网页在SEO（搜索引擎优化）方面效果不佳。
- S严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器（screen reader）。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将被迫听到整个文档的大声朗读。
- 使用CSS样式化内容，或者使用JavaScript做一些有趣的事情，你需要包含相关内容的元素，所以CSS/JavaScript可以有效地定位它。
因此，我们需要给我们的内容结构标记。
主动学习：编辑我们的内容结构
让我们直接跳进一个实例。在下面的示例中，向“输入”字段中的原始文本添加元素，使其在“输出”字段中显示为标题和两个段落。
如果你犯了错误，你可以使用Reset按钮进行重置。如果卡住，请按Show solution按钮以查看答案。
为什么我们需要语义？
在我们身边的任何地方都要依赖语义学 - 我们依靠以前的经验就知道日常事务都代表什么；当我们看到什么，我们知道它代表什么。举个例子，我们知道红色交通灯表示“停止”，绿色交通灯来表示“通行”。如果运用了错误的语义，事情会迅速地变得非常棘手（难道有某个国家使用红色代表通行？我们不希望如此）
同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。在这里， <h1>元素也是一个语义元素，它给出了它包裹在你的页面上用来表示顶级标题的角色（或意义）的文本。
一般来说，浏览器会给它一个更大的字形来让它看上去像个标题（虽然你可以使用CSS让它变成任何你想要的样式）。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器（上文提到过的）。
在另一方面，你可以让任一元素看起来像一个顶级标题，如下：
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
这是一个<span>元素，它没有语义。当你想要对它用CSS（或者JS）时，你可以用它包裹内容，不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。我们已经对它使用了CSS来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的HTML元素来标记这个项目。
列表Lists
现在，让我们注意一下列表。列表在生活中随处可见——从你的购物清单到你的回家路线方案列表，再到你遵从的教程说明列表。在网络上，列表也到处存在，我们需要学习三种不同类型的列表。
无序列表Unordered
无序的列表被用来标记每个项目。在这里，项目的顺序并不重要——让我们看下面的购物单的例子。
牛奶鸡蛋面包鹰嘴豆泥
每份无序的清单从<ul>元素开始——这元素包裹了单子上所有被列出的项目：
<ul>牛奶鸡蛋面包鹰嘴豆泥</ul>
最后一步就是用<li>元素把每个列出的项目分别包裹起来：
<ul> <li>牛奶</li> <li>鸡蛋</li> <li>面包</li> <li>鹰嘴豆泥</li></ul>
主动学习：标记无序的列表
尝试编辑下面的样本来创建你个人的HTML无序列表。
有序列表Ordered
有序的列表是根据项目的顺序列出来的——让我们以一组方向为例：
Drive to the end of the roadTurn rightGo straight across the first two roundaboutsTurn left at the third roundaboutThe 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复制一份文件并保存在本地，打开它进行编辑，或者在下面的例子中进行编辑。因为在本地你可以保存你的项目，所以在本地做这个工作可能更好。而如果你在下面可编辑的样本中作业，下一次你打开这个网站时你可能会丢失你的数据。各有利弊吧。
如果你感到棘手，你可以随时按下Show solution按钮，或者在我们的github repo上检查我们的 text-complete.html 样例。
嵌套列表Nesting lists
将一个列表嵌入到另一个列表中是完全可以的。你可能想让一些子项目列在首项目之下。让我们从食谱示例中获取第二个列表：
<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" humous, process it for a short time.</li> <li>If you want a smooth humous, 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" humous, process it for a short time.</li> <li>If you want a smooth humous, process it for a longer time.</li> </ul> </li></ol>
尝试回到上一个主动学习的示例中，并更新第二个列表。
重点强调
在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者在某种程度上的不同。HTML提供了许多语义元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。
强调
当我们想要在口语中添加强调，我们重读某些词，巧妙地改变我们所说的意思。类似的，在书面语言中，我们通过将文字写成斜体来强调它。例如，以下两个句子就有不同的含义。
I am glad you weren't late.
I am glad you weren't late.
第一句话听起来真的像松了一口气，那个人没有迟到。相比之下，第二个听起来具有讽刺性而且有隐含的攻击性的，表达对一个人迟到的恼怒。
在HTML中，我们使用<em>（强调）元素来标记此类实例。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认样式为斜体，但你不应该纯粹使用这个标签来获得斜体样式。为此，你应该使用<span>元素和一些CSS，或者可能是<i>元素（见下文）。
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
非常重要
为了强调重要的词语，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。例如下面这段：
This liquid is highly toxic.
I am counting on you. Do not be late!
在HTML中，我们使用<strong>（非常重要）元素来标记实例。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。默认情况下，浏览器默认样式为粗体，但你不应该纯粹使用这个标签来获得粗体样式。为此，你需要使用<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>
主动学习：我们是重要的！
在这个主动学习部分，我们提供了一个可编辑的例子。在这个例子中，我们想让你把斜体(em)和加粗(strong)放在你认为重要的词汇上，仅仅为了练习。
斜体字，粗体字，下划线...
到目前为止我们讨论的元素都是意义清楚的语义元素。<b>，<i>和<u>的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体或下划线但CSS仍然不被完全支持的时期。像这样的元素，仅仅影响表象而且没有语义，被称为表象元素（presentational elements），并且不应该再被使用。因为正如我们之前看到的，语义对于可访问性，SEO等非常重要。
HTML5用新的语义规则重新定义了<b>，<i>和<u>，稍微有点混乱。
这是最好的经验法则：使用<b> ，<i> 或<u>来传达传统意义上的粗体，斜体或下划线是合适的，没有其他元素更合适这样用了。然而，始终保持它们拥有可访问性的心态是很重要的。斜体的概念对人们使用屏幕阅读器是没有帮助的，对使用其他书写系统而不是拉丁文书写系统的人们也是没有帮助的。
<i>被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
<b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
<u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
一种关于下划线的警告：人们很容易把下划线和超链接联系起来。因此，在Web上，最好只在链接上使用下划线。当语义上适合时使用<u> 元素，但是有时候在Web上用CSS改变下划线默认的样式更加合适。下面的例子说明了如何做。 <!-- scientific names --><p> The Ruby-throated Hummingbird (<i>Archilocus 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>spel</u> better.</p><!-- Highlight keywords in a set of instructions --><ol> <li> <b>Slice</b> two pieces of bread off the loaf. </li> <li> <b>Insert</b> a tomato slice and a leaf of lettuce between the slices of bread. </li></ol>
总结
至此，本文应该给你做了一个很好的讲解，如何开始在HTML中标记文本，并介绍了一些重要的元素。在这一领域还有许多语义元素，我们将在后面的“更多语义元素”文章中看到更多的语义元素。 在下一篇文章中，我们将详细介绍如何创建超链接create hyperlinks，它可能是Web上最重要的元素。