本页面启用了交互式编辑器，加载时间可能稍长
请刷新页面以启用交互式编辑器
# 为什么你应该关心语义化 HTML？
语义是语言中单词或短语的含义。在 HTML 这种语言中，元素也有其自身的语义含义。实际上，你可以把 HTML 文档当作文本文件看待。就像文本文件一样，你可能会有标题、图像、加粗文本和其他格式。
元素的语义含义指的是该元素传达的特殊信息。例如， p 元素的语义含义是一个段落文本：
示例代码
大多数元素都有语义含义。 div 元素是为数不多的没有语义的元素之一。但这为什么重要呢？
首先且最重要的是，使用正确的语义化 HTML 能确保使用屏幕阅读器等辅助技术的用户获得最佳体验。此外，语义化 HTML 还能改善你的搜索排名。这被称为搜索引擎优化，或 SEO。
最后，使用正确的语义元素可以改善你的开发体验。与其在一堆代码中查找导航栏，不如直接编辑 nav 元素，并清楚自己在修改什么。在本节中，你将了解这些主题的更多内容、如何使用语义元素以及语义 HTML 为什么如此重要。
# 为什么拥有良好的结构层次很重要？
创建结构层级时最重要的一点是正确使用标题元素。标题元素以 h1 、 h2 、 h3 等编号。这些数字表示该元素的标题等级。
就像文本文档一样，你不应以错误的顺序使用标题等级。你的 h1 元素是顶级标题。页面上很少会有多个 h1 ，通常它应位于所有内容之前。
你的 h2 元素是子标题。它应始终位于 h1 之后，可能在一些引言性文本之后。与 h1 元素不同，你可以在页面上有多个 h2 元素。你通常会这样做以划分不同的内容部分。
遵循该模式，你的 h3 元素应始终位于 h2 之后。也就是说，你不应直接从 h1 跳到 h3 。然而，你可以在同一等级拥有多个标题元素。例如，以下代码是正确的：
但这段代码不正确，因为 h3 出现在 h2 之前。
将 h2 元素移到 h3 之上，使其在语义上正确。要与代码交互，您需要启用交互式编辑器。
相反，您应根据文档结构选择合适的元素，并使用 CSS 实现所需的样式。
使用正确的层级对可访问性非常重要。辅助技术（如屏幕阅读器）依赖网页的结构来判断如何解析并向用户朗读该网页。在一个
之后直接使用
元素，可能会让使用屏幕阅读器的用户认为他们不小心跳过了重要内容，因为缺少了
元素。
适当的结构对于搜索引擎优化（SEO）也很重要。搜索引擎使用自动化程序解析网页内容并判断何时以及在何处显示搜索结果。如果你的结构格式不正确，搜索引擎可能无法在相关搜索结果中为你提供良好的排名。
最后，视结构错误的程度，你的 HTML 甚至可能在技术上不被视为有效。当这种情况发生时，网页浏览器必须去 “猜” 你想要做什么。而它所猜测的内容可能根本不是你想要的。
正如你今天所学，使用页面的正确结构层级有很多理由。在构建新项目时请牢记这一点。
# 呈现性 HTML 与语义化 HTML 有什么区别？
表现性 HTML 关注内容的外观和样式。在 HTML 的早期，开发者会使用像 center 、 big 和 font 这样的元素。但在现代网页开发中不应使用这些类型的元素，因为它们的局限性以及对无障碍性和可维护性的负面影响。
许多表现性 HTML 元素已被弃用，这意味着它们已过时且不再被推荐。现在有更好的方法来达到相同的效果。然而，知道它们的存在是有帮助的，所以我们将看一些示例。
font 元素是一个已弃用的元素，用于设置文本的字体大小和颜色。下面是一个 font 元素的示例。
启用交互式编辑器并将大小从 5 改为 7 以查看字体增大。
此示例将文本颜色设置为 blue ，大小设置为 5 。 size 属性的范围是 1 到 7 ，其中 1 最小， 7 最大。默认值是 3 ，如果你不显式设置该值。
尽管该元素仍然可用，但不应使用它，因为字体大小和颜色应始终在 CSS 中设置，而不是在 HTML 中设置。
center 元素是另一个已弃用的元素，用于在其容器内水平居中内容。下面是一个包含文本和段落元素的 center 元素示例。
启用交互式编辑器，并在 <p>Another example text.</p> 周围添加 center 标签，以查看其在页面上的居中显示。
接下来是 big 元素。这是另一个已弃用的表现型 HTML 元素，会将被包裹的文本设为比周围文本大一级。下面给出一个定义了两部分的段落示例。
启用交互式编辑器，并在 Some other text 周围添加 big 标签，查看预览窗口中的变化。
请记住，字体大小应始终通过 CSS 设置，因此在现代 HTML 中不应使用此元素。
以上是一些表现型 HTML 元素的示例。但它们都已被弃用，不再推荐使用。那么应该改用什么呢？我们接着看。
语义化 HTML 现在是推荐的做法。它描述了元素的内容，因此更易于阅读、理解和维护。
当你使用语义化 HTML 时，搜索引擎可以更容易地理解你的网站。它对无障碍也很有帮助，因为屏幕阅读器需要语义信息来描述网页上的内容。
语义化 HTML 元素的示例包括：
用于定义文档或章节头部的 header 元素。
用于包含导航链接的导航部分元素： nav 。
用于对相关信息进行分组的元素： section 。
用于插图和示意图的元素： figure 。
这是一个包含导航部分元素的 header 元素示例。
在交互式编辑器中启用并在 nav 内添加 <a href="#">Products</a> ，然后在预览窗口查看更改。
语义元素清楚地显示了它们在 HTML 结构中的用途。语义 HTML 元素有很多种，你一定能找到符合项目需求的元素。
干得好。现在你已了解表现性 HTML 与语义性 HTML 的区别：语义性 HTML 描述内容，而表现性 HTML 侧重外观。
# 什么时候应使用强调（emphasis）元素而非习语文本（idiomatic text）元素？
这些元素与表现型与语义化 HTML 的概念密切相关。习语性文本元素 i 最初用于表现用途以斜体显示文本。但现在，它常用于突出表示替代的语气或情态、另一种语言的习语术语、技术术语以及思想。
以下是官方 HTML 规范中的一个示例，使用 i 元素来显示法语的习语短语。
在开标签 <i> 内的 lang 属性用于指定内容的语言。在本例中，语言为法语。 i 元素并不表示该文本是否重要，它只是表明该文本在某种程度上不同于周围文本。
如果你确实需要强调文本的重要性，可以使用一个语义上类似的元素，即强调元素 em 。如果需要提供更多语境，通常建议使用该元素。对于与周围文本相比需要特殊强调的文本部分，应使用此元素。它通常仅限于几个词，因为它可能改变句子的含义。
这是段落中强调元素的示例。
你可以看到句子 Never give up on your dreams 。注意单词 your 会被强调，因为它位于该元素内部。在浏览器中你会看到单词 your 被斜体显示，以告诉读者这是句子中一个重要词。
即便当文本位于习惯用的文本元素内时看起来相同，语义上的强调元素仍在背后传达其含义和重要性。
重要的是要知道这些元素不应仅用于呈现目的。如果你只是想将文本显示为斜体，但该文本在段落中并无特殊用途、样式或含义，则应改用 CSS。
# 什么时候应使用强调重要性（strong）元素而非引起注意（bring attention to）元素？
“用于引起注意” 的元素 b 通常用于突出摘要中的关键词或评论中的产品名称。通常，浏览器会将该文本显示为粗体。下面是一个在本评论中使用 b 元素来突出产品名称的示例：
浏览器将这些文本部分呈现为粗体文本。这种视觉强调会吸引读者对产品名称的注意。
如果你需要强调文本的重要性，应使用 strong 元素，而不是 b 元素。
strong 是一个语义化的 HTML 元素，用于强调至关重要或紧急的文本。下面是一个示例，展示如何使用 strong 元素来标注关于客户可能对某产品产生过敏反应的非常重要的警告：
元素传达了那种紧迫感。
在视觉上两者非常相似，因为默认情况下它们都以粗体呈现。但它们的含义却大不相同。用于 “引起注意” 的元素仅仅是吸引对文本的注意，并不表示更高的重要性，而 strong 元素则不仅如此。它传达一种重要性或紧迫感。这是它们的主要区别。
在两者之间选择时，请考虑该文本的目的及其在周围内容中的重要性。
# 什么是描述列表（description lists），以及何时应该使用它们？
描述列表非常适合以有序且易读的格式呈现术语和定义，例如在术语表或真正的字典中，你可以在其中找到单词及其对应的定义。
下面是一个包含两个术语及其相应详细信息的 HTML 描述列表示例。
启用交互式编辑器并尝试取消注释代码，以在预览窗口中查看新增的详细项。
在本例中，术语是缩略语 HTML 和 CSS，详细信息是它们的完整写法。详细信息也可以是定义或与术语相关的其他信息。
要定义一个描述列表，你需要三个 HTML 元素。首先是描述列表元素 dl ，它是整个列表的容器。在示例中你可以看到它包裹着描述列表的所有其他元素。
然后，为每个条目使用一个描述术语元素 dt 。在此例中描述列表有两个术语：HTML 和 CSS，因此有两个这样的元素。
最后，在每个术语之后会有一个描述详情元素 dd ，用于该术语的描述或相关细节。在本例中，它们分别是 Hypertext Markup Language 和 Cascading Style Sheets 。
在浏览器中，你会看到每个术语后面跟着相应的描述。默认情况下，描述项相对于术语在视觉上向右稍微缩进，以便区分。
但描述列表并不限于术语与定义。它们的用途更加多样。在这里我们有一个包含两种配料的食谱。
启用交互式编辑器并尝试取消注释代码，以在预览窗口中看到新的详情项出现。
整个描述列表包含在一个 description list 元素内。第一个配料 Flour 位于描述术语元素中。然后，你可以看到需要多少该配料： 2 cups 。该信息位于对应配料之后的描述详情元素中。
对于 Sugar 也重复相同的结构。在本例中，食谱只有两种配料，但如果有更多配料，同样的结构可以在整个描述列表中重复出现。
在浏览器中，你会看到原料左对齐，配量缩进以便视觉上区分。
描述列表的其他用例包括产品规格、常见问题、联系信息和元数据。实质上，当你有两条相关信息以键值对格式存在，其中一条作为标签（键），另一条作为附加相关信息（值）时，就可以使用描述列表。
# HTML 中的块引用和行内引用如何工作？
在 HTML 中，引用元素用于将引用的文本与周围内容区分开来。这使得被引用的文本具有易于识别的格式。
你应该使用块引用元素来表示从其他来源引用的一段内容。它主要用于较长的引用。如果引用的来源有地址，你可以用 cite 属性来引用它。该属性的值应为一个有效的 URL。下面是一个块引用元素中包含引用的示例：
该元素有一个 cite 属性。 cite 属性的值是来源的 URL。虽然此属性不会改变引用块的呈现方式，但它对于向屏幕阅读器和搜索引擎提供更多关于引用的信息非常有用。在浏览器中，你会看到文本略微缩进。
如果你想在引用块的开始和结束处加上引号，可能需要在文本中显式写出它们。你可以像我刚才那样直接将文本写在引用块元素内，也可以将其包裹在一个或多个段落元素中。当文本有多段但你希望它们保留在同一引用块内时，这种做法很有帮助。下面是一个包含四段的示例：
所有段落都包含在同一个 blockquote 元素内，因此它们属于同一引用。你可以看到该元素有一个包含来源 URL 的 cite 属性。在浏览器中，你会看到这四个段落彼此相对对齐，但相对于它们的容器有缩进。
到目前为止我一直使用 cite 属性来标注引用来源，但该属性并不会真正向用户显示来源。它只是幕后起作用。
如果你想在视觉上标注来源，可以在 blockquote 元素之外添加一个引用元素 cite 。这与 cite 属性不同。引用元素是一个 HTML 元素，可用于标注被引用创作作品的标题，如书籍、文章、歌曲、电影、网站或研究论文。以下是一个示例：
块引用元素包含被引用的文本。在该元素下面你可以看到一个段落元素，写着作者的名字，后面跟着一个引用元素。引用元素包含了该引文所来自书籍的书名。
如果你在浏览器中查看，现在源代码将清晰可见，可以看到该引文来自 Quincy Larson 所著的一本书。这本书的书名是 How to Learn to Code and Get a Developer Job 。
对于来自其他来源的较长引用，你应该像这样使用块引用。但有时你只需要在更长的段落中引用几个词。
这正是内联引用元素的用途。它用于来自其他来源的简短内联引用。当你使用该元素时，大多数现代浏览器会自动在内联引用周围添加引号。下面是一个示例：
你可以看到一个包含文本的段落元素。部分文本是内联引用，因为它位于内联引用元素之内。你也可以添加一个 cite 属性来注明来源。
这与块引用元素的用法完全相同。不会有任何视觉上的变化，但这会为屏幕阅读器和搜索引擎提供有关该引用的更多信息。
在浏览器中，你会看到被引用的文本是段落的一部分，并且被引号包围。大多数现代浏览器会自动添加这些引号。
块引用和行内引用有什么区别？你应该对来自其他来源的较长引用使用块引用，而对应作为现有段落一部分的较短引用使用行内引用。
# 如何在 HTML 中显示缩写？
缩写是对单词或短语的简化形式。例如，“Dr.”（后跟句点）是单词 “doctor” 的缩写。
缩写有两种常见形式：首字母缩略词（acronyms）和首字母缩写（initialisms）。
首字母缩略词是由短语中各词的首字母组成的单词，每个字母代表短语中一个词的首字母。
GUI 是一个首字母缩略词的例子。它代表 Graphical User Interface。通过取每个词的首字母 G、U 和 I，就得到缩写 GUI。
首字母缩写由短语中每个单词的首字母组成，每个字母代表该短语中一个单词的首字母。
例如，HTML 是一个首字母缩写；它代表 HyperText Markup Language，发音时逐个拼出每个字母 H、T、M、L。
首字母缩写和缩略词都是缩写的一种。区别在于缩略词作为单词发音，而首字母缩写则逐字母发音。
当在特定语境中广为人知且易于理解时，它们对于写出更简洁的文本非常有用。
如果你需要在 HTML 中显示缩略词（例如首字母缩略词或首字母连写词）， abbr 元素正是你需要的。当你第一次使用它们时，应始终解释其完整含义。然后你可以使用 abbr 元素突出显示它们并提供更多细节。
下面是一个示例，你可以在其中看到包含句子 HTML is the foundation of the web 的段落：
首字母缩写 HTML 位于 abbr 元素中。在浏览器中，你会发现外观并没有真正改变。它看起来仍然像普通文本。abbr 元素在后台提供有用的上下文，但用户仍会看到这个首字母缩写作为普通文本。
如果你想帮助用户理解该首字母缩写的含义，可以使用 title 属性显示其完整形式。
title 属性是可选的，但如果你决定包含它，必须是对缩写、首字母缩写或首字母连写形式的人类可读的描述。
让我们沿用之前的例子，但添加 title 属性。它将是 HyperText Markup Language ，即该首字母缩写的展开形式：
通常，当你添加此属性时，缩写元素的样式会发生变化。具体样式取决于浏览器。有些浏览器可能会显示点状下划线，而另一些可能会将内容转换为小型大写字母。当用户将鼠标悬停在缩写上时，全称会以工具提示的形式显示。
虽然你不必对网页上的每个缩写都使用缩写元素，但建议对那些可能不清楚或可能需要额外上下文的缩写使用它。
你应当尽量在信息与呈现之间找到合适的平衡，避免使文本混乱，同时保持清晰和简洁。
# 如何在 HTML 中显示地址？
联系地址元素用于表示网页某一部分的联系信息。 address 元素用途广泛，可用于商业页面、作者页面、个人网站等。
在构建网站的联系部分时，应该使用语义化的 address 元素，而不是像 div 这样的通用元素。
下面是将 address 元素用于公司联系页面的示例：
对于电话号码，我们使用了一个锚点元素，并将 href 的值设置为电话号码。 href 属性内的 tel:+ 值会创建一个可点击的链接，使支持该功能的设备能够发起电话呼叫。
对于电子邮件地址，使用了另一个锚点元素，并将 href 的值设置为 mailto 链接。 mailto 链接在 HTML 文档中用于允许用户在其首选的电子邮件客户端中打开新邮件。
使用 mailto 链接的一个缺点是用户常常会将其视为垃圾邮件。不幸的是，许多垃圾邮件发送者会利用此选项向用户发送邮件。所以在使用时请牢记这一点。
# 如何在 HTML 中显示时间和日期？
time 元素用于表示特定的时间点。
下面是一个使用 time 元素来表示二十点（晚上八点）的示例。
datetime 属性用于将日期和时间转换为机器可读的格式。
这很重要，因为它有助于搜索引擎结果，并帮助浏览器更有效地处理日期和时间信息。
datetime 属性的值必须是有效的年份、有效的月份、有效的时间、本地日期、全局日期或有效的持续时间字符串。
下面是另一个使用 time 元素来表示特定日期的示例：
datetime 属性的值采用 ISO 8601 格式。ISO 8601 是表示日期和时间的国际标准。
该值的第一部分是年、月和日。值中的大写字母 T 是日期和时间之间的分隔符。
十五点钟就是下午三点。
每当你需要表示事件、出版日期或约会时，最好使用 time 元素。
# 如何在 HTML 中显示数学方程和化学式？
上标元素用于将一段文本显示为上标。上标是打印在正常文本行之上的符号或字母。
下面是一个使用上标元素来说明指数的示例（要查看预览，请启用交互式编辑器）：
在这个示例中，数字 2 被包裹在 sup 标签中，以在段落中表示上标。在预览窗口中，你会看到第二个数字 2 比第一个数字 2 更小并且略高一些。
上标元素的常见用例包括指数、上位字母和序数词。下面是一个使用上标元素表示上位字母的示例（要查看预览，请启用交互式编辑器）：
上标字母指的是以上标形式书写的字母，通常用于表示缩写。字母 g 和 r 在此示例中被包裹在上标标签内以示缩写。
重要的是要注意，上标元素应仅用于排版原因。如果你只是想让一段文本看起来基线上移，应使用 CSS 而不是上标元素。
要在 HTML 中表示化学方程式，应使用下标元素。此元素使用下标，将基线下移并显示为较小的文字。
下面是使用下标元素来表示二氧化碳化学式的示例（要查看预览，请启用交互式编辑器）：
数字 2 被包裹在 sub 标签中，以表示该字符应为下标。
下标元素的常见用例包括化学式、脚注和变量下标。
# 如何在 HTML 中表示计算机代码？
行内代码元素用于表示文本中的短代码片段。 code 元素的常见用例包括技术文章和文档页面。
下面是一个使用 code 元素展示 CSS 代码片段的示例：
在这个示例中，CSS 的 color 属性用于将文本颜色设置为 blue 。通过将该代码片段包裹在 <code> 标签中，向浏览器表明该文本是一段行内代码。
浏览器会对 code 元素内的内容应用默认样式。默认样式使用等宽字体。
code 元素旨在表示单行代码。如果你想表示多行代码，需要将 code 元素放在预格式化文本元素内。
预格式化文本元素用于表示预先格式化的文本。下面是使用预格式化文本元素展示一条 CSS 声明的示例：
当使用 pre 元素时，你需要注意空白间距，因为它会按照在 HTML 文档中书写的精确格式来显示。
在浏览器中，你会看到代码向右缩进了好几个空格。如果你更改代码示例中的缩进，那么屏幕上的缩进也会相应改变。
在将代码示例包含在 HTML 文档中时，对于简短的行内示例，应使用 code 元素。
如果需要显示较长的代码片段，则需要同时使用 pre 和 code 元素。
# U、S 和 Ruby 元素用于什么，它们如何工作？
未说明注释元素，简称 u 元素，用于表示应用了非文本注释的行内文本。
下面是使用 u 元素突出显示各种拼写错误的示例：
在示例中，单词 incorrect 、 spelling 和 issues 拼写错误。 u 元素的默认样式是在文本下方添加黑色下划线。
在 HTML4 中， u 元素用于样式目的。但在 HTML5 中， u 元素只应用于表示文本带有非文本注释。
如果你想给一段文本添加下划线样式，应使用 CSS 而不是 HTML。
删除线元素，简称 s 元素，应当用于表示文本不再准确或相关。下面是使用 s 元素表示某项活动取消的示例：
在此示例中，第一句被划去，因为该次远足因天气原因被取消。
s 元素绝不应仅用于显示文档的更改。在这种情况下，更合适的元素是删除文本元素和插入文本元素。
ruby 元素表示显示在主文本上方或下方的小文本。它通常用于显示东亚文字的发音。以下是来自 MDN web 文档页面的 ruby 元素示例：
rp 元素，或称 ruby 回退括号元素，用作在不支持显示 ruby 注释的浏览器中的回退方案。
rt 元素，或称 ruby 文本元素，用于指示 ruby 注释的文本。该文本通常用于表示发音，或用于东亚排版中的翻译细节。
虽然 ruby 元素可以用于其他类型的注释，但最常见的用例是用于东亚排版。
