我们介绍了大部分 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>
标记和结束标记之间引入相应术语的缩写表示法。只有在首次出现缩写或首字母缩略词并对其进行定义时,才需要使用 <abbr>
。title
属性既不必要,也没有帮助。
此规则的例外情况是,如果读者普遍了解该术语,例如本系列中的 HTML 和 CSS。
定义非缩写或首字母缩略词的术语时,请使用定义 <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 使用 <span>
元素来表示 Toasty McToastface 的工作室评价底部的奇怪文本。<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 是“horizontal rule”(水平线)的缩写。虽然浏览器通常会呈现一条水平线,但此元素具有语义含义。默认角色为 separator
。
HTML 还有一个允许断字的元素。自闭合的 <wbr>
元素会向浏览器提供建议,即如果某个字词可能会溢出其容器,则浏览器可以选择在此处换行。此属性通常用于在长网址中的字词之间换行,但不会添加连字符。
例如,在 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>
元素都是空元素,这意味着它们不能有任何子节点,包括嵌套元素和文本。由于这些元素都没有可用于存储内容的“内部”,因此它们没有结束标记。
检验您的掌握情况
测试您对内嵌文本的了解程度。
应使用哪个元素来显示代码示例?
<data>
<code>
<kbd>
<ruby>
元素有何用途?