HTML文本基础

HTML的主要工作之一是给出文本的结构和含义(也称为语义学)以便浏览器能够正确地显示它。这篇文章解释了HTML可以通过添加标题和段落、强调单词、创建列表等等来构造一页文本。

先决条件：
基本的HTML熟悉性，如开始使用HTML.
目标：
学习如何标记一页基本的文本，给它的结构和意义-包括段落，标题，列表，重点和引文。
基础：标题和段落
大多数结构化的文本包括标题和段落，不管你是在读故事、报纸、大学教科书、杂志等等。

结构化内容使阅读体验更容易，更令人愉快。

在HTML中，每个段落必须包装在

元素，如下所示：

我是一个段落，哦，是的，我是

每个标题必须包装在一个标题元素中：

我是这个故事的标题。

有六个标题要素：

,

,

,

,

，和

。每个元素代表文档中不同级别的内容；

表示主标题，

代表副标题，

表示副标题，以此类推。

实施结构层次
例如，在这个故事中，

元素表示故事的标题，

元素表示每个章节的标题，

要素代表每一章的小节：

破碎孔

克里斯·米尔斯

<氢>第一章：黑夜</氢>

那是个黑暗的夜晚。某个地方，一只猫头鹰在叫。雨猛烈地打在.

<氢>第二章：永恒的沉默</氢>

我们的主角不可能从这个阴暗的身影里低声说话.

幽灵说话

又过了几个小时，幽灵突然站在那里，直着身子喊道：“请宽恕我的灵魂吧！”

只要层次结构是合理的，这就取决于您所涉及的元素所代表的是什么。在创建这样的结构时，您只需要记住一些最佳实践：

最好，你应该用一个

每页-这是最高级的标题，所有其他的都位于这个层次结构的下面。
确保在层次结构中以正确的顺序使用标题。不要用

元素来表示副标题，然后是

代表副标题的元素–这是没有意义的，而且会导致奇怪的结果。
在现有的六个标题级别中，除非您认为有必要，否则您的目标应该是每页不超过三个。具有许多级别(即深度标题层次结构)的文档变得难以处理和难以浏览。在这种情况下，如果可能的话，最好将内容分散到多个页面上。
为什么我们需要结构？
为了回答这个问题，让我们看看Text-start.html-本文运行示例的起点(一个不错的鹰嘴豆泥配方)。您应该将该文件的副本保存在本地计算机上，因为以后的练习将需要它。此文档的正文当前包含多个内容。它们没有以任何方式被标记，但是它们用行分隔(按Enter/Report键进入下一行)。

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

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

浏览网页的用户往往会快速扫描以找到相关内容，通常一开始只是阅读标题。(我们通常花很短的时间在网页上)如果他们在几秒钟内看不到任何有用的东西，他们可能会感到沮丧，然后去别的地方。
搜索引擎索引您的网页，认为内容的标题是重要的关键字，以影响页面的搜索排名。如果没有标题，您的页面在SEO(搜索引擎优化)
视力严重受损的人通常不看网页，而是听网页。这是用称为屏幕阅读器。该软件提供了快速访问给定文本内容的方法。在所使用的各种技术中，它们通过读取标题来提供文档的大纲，使用户能够快速找到所需的信息。如果没有标题，他们将被迫听整个文件大声读出。
用CSS，或者让它做一些有趣的事情JavaScript，您需要有包装相关内容的元素，因此CSS/JavaScript可以有效地针对它。
因此，我们需要给我们的内容结构标记。

主动学习：给出我们的内容结构
让我们直截了当地举一个活生生的例子。在下面的示例中，将元素添加到输入字段中，使其显示为标题和两个段落。输出量场。

如果您犯了错误，可以使用复位纽扣。如果你被卡住了，按下示解按钮看答案。

为什么我们需要语义？
语义在我们周围的任何地方都是依赖的–我们依靠以前的经验来告诉我们日常事物的功能是什么；当我们看到某物时，我们知道它的功能是什么。例如，我们期望红灯表示“停止”，绿色交通灯表示“走”，如果应用错误的语义，事情会变得非常棘手。(有国家用红色来表示“去”吗？我希望不是。)

同样，我们需要确保使用正确的元素，使内容具有正确的含义、功能或外观。在这种情况下，

元素也是一个语义元素，它给出了围绕“页面顶部标题”的角色(或含义)所包装的文本。

这是一个顶级标题

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

另一方面，你可以制造任何元素看就像一个顶级的标题。考虑以下几点：

<跨距 风格=“字号: 32PX; 保证金: 21PX 0; 显示:块;”>这是最高级别的标题吗？</跨距>
这是一个元素。它没有语义。当您想要将CSS应用到它(或者用JavaScript对它做一些事情)时，您可以使用它来包装内容，而不会给它任何额外的意义。(在后面的课程中，您将更多地了解这些内容。)我们已经将一些CSS应用于它，使它看起来像一个顶级的标题，但是由于它没有语义值，所以它不会得到上面描述的任何额外的好处。在作业中使用相关的HTML元素是个好主意。

列表
现在让我们把注意力转向清单。生活中的清单随处可见–从你的购物清单到你下意识地每天去你家的方向清单，再到你在这些教程中遵循的指示列表！列表也随处可见，我们有三种不同的类型需要担心。

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

牛乳
每个无序列表都以

• 元素–它环绕所有列表项：

• 牛乳

最后一步是将每个列表项包装在

• (列表项目)元素：
• • <李>牛奶

  有序
  有序列表是项目顺序的列表。是吗？重要的事。让我们以一组方向为例：

  行驶到路的尽头，向右拐，直过前两个环形交叉路口，在第三个环形交叉路口左转，学校就在你的右边，沿着这条路走300米。
  标记结构与无序列表相同，只是必须将列表项包装在

  1. 元素，而不是
     • :

  <醇>
  <李>开到路的尽头</李>
  <李>右转</李>
  <李>直穿过前两个环形交叉路口</李>
  <李>在第三个环形交叉路口左转</李>
  <李>学校在你的右边，在公路上300米处。</李>
  </醇>
  主动学习：在有序的列表上做标记
  尝试编辑下面的活动示例以创建您自己的HTML有序列表。

  主动学习：在食谱页面上做标记
  因此，在这一点上，在本文中，您有您需要的所有信息来标记我们的菜谱页面示例。您可以选择保存我们的Text-start.html启动文件并在那里完成工作，或者在下面的可编辑示例中执行。在本地这样做可能会更好，因为这样您就可以保存您正在做的工作，而如果您将其填入可编辑的示例，它将在下次打开页面时丢失。两者都有利与弊。

  如果你被卡住了，你可以随时按下示解按钮，或者查看我们的Text-complete.html我们的GitHub回购的例子。

  嵌套列表
  将一个列表嵌套在另一个列表中是完全可以的。你可能想把子弹放在最高级的子弹下面。让我们从菜谱例子中拿出第二个列表：

  <醇>
  <李>取出大蒜皮，粗切。</李>
  <李>把辣椒上所有的种子和茎都去掉，然后粗切。</李>
  <李>将所有的原料加入到食品加工机中。</李>
  <李>将所有原料加工成糊状。</李>
  <李>如果你想要一个粗大的“块状”鹰嘴豆泥，处理它的时间很短。</李>
  <李>如果你想要一个光滑的鹰嘴豆泥，处理它的时间更长。</李>
  </醇>
  由于最后两颗子弹与它们前面的子弹非常密切相关(它们读起来就像子弹下面的次级指令或选择)，所以将它们嵌套在自己的无序列表中，并将其放入当前的第四个项目中可能是有意义的。这看起来是这样的：

  <醇>
  <李>取出大蒜皮，粗切。</李>
  <李>把辣椒上所有的种子和茎都去掉，然后粗切。</李>
  <李>将所有的原料加入到食品加工机中。</李>
  <李>将所有原料加工成糊状。

  • 
    <李>如果你想要一个粗大的“块状”鹰嘴豆泥，处理它的时间很短。</李>
    <李>如果你想要一个光滑的鹰嘴豆泥，处理它的时间更长。</李>
    
  
  </李>
  </醇>
  尝试回到前面的活动学习示例，并更新第二个列表，如下所示。

  重点和重要性
  在人类语言中，我们经常强调某些词来改变句子的意义，我们常常希望在某种程度上将某些词标记为重要的或不同的。HTML提供了各种语义元素，使我们能够用这样的效果来标记文本内容，在本节中，我们将讨论几个最常见的语义元素。

  强调
  当我们想在口语中增加重点时，我们应力某些词语，微妙地改变了我们所说的意思。同样，在书面语言中，我们倾向于用斜体强调单词。例如，以下两句话有不同的含义。

  我很高兴你没迟到。

  我是高兴的，乐意的你不是迟来.

  第一句听起来真的松了一口气，因为那个人没有迟到。相反，第二种方式听起来像是讽刺或消极–咄咄逼人，表达对该人晚一点到达的恼怒。

  在HTML中，我们使用(强调)标记这类实例的元素。除了使文档读起来更有趣外，屏幕阅读器也会识别这些文档，并以不同的声音说出它们。默认情况下，浏览器将此样式设置为斜体，但不应仅使用此标记来获得斜体样式。要做到这一点，您可以使用元素和一些CSS，或者元素(见下文)。

  我是<埃姆>高兴的，乐意的

  这种液体是剧毒.

  我就指望你了。不要迟到！

  在HTML中，我们使用<强>(非常重要的)标记这样的例子的元素。在使文档更有用的同时，屏幕阅读器也会识别这些文件，并以不同的声音发音。默认情况下，浏览器将此样式设置为粗体文本，但不应仅使用此标记来获得粗体样式。要做到这一点，您可以使用元素和一些CSS，或者元素(见下文)。

  这种液体是<强壮>剧毒

  我就指望你了。<强壮>不要

  这种液体是<强壮>剧毒

  斜体，粗体，下划线.
  到目前为止，我们讨论的元素都有明确的相关语义。与.有关的情况, ，和有点复杂。它们的出现是为了让人们能够在CSS仍然不受支持或根本不支持的时代写粗体、斜体或下划线文本。像这样只影响表示而不影响语义的元素称为表象要素也不应该再使用，因为，正如我们以前看到的，语义是如此重要的可访问性，SEO等。

  HTML 5重新定义, ，和新的，有点混乱的语义角色。

  以下是最好的经验法则：使用它可能是合适的, ，或用粗体、斜体或下划线表达一种传统意义，只要没有更合适的成分。然而，保持可访问性思维始终是至关重要的。斜体字的概念对使用屏幕阅读器的人或使用拉丁字母以外的书写系统的人没有多大帮助。

  用于表达传统上用斜体表达的意思：外来词、分类学称谓、技术术语、思想.
  用来表达一个传统上用黑体表达的意思：关键词，产品名称，引语.
  用来表达传统上由下划线表达的意思：正确的名称，拼写错误.
  关于下划线的警告：人们强烈地将下划线与超链接联系在一起。因此，在网络上，最好只在链接下划线。使用元素，但请考虑使用CSS将默认下划线更改为在Web上更合适的内容。下面的示例说明了如何做到这一点。

  <！–科学名称->

  红宝石喉的蜂鸟(<我>阿奇洛切斯

  <！-外来词–>

  菜单上充满了异国情调，比如<我 朗="英国-latn">Vatrushka

  <！–一个已知的拼写错误->

  总有一天我会学会

  <！–在一组指令中突出显示关键字->
  <醇>
  <李>
  <乙>切片</乙>面包上的两片面包。</李>
  <李>
  <乙>插入</乙>一片西红柿片和一片生菜片之间的面包片。</李>
  </醇>
  测试你的技能！
  您已经完成了本文的结尾，但是您还记得最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否保留了这些信息-测试您的技能：HTML文本基础.

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