HTML有许多标签，许多人每天都在使用，比如<div>，<p>和<a>。但也有一些很少被注意到的隐藏宝藏。这些标签可以帮助网站更具吸引力、可访问性和意义，而不需要太多额外的努力。

在本文中，我们将讨论一组独特的HTML元素，可以增强您的网页。它们提供特定的功能，用于格式化文本、改善可读性和添加交互功能。

目录

  1. <q>标签：短内联引用

  2. <s>标签：删除线文本

  3. <mark>标签：高亮文本

  4. <ruby>标签：注释东亚语言文本

  5. <time>标签：语义化时间和日期

  6. <bdi>标签：双向文本隔离

  7. <dfn>标签：定义术语

  8. <wbr>标签：换行机会

  9. <ins>标签：插入文本

  10. <del>标签：删除的文本

  11. 结论

<q>标签：短内联引用

<q>标签用于在段落中添加短引用。它有助于使引用看起来与众不同且更易于识别，而不会打乱文本的流程。该标签会自动在内容周围添加引号。

描述和语法

<q>标签的基本结构很简单：

<p>She said, <q>This is amazing!</q></p>

这将显示为：
她说：“这太棒了！”

与<blockquote>元素的区别

<q>标签用于句子中的短引用。另一方面，<blockquote>元素用于通常需要自己的空间或段落的较长引用。

例如：

<blockquote>
  "This is a long quote that needs its own space. It is different from a short quote."
</blockquote>

此块将显示为缩进，并旨在突出显示更大的引用文本块。

用例：在段落中添加引用

<q>标签非常适合在句子中提到引用而不使其分隔过多的情况。例如，在文章或博客中引用某人时：

<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>

在这种情况下，<q>标签使引用保持简短，并置于同一段落中。

教授在课堂上说，熟能生巧。

浏览器兼容性和样式提示

大多数现代浏览器会自动为<q>标签内的内容添加引号。但如果需要，您可以使用CSS更改其外观。以下是您可以样式化它的方法：

q {
  quotes: "«" "»";
  font-style: italic;
}

这段代码将把引号更改为法式引号（« 和 »），并使引用变为斜体。

大多数浏览器支持<q>标签，因此您无需担心现代用户的兼容性问题。但较旧的浏览器可能需要额外的关注，因此始终测试您的受众是否使用旧版本。

<s>标签：删除线文本

<s>标签用于显示不再正确、相关或已被移除的文本。它在文本中间加上一条线，我们称之为“删除线”。这个标签通常用于表示已被编辑或更新的内容。

解释和用法

<s>标签使用起来很简单。将其包裹在您想要加删除线的文本周围：

<p>This product was <s>$50</s> now only $30!</p>

这将显示为：
这款产品原价$50现在仅需$30！

常见用例：指示已移除或不相关的内容

<s> 标签非常适合展示价格变化、编辑或不再有效的内容。例如：

价格更新：

<p><s>$75</s> $50 (Limited Offer!)</p>

$75 $50（限时优惠！）

更正或变更：

<p><s>Old website address</s> New website address</p>

旧网站地址 新网站地址

不再相关的内容：

<p>This feature is <s>no longer available</s>.</p>

此功能已不再可用。

使用 CSS 的样式可能性

您可以使用 CSS 自定义删除线的外观。例如，您可以更改线条或文本的颜色：

s {
  text-decoration: line-through;
  color: red;
}

在这种情况下，文本将有一条红色的删除线，更加强调其被删除的事实。

语义意义与视觉装饰

<s> 标签具有一定的语义意义。它通常表示曾经有效但现在不正确或过时的内容。它不仅仅是样式的变化。例如，它非常适合展示法律文件中的变更、博客文章中的更正或价格的更新。

另一方面，如果您只是出于视觉装饰而使用删除线，而并不意味着文本是错误的，那么最好直接使用 CSS，如下所示：

span.strike {
  text-decoration: line-through;
}

然后在您的 HTML 中应用它：

<p>This text is <span class="strike">crossed out</span> just for fun!</p>

这种方法纯粹用于样式，并不具有与<s> 标签相同的意义。

<mark> 标签：高亮文本

<mark> 标签用于突出显示文本。它有助于引起对您内容某些部分的注意，使其更加显眼。默认情况下，当使用 <mark> 标签时，浏览器会用黄色背景突出显示文本。

<mark> 标签的目的

<mark> 标签非常适合当您想强调一些重要内容时。它通常用于显示搜索结果、最近的更改或任何需要特别关注的文本。

以下是它的工作原理示例：

<p>This is a <mark>highlighted</mark> word.</p>

这将显示为：
这是一个 突出显示的 词。

使用 <mark> 强调或搜索结果的最佳实践

突出关键术语：如果您想在文章或博客中强调重要的单词或短语，<mark> 标签是一个简单的方法：

<p>The most important concept here is <mark>efficiency</mark>.</p>

这里最重要的概念是 效率。

搜索结果：在网页上显示搜索结果时，使用 <mark> 标签突出匹配的术语可以使用户更容易找到他们所寻找的内容：

<p>Your search for <mark>HTML</mark> found these results:</p>

您搜索的 HTML 找到了这些结果：

最近更新：您还可以使用 <mark> 标签显示您内容中的新更新或更改：

<p>We have recently added the <mark>new feature</mark> to the app.</p>

我们最近在应用程序中添加了 新功能。

如何有效地样式化突出显示的文本

虽然<mark>的默认颜色是黄色，但您可以使用CSS将其更改为与您网站的设计相匹配。以下是自定义高亮文本的示例：

mark {
  background-color: lightblue;
  color: black;
  padding: 2px;
}

这将使文本具有浅蓝色背景和黑色文本。

如果您希望文本更加突出，可以添加边框或更改字体样式：

mark {
  background-color: yellow;
  color: black;
  font-weight: bold;
  border-radius: 4px;
}

这将使高亮文本看起来更加精致和显眼。

浏览器支持和可访问性考虑因素

<mark>标签在所有现代浏览器中均受支持，因此您不会面临任何兼容性问题。只需确保您选择的背景颜色提供足够的对比度以便于阅读，尤其是对于有视觉障碍的用户。

使用浅色背景与深色文本是一个良好的经验法则。测试颜色对比度可以确保高亮内容对所有人都可访问，包括使用屏幕阅读器的用户。

<ruby>标签：注释东亚语言文本

<ruby>标签用于为文本添加小注释，常见于日语或汉语等东亚语言。这些注释帮助读者理解发音或含义，特别是在字符复杂或不熟悉时。

<ruby>的定义和用例

在日语等语言中，通常会在字符上方或旁边使用小指南来显示发音。<ruby>标签将主文本与小注释配对，通常使用更简单的书写形式。

这里是一个基本示例：

<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>

这显示了日语汉字 汉字 及其发音（振假名）显示在其上方或旁边，如 かんじ（kanji）。


漢 かん 字 じ

<rp> 和 <rt> 子元素的重要性

<rt> 元素用于 <ruby> 标签内，定义主要文本的注释（如发音）。它代表“ruby text”。

<ruby>漢 <rt>かん</rt></ruby>

这将显示 汉 及其上方的注释 かん（kan）。


漢 かん

<rp> 元素，意为“ruby 括号”，用于作为不支持 <ruby> 标签的浏览器的后备方案。它将额外字符（如括号）包裹在 ruby 文本周围，以显示这是一个注释：

<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>

如果浏览器不支持 ruby 注释，它将显示发音在括号内，如下所示：
汉 (かん)。

实用示例：语言学习的 Ruby 注释

<ruby> 标签是语言学习者的一个有用工具。它可以直接在不熟悉的单词或字符上方或旁边显示发音。这使得初学者更容易阅读和学习新词汇。

例如，假设你想帮助某人学习中文单词“人”：

<ruby>人 <rt>rén</rt></ruby>

这将显示 人 及其上方的发音 rén。


人 rén

对于更长的句子：

<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>

这帮助学生同时看到字符和正确的发音。

我 wǒ 是 shì 学生 xuéshēng.

跨浏览器兼容性和渲染考虑

大多数现代浏览器支持<ruby>标签，但较旧的浏览器可能无法正确渲染。这时<rp>元素就派上用场，确保即使浏览器不支持ruby文本，注释仍然可读。

为了可访问性，请确保注释周围有足够的空间，以便于阅读。您还可以使用CSS来调整注释的外观：

ruby rt {
  font-size: 0.75em;
  color: gray;
}

这将使ruby文本更小，并采用不同的颜色，以便在视觉上与主要内容分开。

使用<ruby>是一种提高语言学习者或对某些脚本不熟悉的读者可读性的好方法。只需记得检查浏览器支持，并为不同设备提供备用方案，以获得更好的用户体验。

<time>标签：语义时间和日期

<time>标签用于标记机器可读格式的日期或时间。它帮助搜索引擎、浏览器和其他工具更清晰地识别与时间相关的信息，这对于提高搜索结果的可见性或更好地解析数据非常有用。

使用<time>标签进行机器可读的日期和时间

当您使用<time>标签时，它允许您提供易于人和计算机阅读的日期或时间。这在博客、新闻文章或事件页面上尤其有帮助。

以下是一个示例：

<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>

用户将看到文本“2024年10月1日”，但datetime属性提供了日期的机器可读版本。搜索引擎现在可以轻松解释这个日期。

发布于

您还可以使用<time>标记来显示时间：

<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>

这样用户和机器都清楚活动发生的时间。

活动开始时间为。

<time>如何改善事件详细信息的SEO和数据解析

搜索引擎依赖结构化数据来更好地理解内容。<time>标记让它们更清楚地了解事件、出版物或截止日期的发生时间，提高了搜索结果的相关性。例如，搜索引擎可以更好地显示博客文章的发布日期或事件的时间。

对于事件页面，以下示例提供了既人类友好又机器友好的时间信息：

<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>

然后，搜索引擎和网络爬虫可以提取这些数据并将其用于在搜索结果中创建丰富片段，帮助事件引起关注。

在文章、博客和事件页面中的使用示例

以下是一些实际示例，演示如何使用<time>标记：

  1. 博客文章: 您可以显示文章的发布时间或最后更新时间：

     <p>最后更新时间 <time datetime="2024-09-28">2024年9月28日</time>.</p>

  2. 活动列表：活动网站可以使用<time>标记列出活动将举行的时间：

     <p>我们的下一个聚会将于<time datetime="2024-11-10">2024年11月10日</time>在<time datetime="18:00">下午6点</time>举行。</p>

  3. 截止日期: 在呈现重要截止日期时，使用<time>标签以提高清晰度：

     <p>请在<time datetime="2024-10-30T23:59">2024年10月30日，晚上11:59</time>之前提交您的申请。</p>

在所有这些示例中，datetime属性确保计算机能够正确读取时间信息，同时用户可以看到更易读的版本。

浏览器支持和可访问性

<time>标签在现代浏览器中得到了广泛支持。它还改善了可访问性，因为屏幕阅读器可以更准确地解释日期和时间，从而为残障用户提供更好的体验。

<bdi>标签：双向文本隔离

<bdi>标签代表“双向隔离”，用于避免多语言网站上的文本方向问题。当处理包含从左到右（LTR）和从右到左（RTL）语言的内容时，这个标签尤其有用。

<bdi>标签在多语言网站中的作用

当混合具有不同文本方向的语言，比如英语（LTR）和阿拉伯语（RTL）时，文本的自然流动有时会变得混乱。<bdi>标签有助于保持文本布局清晰，确保每个文本部分无论语言方向如何都能正确显示。

例如，如果要显示用户输入（比如用户名）以及其他文本，而不知道用户名将使用哪种语言，可以使用<bdi>来确保不影响文本流。

如何使用<bdi>来避免文本方向问题

<bdi>标签包裹您想要隔离的文本部分，并防止文本方向受周围内容影响。

以下是一个简单示例：

<p>User <bdi>اسم</bdi> has logged in.</p>

如果用户名是阿拉伯语（从右向左阅读），<bdi>标签确保句子的其余部分（英语，从左到右阅读）不会被打乱。没有<bdi>标签，由于文本方向混合，句子可能显示不正确。

另一个带有数字的例子：

<p>Invoice number: <bdi>#1234</bdi></p>

如果发票号码包含不同方向的文本或数字，<bdi> 标记可确保格式正确。

<bdi> 的示例

<bdi> 标记通常用于多语言应用程序、用户生成内容平台以及同时处理多种语言的网站。例如，允许用户输入数据（如姓名或地址）的网站可能会使用 <bdi> 来确保文本对齐正确。

以下是论坛上的一个示例：

<p><bdi>مستخدم</bdi> liked your post!</p>

没有 <bdi>，文本可能显示不自然，但使用它后，阿拉伯语用户名和英文文本都能正确显示。

浏览器兼容性

<bdi> 标记在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari 和 Edge。这是一个轻量级的解决方案，不需要特殊样式，有助于在处理多语言文本时保持内容布局整洁。

<dfn> 标记：定义术语

<dfn> 标记用于标记网页内首次出现的待定义术语。它帮助读者快速识别特定单词或短语是一个定义，尤其在技术写作中，提高内容的清晰度。

如何使用 <dfn> 标记标记定义

<dfn> 标记使用简单。将其包裹在要定义的单词或短语周围。通常，该术语会出现在其含义解释附近。

示例：

<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>

在这里，<dfn> 标签突出显示了“DOM”这个被定义的术语。

DOM（文档对象模型）是用于web文档的编程接口。

提供文章内解释的最佳实践

使用<dfn>标签时，请确保你所定义的术语紧随其解释。这样可以保持清晰，并帮助读者立即将术语与其含义联系起来。

另外，最好只在首次引入术语时使用<dfn>，因为多次重复可能会使读者感到困惑。

例如，在关于HTML的技术文章中：

<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>

在这种情况下，首次提到“API”时进行了定义，后续提到“API”的地方就不需要再使用<dfn>标签了。

<dfn>如何提升技术内容的清晰度

在技术写作中使用<dfn>标签是使内容更易于理解的好方法。它清晰地向读者表明您何时介绍新术语，这在解释复杂概念时尤其有用。这有助于提高可读性，并使用户更快地掌握关键概念。

通过使用<dfn>标记定义，搜索引擎和其他工具可能也能更好地解释您的内容，使其更易访问。例如，技术词汇表或教育网站可以使用<dfn>突出显示其术语。

<dfn>的示例

<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>

在这个句子中，读者首次接触到术语“URL”，随后有清晰的解释。使用<dfn>标签介绍术语的方法有助于使技术内容更易阅读和理解，特别是对于不熟悉该主题的人。

<wbr>标签：换行机会

<wbr>标签用于建议何处可以拆分单词或URL以创建需要的换行。在处理长单词、URL或可能破坏网页布局的任何文本时，这将非常有用。

<wbr>标签是什么，为什么对于长单词或URL至关重要

有时，长单词或URL可能通过引起水平滚动或破坏布局而混乱网页设计。<wbr>标签向浏览器提供单词拆分的提示，但仅在必要时才会拆分。这有助于保持文本可读性并防止溢出。

例如，如果您有一个长URL，您可以放置<wbr>标签告诉浏览器在何处可以拆分文本：

<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>

如果浏览器需要拆分URL，它会在<wbr>之后进行拆分，确保设计保持完整。

控制单词换行和文本溢出的最佳实践

应该在可能导致溢出问题的地方使用<wbr>标签，例如长的技术术语、电子邮件地址或URL。但不要过度使用，因为不必要的拆分可能会使文本更难阅读。

以下是另一个包含长单词的示例：

<p>This word is too long: anti<wbr>disestablishmentarianism.</p>

如果单词太长而超出一行，浏览器会在”anti-“后拆分，而不会影响可读性。

结合CSS，您还可以控制换行和文本溢出，以获得更好的效果：

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

这种CSS确保文本在必要时能整齐换行，而使用<wbr>可以更好地控制断行位置。

<wr>的浏览器支持和潜在挑战

<wbr>标签在所有主流浏览器中受支持，包括Chrome、Firefox、Safari和Edge。它轻量且不需要任何特殊样式即可使用。

但需要注意的一点是，如果过度使用该标签，当内容调整大小或在不同屏幕尺寸上查看时，文本断行可能会显得不自然。

例如：

<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>

在这种情况下，您可以避免长电子邮件地址导致布局问题，但是电子邮件在不同屏幕宽度下可能会在不同位置出现断行。

在预期出现不自然断行的长文本字符串时，请使用<wbr>，以确保设计在各种设备上都清晰且功能正常。

<ins>标签：插入的文本

<ins>标签用于显示已添加到文档中的文本。在跟踪编辑、更新或更改文档时常常很有帮助。它还带有默认下划线以突出新内容。

<ins>标签是什么，与<s>标签相比有何不同？

<ins> 标签用于标记插入的内容，而 <s> 标签则用于表示已删除或不再相关的文本。当需要在文档中显示更改，例如更新或修订时，这两个标签都非常有用。

示例：

<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>

在这里， <ins> 标签突出显示新增的内容，而 <s> 标签则显示已被划掉的过时内容。

这是新增的文本。

这是 旧文本，不再有效。

用于跟踪文档编辑或版本管理

<ins> 标签通常用于管理需要版本控制的文档或需要可见编辑的情况。例如，您可以在协作写作平台或法律文档中使用它，以显示哪些部分已被添加。

带有更改的文档示例：

<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>

这使读者清楚地看到“数据隐私”部分是最近添加的。

在软件开发或内容管理中，您可能会使用 <ins> 标签来显示在版本控制文件中新增的文本，使得跟踪编辑和修订变得更加容易。

强调更改的样式选项

<ins> 标签的默认外观是带下划线的，但您可以使用 CSS 自定义它，以更好地强调，特别是当您希望更改更突出时。

以下是如何用不同的视觉效果来样式化 <ins> 标签：

ins {
  background-color: #d4edda;
  color: green;
  text-decoration: none; /* 删除默认下划线 */
}

这将使插入的文本呈绿色，并具有浅绿色的背景，使其更加显眼。

您还可以添加不同的样式，如加粗字体或边框：

ins {
  font-weight: bold;
  border-bottom: 2px solid green;
}

这些样式选项使用户更容易识别已添加或更改的内容，提高了文档编辑的可读性和透明性。

总的来说，<ins>标签是一种简单但有效的跟踪插入内容的方式，非常适用于技术文档和需要清晰可见修订的协作平台。

<del>标签：已删除的文本

<del>标签用于显示已从文档中删除或移除的文本。该标签默认通过文本添加删除线，使已删除的内容易于识别。在需要跟踪更改或修订的情况下尤为有用。

<del>标签的目的和用法：删除线文本

<del>标签的主要作用是视觉上显示某些内容已被删除。在文档、文章或代码中很常见，需要向读者显示更改。已删除的文本通常会有删除线，表示不再相关或有效。

示例：

<p>This product costs <del>$50</del> $40 now.</p>

在此示例中，价格更改清晰可见。旧价格（$50）被划掉，新价格（$40）紧随其后。

如何与<ins>结合以跟踪修订

<del> 标签可以与 <ins> 标签配对使用，以显示被删除和新添加的内容，非常适合跟踪编辑或修订。这在协作写作、法律文件或任何需要清晰记录更改的情况下都非常有用。

修订跟踪示例：

<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>

在这里，很容易看出“星期一”被替换为“星期二”，读者可以清楚地知道发生了什么变化。

展示和样式化删除内容的最佳实践

默认情况下，<del> 标签对文本应用删除线，但您可以进一步使用 CSS 进行样式调整，以使其更显眼或符合您的设计需求。

以下是自定义删除文本外观的示例：

del {
  color: red;
  text-decoration: line-through;
}

这使得删除的文本呈现为红色，吸引更多注意。您还可以将其与其他格式相结合，例如使文本褪色：

del {
  color: gray;
  opacity: 0.7;
}

这种样式减少了对删除内容的强调，使其不那么分散注意力，但仍然对读者可见。

<del> 标签提供了一种简单有效的方式来跟踪和显示更改，特别是与 <ins> 标签结合使用时。对于保持文档透明和清晰以供任何审阅编辑或更新的人来说，这一点至关重要。

结论

利用这些独特的 HTML 元素扩展了网络上的可能性，有助于创建更有意义和可访问的内容。像 <q>、<s>、<mark>、<ruby>、<time>、<bdi>、<dfn>、<wbr>、<ins> 和 <del> 这些标签各自为特定任务带来了独特的优势。这些元素不仅仅是用于美化文本；它们还增加了上下文，增强了用户体验，并改善了文档结构。

正确使用这些标签不仅使您的网页更加清晰，还提升了在设备和搜索引擎之间的兼容性。在使用这些元素时，请考虑每个元素如何同时服务于视觉呈现和信息结构。它们提供了简单但强大的方式，使网站更丰富、更易理解，同时惠及广泛的用户群体。

如果您有任何问题或建议，请随时在 LinkedIn 上与我联系。如果您喜欢这些内容，可以考虑 请我喝咖啡 来支持更多开发者友好内容的创作。