开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

HTML内联文本语义定义单词、内容、或任意文字的语义、结构或样式。这一部分的元素包含<a>、和文本效果（数字上下标、字体粗细正斜等等）。

锚元素 -- `<a>`

<a>元素定义一个超链接。通过href属性指向网页、文件、电子邮件地址、同一页面中的某个位置或URL可以访问的任何其他内容。默认未激活时的文本内容显示蓝色且带有下划线。

<a>内的内容即使是脱离上下文也应指明链接的去向。比如“了解更多我们的产品” 比 “单击此处" 要好得多。

属性

属性名	简介
href	超链接指向的 URL，值可以是浏览器支持的任何协议。值可以是URL、URL片段（以`#`开头后接一段字符串）或两者的结合（例如：`http://www.a.com#b`）。
hreflang	指定被链接文档的语言。该属性不会指定标签中的内容所使用的语言，而是指定被`href`属性指向的文档所使用的语言。
rel	链接的URL作为空格分隔的链接类型的关系.
href	指定当前文档与被链接文档的关系。详细请查看。
target	指定在何处显示目标链接的资源。
download	此属性指示浏览器下载URL而不是导航到它，将提示用户将其保存为本地文件。
type	该属性指定在一个MIME type链接目标的形式的媒体类型。仅提供建议。
ping	包含一个以空格分隔的url列表，当跟随超链接时，将由浏览器 (在后台) 发送带有正文 PING的POST请求。
referrerpolicy	指示在获取URL时发送哪个referrer。

href属性的值为URL片段时，指向当前文档或目标文档中的内部目标位置（HTML元素的ID），如果没有对应ID的元素，则不发生变化或仅跳转到目标文档。

还可以使用href="#top"或者href="#"链接返回到页面顶部。

注意：如果没有href属性，则除了全局属性以外的其他属性将无意义。
download属性的值将作为下载保存时预填充的文件名，如果名称当中存在‘/’或‘\’，会被转化为下划线

download属性仅适用于同源URL 、blob: URL 和 data: URL 方案。

如果download属性没有值，将从以下方式生成文件名：
- Content-Disposition HTTP标头。
- URL路径中的最后一段。
- 媒体类型(来自Content-Type报头，data: URL或blob: URL)。
如果设置了HTTP头中的Content-Disposition，那么Content-Disposition属性的优先级要比download属性高，在下载时优先使用Content-Disposition属性的值。

安全性

在旧版本的浏览器当中将target的值设置为_blank，而不是使用rel=“noreferrer”或者rel=“noopener”，网站容易受到window.openerAPI攻击。

但在较新版本的浏览器当中，target='_blank'受到与rel=“noreferrer”或者rel=“noopener”同等的保护。

可访问性问题

当为<a>设置了target='_blank'，并且用户在使用时意外打开新选项卡、窗口或应用程序时，低视力状况、借助屏幕阅读技术进行导航或有认知问题的人可能会感到困惑。较旧的屏幕阅读软件甚至可能不会宣布该行为。

可以在<a>的内容当中包含提示文本：

<a target="_blank" href="https://developer.mozilla.org/zh-CN/">
  MDN(opens in new tab)
  <!-- 或者 -->
  MDN(在新标签页打开)
</a>

目前更常用的是在文本后面加上一个图标，或者当<a>的内容就是一张图片（图片链接）时，将图标或者图片的alt属性值设置为提示文本：

<a target="_blank" href="https://developer.mozilla.org/zh-CN/">
  MDN
  <img src="newtab.svg" alt="(opens in new tab)">
</a>

注意事项

<a>经常会被滥用为假按钮，也就是将<a>的href属性设置为#或者javascript:void(0)，以此来防止页面刷新，然后进行监听click事件等操作。这可能会将不正确的语义传达给如屏幕阅读器等辅助技术。

内容跨度元素 -- ``

元素是短语内容的通用行内容器，用于对文档中的行内元素进行组合，提供了一种将文本的一部分或者文档的一部分独立出来的方式。

与<div>类似，可以把他看成是行内元素中的<div>，同样，本身也不具有语义，仅当没有其他合适的语义元素可使用时使用。

内联引用元素 -- `<q>`

<q>元素表示所包含的文本是一个简短的内联引用文本。用于不需要断段的简短引用（如果需要长文本引用，请使用<blockquote>），因此其内容不要出现换行符。

大部分的现代浏览器会将<q>的内容用引号包裹，并且在不同的浏览器所显示的引号可能不同。在旧版本的浏览器则需要使用CSS添加引号。

<q>与<blockquote>类似，身上都有一个cite属性，用于指定所引用信息的源文档或信息。

强重要性元素 -- ``

元素表示其内容具有很强的重要性、严重性或紧迫性（例如警告）。通常其内容以粗体显示。

的内容可能是一个对整个页面非常重要的句子，或者是想要突出某个（些）单词比周围的其他内容更重要。

还可以表示段落的标签（页面文本的注释或者警告）。

提醒注意元素 -- ``

元素用于将读者的注意力吸引到元素的内容上，这些内容没有被赋予特别的重要性。通常用于摘要中的关键字、评论中的产品名称或其他需要表现出粗体，但是内容不重要的情况。

建议在元素身上使用class以便根据需要传达其他语义信息。这在需要改动样式时无需改动HTML轻松地处理不同应用场合的元素。

注意：和的内容默认会以粗体显示，但如果只是需要在视觉效果上呈现粗体的话，请使用CSS的font-weight属性，不要滥用和。

引文元素 -- `<cite>`

<cite>元素用于定义引用的创意作品的标题。并且必须包括该作品的标题。根据与引文元数据相关的上下文适当约定，引用可以采用缩写形式。

在<cite>标签中，可能引用的内容类型如下：

一本书。
一篇研究论文。
一篇散文。
一首诗。
乐谱。
一首歌。
戏剧或电影剧本。
一部电影。
电视节目。
一个游戏。
一座雕塑。
一幅画。
戏剧作品。
一出戏。
一部歌剧。
一部音乐剧。
一个展览。
法律案件报告。
一个计算机程序。
一个网站。
一个网页。
博客文章或评论。
论坛帖子或评论。
一条推文。
脸书帖子。
书面或口头陈述。

要包含对<blockquote>或<q> 元素中的引用材料来源的引用，请在元素上使用cite属性；使用<cite>元素提供来源的文本表示。

注意：W3C规范规定，在<cite>元素中包含的对创意作品的引用可能包括作品作者的姓名。然而，WHATWG关于<cite>的规范恰恰相反：在任何情况下，都不能包含人名。

强调元素 -- ``

元素标记强调重音的文本。用于与周围文本相比具有重音强调的单词，这些单词通常仅限于句子中的一个或多个单词并影响句子本身的含义。默认情况下，的内容呈现为斜体。

一个使用的例子："已经做完了！"或者“我们必须为此做点什么”。阅读文本的人或软件会使用口头重读，以强调的方式读出斜体中的单词。

术语文本元素 -- ``

元素表示由于某种原因需要与普通文本区别开来的文本范围。该元素的内容默认呈现出斜体。

元素的用例包括表示不同文本质量或模式的文本范围，例如：

另类声音或情绪。
分类学名称。
来自另一种语言的惯用语。
技术术语。
音译。
想法（例如“她想知道，他到底在说什么？")。
西方书写系统中的船名。

一个使用的例子：“泰坦尼克号昨晚出发了”。泰坦尼克号属于西方书写系统中的船名。

注意事项

、<cite>和、默认情况下内容都呈现为斜体，但当只是需要内容呈现为斜体时，请使用CSS的font-style属性，而不是滥用元素。
元素的名称是 italic 的缩写。在早期的HTML版本中，就只表示以斜体显示文本。但在现在有了新的定义。请确保所目标文本实际上没有其他元素进行更适当的标记时使用。

标记文本元素 -- ``

元素表示标记或突出显示的文本，用于参考或标记目的。默认情况下，元素的内容的背景颜色会呈现黄色。

当用于<q>或<blockquote>时，它通常表示原始材料中没有标记的特殊兴趣的文本，或者需要特别审查的材料，即使原作者认为它不是特别重要。就像用荧光笔在书上标记你感兴趣的段落。

已删除文本元素 -- `<del>`和已添加文本元素 -- `<ins>`

<del>标签表示一些被从文档中删除的文字内容。比如在需要显示修改记录或者源代码差异的情况使用。

<ins>元素表示已添加到文档中的文本内容。它的定义与作用和<del>正好相反，身上的属性与<del>一致，作用也一样。

<del>身上有cite和datetime两个属性，cite表示作出修改的原因的资源的 URI（例如，会议纪要）；datetime表示作出修改的时间和日期，值必须是必须是具有可选时间的有效日期字符串（格式参考），如果该值不符合规范，将没有意义。

可访问性问题

大多数屏幕阅读技术在其默认配置中不会宣布、<ins>元素的存在。可以使用CSS的content属性搭配 ::before和::after伪元素来宣布它：

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

mark::before {
  content: "[highlight start]";
}

mark::after {
  content: "[highlight end]";
}

删除线元素 -- `<s>`

<s>元素表示不再相关或不再准确的事物。默认呈现带有删除线或贯穿其中的线条的文本。

<s>在指示文档编辑时不合适;为此，请根据需要使用<del>和 <ins>元素。

可访问性问题

<s>的可访问性问题与、<ins>类似，也是使用同样的方法，注意同样的问题即可。

上标元素 -- ``

元素指定内联文本，该文本仅出于排版原因显示为上标。上标将会显示在主要文本流中字符高度的一半为基准线的上方，且字体和字号都与主要文本流一致。

的使用场景包括但不限于如下几点：

表示指数。
表示高级字母（虽然高级字母与上标不是一回事），最常见的用途之一是用法语表示某些缩写。
表示序数。

下标元素 -- ``

元素指定仅出于排版原因，应显示为下标的文本。下标将会显示在主要文本流中字符高度的一半为基准线的下方，且字体和字号都与主要文本流一致。

的使用场景包括但不限于如下几点：

表示脚注编号。
为数学变量数字标记下标（也可以使用MathML 公式）。
表示化学式中给定元素的原子数。

注意：和应该只用于排版目的。不能用于满足视觉效果（可以设置CSS的vertical-align属性值为super或者sub）。

侧面注释元素 -- ``

HTML元素表示侧面注释和小字体。默认情况下，会使文本的字体小一号。在 HTML5 中，被重新定义为表示边注释和附属细则，包括版权和法律文本，包括它的1样式含义。

的字体大小会受到父元素字体大小的影响，比如当父元素的字体大小为大号，那么的字体大小就为中等；当父元素的字体大小为中等，那么的字体大小就为小号...。除非直接使用CSS设置的字体大小。

、和可能被认为违反了结构和表示之间的分离原则，但这三个元素在HTML中都是有效的。在使用时，尽量根据场景考虑是使用CSS比较好，还是使用、和比较好。

换行符元素 -- ` `

 元素用于在文本中生成换行符（回车符）。它没有自己的尺寸或视觉输出，并且几乎无法对其进行样式设置。通常用在写诗、地址以及在希望文本中断时使用。

在使用 时，想要通过CSS增加块中文本行之间的间距，不要使用margin，而是line-height属性。

可访问性问题

使用 创建单独的文本段落不仅是不好的做法，而且对于借助屏幕阅读技术导航的人来说也是有问题的。屏幕阅读器可能会宣布元素的存在，但不会宣布 中包含的任何内容。对于使用屏幕阅读器的人来说，这可能是一种令人困惑的体验。

缩写元素 -- `<abbr>`

<abbr>元素表示缩写或首字母缩略词（比如MVP是most valuable player每个单词的首字母组成的）。

<abbr>元素身上具有全局属性，其中title属性具有特殊的语法含义，可以为缩写或首字母缩略词提供扩展，它必须且仅可包含完整的描述内容，而不包含其他任何内容。当鼠标光标悬停在元素上时，浏览器通常将此文本显示为工具提示。

在不同的浏览器中，<abbr>的默认样式可能会不同。有些浏览器肯能会会为元素添加点状下划线；有些会将<abbr>的内容添加小写大写字母的样式...可以用CSS样式覆盖。

使用说明

不是所有的缩写都要使用<abbr>标记，但在一些情况下会很有帮助：

使用缩写，并且希望在文档内容流之外提供扩展或定义。
定义读者可能不熟悉的缩写时，请使用<abbr>和提供定义的内联文本来呈现该术语。仅当内联扩展或定义不可用时，才包括 title 属性。
当需要在语义上注明缩写在文本中的存在时，这可以用于样式或脚本目的。
与<dfn>一起使用，为缩写或首字母缩略词的术语建立定义。

注意：在有单复数的语言中（即物体数量会影响句子语法的语言），<abbr>元素和其中的 title 属性应当单复数一致。这在阿拉伯语这样超过二数的语言中非常重要，在英语中也有一定的影响。

可访问性问题

在页面上首次使用首字母缩略词或缩写时完整拼写出来有助于帮助人们理解它，特别是如果内容是技术或行业术语。如果不能在文本中扩展缩写或首字母缩写，才使用title。

双向文本隔离元素 -- `<bdi>` 和双向文本替换元素 -- `<bdo>`

双向文本是可能包含从左到右排列的字符序列（LTR）和从右到左排列的字符序列（RTL）的文本，例如嵌入在英文字符串中的阿拉伯语引语。浏览器使用Unicode双向算法来处理双向文本。

在算法中，字符被赋予隐式方向性：例如，拉丁字符被视为LTR，而阿拉伯字符被视为RTL。其他一些字符（如空格和一些标点符号）被视为中性字符，阿拉伯数字方向性较弱，并根据其周围字符的方向性分配（除了数字之外，某些其他中性字符（如货币符号）将被视为数字的一部分）。

`<bdi>`

<bdi>元素用于包装文本范围，告诉浏览器的双向算法将其包含的文本与其周围的文本隔离处理。当网站动态插入一些文本并且不知道所插入文本的方向性时，它特别有用。

<bdi>中的内容不会影响周围文本的方向性，同时也不受周围文本方向性的影响。

通常，双向算法将做正确的事情，而无需提供任何特殊标记，但有时算法需要帮助。这就是<bdi>的用武之地。

<bdi>身上的全局属性dir的行为比较特殊，其默认值为auto，该值永远不会从父元素继承。除非为dir指定rtl或ltr值，否则用户代理将根据<bdi>的内容确定要使用的正确方向性。

使用示例：

`<bdo>`

<bdo>元素用于覆盖文本的当前方向性，以便其中的文本以不同的方向呈现。文本的字符是从起点沿给定方向绘制的；单个字符的方向不受影响（例如，字符不会向后绘制）。

使用dir属性设置<bdo>内容的方向，可能的值有ltr和rtl。

注意：<bdo>的dir属性与全局属性中的dir属性的效果不同，具体表现如下：

示例输出元素 -- `<samp>`

<samp>元素用于包含表示计算机程序的示例（或引用）输出的内联文本。其内容通常使用浏览器的默认等宽字体呈现。

如果需要一个元素作为网站或应用程序的JavaScript代码生成的输出的容器，应该改用 <output>元素。

键盘输入元素 -- `<kbd>`

<kbd>元素表示来自键盘、语音输入或任何其他文本输入设备的文本用户输入。它将产生一个行内元素，以浏览器的默认monospace字体显示。

使用说明

将<kbd>元素嵌套在另一个<kbd>元素中表示一个实际的按键，或是该输入机制下的某个单位输入。
将<kbd>元素嵌套在<samp>元素中表示系统已回显给用户的输入。
将<samp>元素嵌套在<kbd>元素中表示基于系统呈现的文本的输入，例如菜单和菜单项的名称，或屏幕上显示的按钮的名称。例如解释如何在“文件”菜单中选择“新建文档”选项。

Ruby相关

Ruby注释元素 -- `<ruby>`

<ruby>元素表示在基本文本的上方、下方或旁边呈现的小批注，通常用于显示东亚字符的发音。同时也可用于注释其他类型的文本。

Ruby 回退括号元素 -- `<rp>`

<ruby>元素用于为不支持使用<ruby>元素显示ruby注释的浏览器提供回退括号。一个<rp>元素应将每个左括号和右括号括起来，这些括号将包含批注文本的<rt>元素括起来。

拼音注释用于显示东亚字符的发音，例如使用日语假名或台湾 bopomofo 字符。<rp>元素用于缺乏<ruby>元素支持的情况；<rp>内容提供了应显示的内容，以指示 Ruby 注释的存在，通常是括号。

拼音文本元素 -- `<rt>`

<rt>元素指定ruby注释的拼音文本组件，该组件用于提供东亚版式的发音、翻译或音译信息。必须包含在<ruby>元素中。

使用示例：

变量元素 -- `<var>`

<var>元素表示数学表达式或编程上下文中变量的名称。默认情况下其内容以当前字体的斜体版本呈现。

使用示例：

<p>变量<var>min</var>表示最小值，变量<var>max</var>表示最大值</p>

定义元素 -- `<dfn>`

<dfn>元素用于指示在定义短语或句子的上下文中定义的术语。其具有特殊的title属性。

所定义的术语应遵循以下规则:

如果<dfn>元素具有title属性，则将title属性的值视为正在定义的术语。元素中仍然必须有文本，但文本可以是缩写(可能使用<abbr>进行包裹)或术语的另一种形式。
如果<dfn>包含一个单独的子元素，并且它自己没有任何文本内容，并且子元素是一个本身具有title属性的<abbr>元素，那么<abbr>元素title属性的确切值就是定义的术语。
除以上规则，<dfn>元素的文本内容是要定义的术语。

如果在<dfn>元素上包含id属性，则可以使用<a>元素链接到该属性。此类链接应该是该术语的使用，目的是读者可以通过单击该术语的链接快速导航到该术语的定义。

换行机会元素 -- ``

元素表示一个断行机会 -- 在文本中的某个位置，浏览器可以有选择地断行，但它的断行规则不会在该位置创建断行符。

如果单词太长，或者担心浏览器会在错误的位置换行，可以使用添加一个换行机会：

<!-- 缩小浏览器窗口或者一行装不下过长的单词时，浏览器会在有<wbr>的位置换行 -->
<!-- 注意：如下<wbr>ßenbaupr<wbr>，ßenbaupr不是<wbr>的内容，ßenbaupr是一个空标签。 -->
<p>Fernstra<wbr>ßenbaupr<wbr>ivatfinan<wbr>zierungs<wbr>gesetz</p>

未明确的批注（下划线）元素 -- ``

元素表示一段内联文本，应该以一种表明它具有非文本注释的方式呈现。默认情况下其内容具有下划线。

在旧版本的浏览器中，该元素被称为下划线元素，如今具有了新的语义：将文本标记为应用了某种形式的非文本注释。如果需要为文本添加下划线，请使用CSS的text-decoration属性代替。

元素通常用于注释拼写错误、应用专有名称标记来表示中文文本中的专有名称以及其他形式的注释。不要使用为显示目的在文本下划线，或表示图书的标题。

内联代码元素 -- `<code>`

<code>元素表示一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。

若要表示多行代码，请将<code>元素包装在<pre>元素中。<code>元素本身仅表示单个代码短语或代码行。

可以为<code>定义CSS规则，以覆盖浏览器的默认字体。用户设置的首选项可能优先于指定的CSS。

数据元素 -- `<data>`

<data>元素将给定的内容与机器可读的翻译链接起来。使用其身上的value属性指定元素内容的机器可读翻译。

使用示例：

<!-- 显示产品名称，但也将每个名称与产品编号相关联。 -->
<p>New Products</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

HTML -- 内联文本语义和编辑标识

锚元素 -- <a>

属性

安全性

可访问性问题

注意事项

内容跨度元素 -- <span>

内联引用元素 -- <q>

强重要性元素 -- <strong>

提醒注意元素 -- <b>

引文元素 -- <cite>

强调元素 -- <em>

术语文本元素 -- <i>

注意事项

标记文本元素 -- <mark>

已删除文本元素 -- <del>和已添加文本元素 -- <ins>

可访问性问题

删除线元素 -- <s>

可访问性问题

上标元素 -- <sup>

下标元素 -- <sub>

侧面注释元素 -- <small>

换行符元素 -- <br>

可访问性问题

缩写元素 -- <abbr>

使用说明

可访问性问题

双向文本隔离元素 -- <bdi> 和 双向文本替换元素 -- <bdo>

<bdi>

<bdo>

示例输出元素 -- <samp>

键盘输入元素 -- <kbd>

使用说明

Ruby相关

Ruby注释元素 -- <ruby>

Ruby 回退括号元素 -- <rp>

拼音文本元素 -- <rt>

变量元素 -- <var>

定义元素 -- <dfn>

换行机会元素 -- <wbr>

未明确的批注（下划线）元素 -- <u>

内联代码元素 -- <code>

数据元素 -- <data>

锚元素 -- `<a>`

内容跨度元素 -- `<span>`

内联引用元素 -- `<q>`

强重要性元素 -- `<strong>`

提醒注意元素 -- `<b>`

引文元素 -- `<cite>`

强调元素 -- `<em>`

术语文本元素 -- `<i>`

标记文本元素 -- `<mark>`

已删除文本元素 -- `<del>`和已添加文本元素 -- `<ins>`

删除线元素 -- `<s>`

上标元素 -- `<sup>`

下标元素 -- `<sub>`

侧面注释元素 -- `<small>`

换行符元素 -- `<br>`

缩写元素 -- `<abbr>`

双向文本隔离元素 -- `<bdi>` 和双向文本替换元素 -- `<bdo>`

`<bdi>`

`<bdo>`

示例输出元素 -- `<samp>`

键盘输入元素 -- `<kbd>`

Ruby注释元素 -- `<ruby>`

Ruby 回退括号元素 -- `<rp>`

拼音文本元素 -- `<rt>`

变量元素 -- `<var>`

定义元素 -- `<dfn>`

换行机会元素 -- `<wbr>`

未明确的批注（下划线）元素 -- `<u>`

内联代码元素 -- `<code>`

数据元素 -- `<data>`