其他内嵌文本元素

我们涵盖了大部分(但并非全部)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> 元素相反;使用 来指示已添加的文本(即“inserted”),还可视需要添加 citedatetime 属性。

定义和语言支持

如果加入了缩写或首字母缩写词,请务必在首次使用时以纯文本形式提供相应字词的完整扩展版本, 随着您介绍开场白和结束语这个术语的简写形式 <abbr> 代码;除非相应字词为读者熟知,例如“HTML”和“CSS”只有在首次出现时 如果定义了缩写或首字母缩写词,则需要使用 <abbr>title 属性不必要也没用。

如果定义的术语不是缩写或首字母缩写,请使用定义 <dfn> 元素来标识要在其周围内容中定义的术语。

如果定义的字词与周围的文本使用的语言不同,请确保包含 lang 属性来标识语言。

在编写不同方向的语言时,HTML 会提供 <bdi> 元素,用于独立于其周围的文本处理潜在的双向文本。这种国际化 元素在方向未知的内容中动态插入网页时尤为有用。通过 <bdo> 元素会替换文本的当前方向, 以不同的方向呈现文本。W3C 提供了双向算法简介

某些字符集会包含位于字符上方或右侧的小注释来提供信息 发音。<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>

在切割内容的各个部分之间(例如图书章节之间或 请将 <hr> 元素。HR 表示“水平规则”。虽然浏览器通常会渲染一条水平线,但此元素具有语义含义。通过 默认角色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> 元素都是 void 元素,这意味着它们不能有任何子节点,也不能嵌套 元素或文本。因为其中都没有任何“内部”可存储内容的位置,它们没有结束标记。

检查您的理解情况

测试您对内嵌文本的掌握情况。

应使用哪个元素来显示代码示例?

<code>
正确!
<data>
请重试。
<kbd>
请重试。

<ruby> 元素的用途是什么?

包含装饰性元素。
请重试。
适用于某些语言中使用的注释。
正确!
突出显示元素的内容。
请重试。