HTML 内联文本语义
使用 HTML 内联文本语义定义单词、内容或任意文字的语义、结构或样式，以增强文档的可读性、语义化和功能性。
元素及描述
| 元素 | 描述 |
|---|---|
<a> | 通过其 href 属性创建超链接，可指向其它网页、文件、电子邮件地址、页面内位置或任何其他 URL。 |
<abbr> | 用于代表缩写。 |
<b> | 用于吸引读者注意到其内容（无特别强调语义）。通常渲染为粗体，不建议单纯为显示粗体使用 <b>，可通过 CSS 的 font-weight 属性实现。 |
<bdi> | 告诉浏览器双向算法将其内容与周围文本隔离，适用于动态插入未知方向性的文本。 |
<bdo> | 覆盖文本方向性，改变文本的渲染方向。 |
<br> | 插入换行符号，用于诗歌、地址等需要强制换行的文本。 |
<cite> | 包含引用作品的标题。 |
<code> | 以等宽字体显示计算机代码片段。 |
<data> | 关联内容和机器可读的翻译，若与时间或日期相关应使用 <time> 元素。 |
<dfn> | 表示术语定义，通常与最近的上下文配合定义术语含义。 |
<em> | 标记需着重阅读的内容，可嵌套，嵌套越深表示重点程度越高。 |
<i> | 表示需要区别于普通文本的内容，如术语、分类名称等，通常渲染为斜体。 |
<kbd> | 表示用户输入内容（如键盘输入），通常以等宽字体显示。 |
<mark> | 表示与上下文相关的重要文本，通常高亮显示。 |
<q> | 表示短的内联引用文本，现代浏览器通常会为其添加引号。适合短引用，长引用请使用 <blockquote>。 |
<rp> | 为不支持 <ruby> 的浏览器提供回退括号，包裹 <rt> 元素内容的左括号或右括号。 |
<rt> | 用于 <ruby> 元素，提供注解文本（如东亚字符的发音或翻译）。 |
<ruby> | 展示小注解，通常用于东亚字符的发音注释，也可用于其他文本注解。 |
<s> | 使用删除线渲染表示已不相关或不准确的文本，不适合文档编辑，请用 <del> 或 <ins>。 |
<samp> | 用于标识程序输出，通常以等宽字体渲染。 |
<small> | 表示旁注或小字体内容（如版权信息），默认以小一号字体显示。 |
<span> | 通用行级内容容器，无语义，可与 class 或 id 属性配合用于样式或分组。 |
<strong> | 表示内容重要性，通常渲染为粗体。 |
<sub> | 定义下标内容，通常字体较小且位置更低。 |
<sup> | 定义上标内容，通常字体较小且位置更高。 |
<time> | 表示特定时间或时间段，可通过 datetime 属性提供机器可读格式以增强搜索引擎优化或自定义功能（如提醒）。 |
<u> | 标记为非文本化内容，默认渲染为下划线，可通过 CSS 修改样式。 |
<var> | 表示变量名称，通常渲染为斜体，用于数学表达式或编程上下文。 |
<wbr> | 指定文本中可能的换行位置，浏览器可选择在此位置换行。 |
标签详细说明和示例
1. 超链接：<a>
<p>点击 <a href="https://example.com">这里</a> 访问官网。</p>
2. 缩写：<abbr>
<p>使用 <abbr title="HyperText Markup Language">HTML</abbr> 构建网页。</p>
3. 无语义粗体：<b>
<p>重要信息：<b>优惠活动即将结束！</b></p>
4. 文本方向隔离：<bdi>
阿拉伯语是RTL的，而 $500 是LTR的，浏览器可能会打乱显示方向，导致内容混乱，比如：
$500 علي，这时候需要我们的bdi隔离文本。
<p>用户名：<bdi>علي</bdi> 的余额是 $500。</p>
5. 指定文本方向：<bdo>
html
复制代码
<p><bdo dir="rtl">文本从右向左显示</bdo></p>
6. 换行符：<br>
<p>地址：<br>123 Main St<br>City, Country</p>
7. 引用作品：<cite>
<p>这本书由 <cite>J.K. Rowling</cite> 所著。</p>
8. 代码片段：<code>
<p>运行以下命令：<code>npm install</code></p>
9. 机器可读数据：<data>
<p>产品库存：<data value="100">一百件</data></p>
10. 定义术语：<dfn>
html
复制代码
<p><dfn>HTML</dfn> 是超文本标记语言的缩写。</p>
11. 强调：<em>
<p>这个问题 <em>必须</em> 立即解决！</p>
12. 斜体内容：<i>
<p>外来语示例：<i>et cetera</i> 意为“等等”。</p>
13. 用户输入：<kbd>
<p>请按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制。</p>
14. 高亮显示：<mark>
<p>关键点：<mark>提高效率</mark> 是我们的目标。</p>
15. 短引用：<q>
<p>莎士比亚曾说：<q>生存还是毁灭，这是一个问题。</q></p>
16. 注解回退：<rp> 和 <ruby>
<p><ruby>汉<rt>hàn</rt><rp>(</rp>语<rp>)</rp></ruby></p>
17. 删除线：<s>
<p>原价 <s>$50</s>，现价 $30！</p>
18. 程序输出：<samp>
<p>程序结果：<samp>404 Not Found</samp></p>
19. 次要文本：<small>
<p><small>版权所有 © 2024</small></p>
20. 无语义容器：<span>
<p>请将 <span style="color: red;">重要信息</span> 标记出来。</p>
21. 重要强调：<strong>
<p>请注意：<strong>活动仅限今天！</strong></p>
22. 下标：<sub>
html
复制代码
<p>化学公式：H<sub>2</sub>O</p>
23. 上标：<sup>
<p>公式：E = mc<sup>2</sup></p>
24. 时间：<time>
<p>会议时间：<time datetime="2024-11-29T10:00">2024年11月29日 上午10点</time></p>
25. 下划线：<u>
<p><u>需要关注的内容：</u> 销售数据。</p>
26. 变量：<var>
<p>计算面积：<var>width</var> × <var>height</var></p>
27. 换行提示：<wbr>
<p>推荐阅读：非常长的单词<wbr>折行处理。</p>
