我们已经介绍了大多数(但肯定不是全部)HTML 元素。我们尚未讨论的一个领域是内联文本元素。与普遍看法相反,HTML 最初旨在用于共享文档,而不是猫视频。有许多元素为文档提供文本语义。有一个模块介绍了链接和 <a>
元素。其余元素将在此处简要讨论。
代码示例和技术写作
在编写代码示例文档时,请使用 <code>
元素。默认情况下,文本内容以等宽字体显示。当包含多行代码时,将 <code>
嵌套在 <pre>
元素内,该元素表示预格式化文本。
<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
<code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>
<data>
元素将给定的内容与机器可读的翻译链接起来;元素的 value
属性提供元素内容的机器可读的翻译。如果 <data>
内容与时间或日期相关,则必须改用 <time>
元素,该元素表示特定时间段。
<time>
元素可以包含 datetime
属性,以机器可读的格式提供人类友好的时间和日期。由于是机器可读的,datetime
属性为日历和搜索引擎等应用程序提供了有用的信息。
当提供程序的示例输出时,请使用 <samp>
元素将文本括起来。浏览器通常也会以等宽字体呈现此示例或引用的输出。
当提供带有键盘交互的说明时,可以使用 <kbd>
元素。它表示来自键盘、语音输入或任何其他文本输入设备的文本用户输入。
<var>
元素可用于数学表达式或编程变量。大多数浏览器以周围字体的斜体版本呈现文本内容。如果编写大量数学公式,请考虑使用 MathML,这是一种基于 XML 的数学标记语言,用于描述数学符号。
勾股定理中的二次方使用了 <sup>
上标元素。还有一个类似的 <sub>
下标元素,它指定应仅出于排版原因显示为下标的内联文本。上标和下标是数字、图形、符号或其他注释,它们比正常类型的行小,并且分别设置在行的上方或下方。
使用 <del>
指示已删除或“删除”的文本。可选地,包括设置为解释更改的资源的 cite
和带有机器可读日期和时间格式的日期或日期和时间的 datetime
属性。删除线元素 <s>
可用于指示内容不再相关,但实际上并未从文档中删除。
<ins>
是 <del>
元素的相反;它用于指示已添加或“插入”的文本,也可以选择包括 cite
或 datetime
属性。
定义和语言支持
当包含缩写词或首字母缩略词时,请始终在首次使用时以纯文本形式提供术语的完整扩展版本,因为您在开头和结尾 <abbr>
标记之间引入了术语的缩写表示形式;除非读者熟知该术语,例如本系列中的“HTML”和“CSS”。仅在首次出现时,即当定义缩写词或首字母缩略词时,才需要 <abbr>
。 title
属性既不必要也没有帮助。
当定义不是缩写词或首字母缩略词的术语时,请使用定义 <dfn>
元素来标识其周围内容中定义的术语。
如果定义的术语与周围文本的语言不同,请确保包含 lang
属性以标识语言。
当书写不同方向的语言时,HTML 提供了 <bdi>
元素,用于将潜在的双向文本与其周围文本隔离处理。当方向性未知的内容动态插入到页面中时,此国际化元素尤其有用。 <bdo>
元素会覆盖文本的当前方向,以不同的方向呈现文本。W3C 提供了 双向算法的介绍。
某些字符集包含放置在字符上方或右侧的小注释,以提供有关发音的信息。 <ruby>
元素是用于包含这些注释的容器,这些注释使书面语言(如韩语、中文和日语)更易于阅读。Ruby 也可用于希伯来语、阿拉伯语和越南语。
ruby 圆括号 (<rp>
) 包含在规范中,用于为不支持显示 <ruby>
的浏览器包含开始和结束圆括号。当浏览器支持 <ruby>
时(所有常青浏览器都支持),任何 <rp>
元素的内容都不会显示。ruby 文本元素 (<rt>
) 包含实际的注释。这两者都嵌套在 <ruby>
中。
请注意,如果您的浏览器支持 <ruby>
,则圆括号不可见。
强调文本
有几个元素可用于基于强调文本的语义原因(而不是出于表示原因,因为那是 CSS 的工作)来强调文本。
- 使用
<em>
元素来强调或强调一段内容。<em>
元素可以嵌套,每个嵌套级别都表示更大的强调程度。此元素具有语义含义,可用于通知屏幕阅读器、Alexa 和 Siri 等听觉用户代理以提供强调。 - 使用
<mark>
元素来标识或突出显示以某种方式相关的文本,例如突出显示(或“标记”)搜索结果中搜索词的出现。这使标记的内容能够被快速识别,而无需添加强调或重要性。 <strong>
元素将文本标识为具有很强的重要性。浏览器通常以更粗的字体粗细呈现内容。<cite>
元素在 文本基础知识 中介绍过,用于标记书籍、文章或其他创意作品的标题,或此类作品的缩写参考或引文元数据,例如书籍的 ISBN 编号。
有三个元素曾被暂时弃用,但已重新添加到 HTML 中。应谨慎使用它们,如果可以的话,因为它们几乎不提供语义值,并且 CSS 应始终用于样式设置而不是 HTML 元素。
<i>
<i>
元素可用于技术术语、外来词(再次,使用 lang
属性标识语言)、想法或船名。该元素用于区分内联内容与周围文本,原因特定,例如成语文本、技术术语和分类名称。不应仅使用此元素来使文本变为斜体。
MLW 对 Toasty McToastface 的研讨会评论底部的奇怪文本使用了 <span>
元素。<span>
元素为通用内联容器提供,该容器没有语义并且不代表任何内容。这也将是 <i>
的适当用法。
<i>
元素的默认样式是以斜体字体呈现元素。在本例中,我们设置了 font-style: normal
,因为使用的字符在斜体中不可用。
<u>
<u>
元素用于具有非文本注释的内容。例如,您可能想要注释已知拼写错误的单词。默认情况下,内容带有下划线,但这可以通过 CSS 控制,例如通过添加红色波浪下划线来模仿文字处理器语法错误指示符。
<p>I always spell <u>licence</u> wrong</p>
<b>
<b>
元素可用于引起对其他方面不重要的文本的注意。此元素不传达任何特殊的语义信息,仅当本节中的其他元素都不符合目的时才应使用。没有提供示例,因为我无法提出有效的用例;这就是这个元素的“最后手段”程度。
空白
当您想要换行符时,例如在编写诗歌或物理地址时,自闭合换行符元素 <br>
用于添加回车符。
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
为了在切线内容部分之间提供分隔符或主题分隔,例如在书中的章节之间或在 5,000 字的独白与用户实际寻找的食谱之间,请包含一个 <hr>
元素。HR 代表“水平规则”。虽然浏览器通常呈现水平线,但此元素具有语义含义。默认 role 是 separator
。
HTML 还有一个允许断字的元素。自闭合 <wbr>
元素向浏览器提供建议,如果单词可能溢出其容器,则这是浏览器可以选择断行的地方。这通常用于在长 URL 中的单词之间断开连接。它不会添加连字符。
例如,在 Hal 的传记中,有以字节码写出的文本,每个字节用空格分隔。字节码没有空格。为了使长字节码字符串仅在字节之间断开(如果需要换行),我们在每个断开机会都包含 <wbr>
元素
<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>
<br>
、<hr>
和 <wbr>
元素都是空元素,这意味着它们不能有任何子节点——既没有嵌套元素也没有文本。由于这些元素都没有可以存储内容的“内部”,因此它们没有结束标记。
检查您的理解程度
测试您对内联文本的知识。
应使用哪个元素来显示代码示例?
<code>
<data>
<kbd>
<ruby>
元素用于什么?