您知道这 14 个有用的 HTML 标签吗？

2025-06-09

您知道这 14 个有用的 HTML 标签吗？

这篇文章最初发表在kais.blog上。

让我们一起进步！ 关注我的 Twitter，获取每日开发者技巧。感谢您阅读我的内容！

HTML 是一种标记语言。这意味着您可以通过添加标签来为文档添加结构和语义。这些标签有助于浏览器渲染，并帮助机器理解您的内容。此外，它们还有助于防止可访问性问题。因此，您应该花时间为您的内容添加正确的标签。

虽然 HTML 已被广泛了解和使用，但仍有许多不常见但实用的 HTML 标签。在​​这篇文章中，我想向你展示一些你可能不知道的精彩 HTML 标签。

<abbr>：缩写

您可以使用该<abbr>标签来定义缩写或首字母缩略词。它对网页的可访问性有很大帮助。结合该title属性，您可以添加一个在鼠标悬停在元素上时显示的小工具提示。

<abbr title="Hypertext Markup Language">HTML</abbr>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

<address>：联系地址

使用<address>标签来表示个人或组织的联系信息。

<address>
  John Doe<br>
  <a href="mailto:john@example.com">john@example.com</a>
</address>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

<blockquote>：块引用

该<blockquote>标签表示该部分内容引用自其他来源。您还可以使用该cite属性添加引用来源的 URL。

<blockquote cite="https://alice.book">
  <p>
    It's no use going back to yesterday, because I was a different person then.
  </p>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

<cite>：引用

标签<cite>通常与标签一起使用<blockquote>。它应该用来表示创意作品的标题。

<blockquote>
  <p>
    It's no use going back to yesterday, because I was a different person then.
  </p>
  <footer>
    <cite>Alice's Adventures in Wonderland</cite> by Lewis Carroll
  </footer>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

<figure> & <figcaption>：带有可选标题的图形

您可以使用标签<figure>标记独立内容，例如图表或照片。将其与<figcaption>标签结合使用，可以为元素定义标题<figure>。

<figure>
  <img src="diagram.png" alt="Net income of households by household type">
  <figcaption>Fig.1 - Net income of households by household type</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

<kbd>：键盘输入

您可以使用该<kbd>标签定义键盘输入。它通常以等宽字体呈现。

<p>
  Open the task manager by pressing <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>
</p>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

<map>：图像地图

使用此<map>标签，您可以创建带有可点击区域的图片。您可以指定图片的不同区域如何链接到不同的 URL。

为此，您必须将usemap属性添加到标签中<img>。此外，您的地图必须使用多个<area>标签来标记不同的区域。

<img src="office.jpg" alt="Floor plan" usemap="#floorplan">

<map name="floorplan">
  <area shape="rect" coords="…" alt="Conference Room" href="conference-room.htm">
  <area shape="rect" coords="…" alt="Kitchen" href="kitchen.htm">
  …
</map>
Enter fullscreen mode Exit fullscreen mode

不幸的是，详细解释的用法<map>超出了本文的范围。

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

<noscript>：JavaScript 禁用时可见

<noscript>仅当用户禁用 JavaScript 时，此标签才会呈现其内容。例如，您可以添加一条小提示，提醒用户应启用 JavaScript。如果用户已启用 JavaScript，则此提示会被隐藏。

<noscript>
  For full functionality of this site it is necessary to enable JavaScript. Please enable JavaScript in your browser.
</noscript>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

<progress>：进度指示器

使用<progress>标签显示任务的进度条。另外，<label>出于无障碍访问的考虑，请务必添加标签。

<label for="file">Uploading progress</label>
<progress id="file" value="28" max="100">28%</progress>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

<sub> & <sup>：下标 & 上标

该<sub>标签定义下标文本。内容以较低的基线和较小的文本大小呈现。这在例如化学公式中很有用：

Despite its dangers, Dihydrogen monoxide (H<sub>2</sub>O) is often used.
Enter fullscreen mode Exit fullscreen mode

方便的是，还有一个上标标签。<sup>标签的内容会使用较小的文本以凸起的基线呈现。例如，你可以将其用于数学表达式：

a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

<var>：变量

使用<var>标签来描述编程或数学表达式中的变量。

Given the width <var>w</var> and the height <var>h</var> you can calculate the area of the rectangle.
Enter fullscreen mode Exit fullscreen mode

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var

<wbr>：单词断开机会

该<wbr>标签指定文本中允许换行的位置。因此，您可以将一个（非常）长的单词分成多行。

Dampf<wbr>schiff<wbr>fahrt
Enter fullscreen mode Exit fullscreen mode

该示例显示了为较长的德语单词添加分词机会。

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

结论

HTML 有很多实用的标签。与其在所有情况下都使用<div>“和” <span>，不如尝试为文档添加更多语义。你的网站将对机器和用户更加友好。

你认识所有这些标签吗？如果你感兴趣，不妨考虑与你的朋友和同事分享这份清单。

让我们一起进步！ 关注我的 Twitter，获取每日开发者技巧。感谢您阅读我的内容！

这篇文章最初发表在kais.blog上。

鏂囩珷鏉ユ簮锛�https://dev.to/kais_blog/did-you-know-these-14-useful-html-tags-1j0j
Devto 翻译
PREV
使用 linters、prettier 和 husky 升级你的项目
NEXT
[教程] - 创建您自己的顶级域名（如 .com、.org 和 .net）