那些你从未使用过的 HTML 元素

HTML 中有超过一百种元素，所有这些元素都可以应用于文本片段，赋予它们在文档中的特殊含义。我们大多数人只知道其中几个，例如<p>、<div>和<body>元素……

但实际上，在W3C 参考资料的暗藏玄机中，还有更多内容隐藏其中。正因如此，我在本文中不惜一切代价，深入研究 HTML 文档，总结出一系列实用元素，它们不仅能在一个方面，还能在两个非常重要的方面提升您的网站：可访问性和 SEO。

按Ctrl+D即可收藏本文，方便下次阅读。好了，开始吧！

👉 `<abbr>`— 缩写

此元素既可以表示缩写（例如 Corporation ➟ Corp.），也可以表示首字母缩略词（例如层叠样式表 ➟ CSS）。此外，您还可以使用它的title属性来显示单词的完整形式，以便屏幕阅读器可以读取，并且用户可以将鼠标悬停在单词上进行阅读。

👉`<ins>`和`<del>`— 插入和删除

和元素<ins>表示<del>文档中添加或删除的文本范围。您可能已经在Github Pull 请求中见过这些元素。

👉 `<dfn>`、、、、和——`<var>`技术`<kbd>`要素`<samp><output>`

这些元素代表文档中特殊的技术导向部分，如定义、变量、击键等……

👉 `<bdo>`— 文本方向性

此元素会更改文本的方向，使其向后渲染。您可以使用dir属性控制其行为。

虽然这不是它的预期用途，但它可以仅使用 HTML 来反转文本！

👉 `<mark>`— 突出显示文本

此元素的目的是像使用标记一样突出显示文本。

👉 `<area>`— 可点击图像区域

您可以使用此元素使图像的某些区域表现得像链接！

👉 `<dl>`、、`<dd>`和`<dt>`——描述列表

您可以使用这些元素来创建语义准确的描述列表，其中您可以在一个文本块中定义多个术语。

👉`<sup>`和`<sub>`— 上标和下标

使用这两个元素，您可以向文档添加上标（如 x²）和下标（如 x₀）。

👉`<figure>`和`<figcaption>`— 带标签的图像

你可以用它<figure>来包含任何你想要的元素，比如一张图片。然后，你<figcaption>可以添加一个文本块作为它的最后一个子元素，用来描述它上面的内容。

👉`<progress>`和`<meter>`— 标记进度

它允许您创建语义正确的进度条元素，显示操作距离完成还有多远。

👉 `<details>`— 可扩展菜单

您可以使用此元素创建一个带有标题并可通过按钮展开的原生菜单。无需 JavaScript。

👉 `<dialog>`— 弹出对话框

使用此元素可以创建语义准确的对话框。它本身功能有限，因此您必须使用 CSS 和 JavaScript 来添加更多功能。

👉 `<datalist>`— 文本输入建议

此元素允许您手动添加文本输入建议。您可以添加任何您想要的内容！

👉 `<fieldset>`— 分组表单元素

使用该元素可以使您的表单保持整洁且更加用户友好<fieldset>。

👉 `<object>`— 嵌入外部对象

有了这个神奇的元素，你几乎可以把任何你想要的文件嵌入到你的网站！最常支持的文件是 PDF、YouTube 视频等等……

👉 `<noscript>`— 如果 JavaScript 被禁用

此元素可用于在浏览器禁用 JavaScript 时显示部分内容。它常用于严重依赖 JavaScript 的网站，例如单页应用程序 (SPA)。

如果您发现本指南有用，请不要忘记将其添加到书签以供将来参考。

我每天都会发布这样的帖子，所以请关注我以了解最新信息。❤️

[已删除用户]

文章来源：https://dev.to/vidova/those-html-elements-you-never-use-16bi

那些你从未使用过的 HTML 元素

那些你从未使用过的 HTML 元素

👉 <abbr>— 缩写

👉<ins>和<del>— 插入和删除

👉 <dfn>、、、、和——<var>技术<kbd>要素<samp><output>

👉 <bdo>— 文本方向性

👉 <mark>— 突出显示文本

👉 <area>— 可点击图像区域

👉 <dl>、、<dd>和<dt>——描述列表

👉<sup>和<sub>— 上标和下标

👉<figure>和<figcaption>— 带标签的图像

👉<progress>和<meter>— 标记进度

👉 <details>— 可扩展菜单

👉 <dialog>— 弹出对话框

👉 <datalist>— 文本输入建议

👉 <fieldset>— 分组表单元素

👉 <object>— 嵌入外部对象

👉 <noscript>— 如果 JavaScript 被禁用

[已删除用户]

👉 `<abbr>`— 缩写

👉`<ins>`和`<del>`— 插入和删除

👉 `<dfn>`、、、、和——`<var>`技术`<kbd>`要素`<samp><output>`

👉 `<bdo>`— 文本方向性

👉 `<mark>`— 突出显示文本

👉 `<area>`— 可点击图像区域

👉 `<dl>`、、`<dd>`和`<dt>`——描述列表

👉`<sup>`和`<sub>`— 上标和下标

👉`<figure>`和`<figcaption>`— 带标签的图像

👉`<progress>`和`<meter>`— 标记进度

👉 `<details>`— 可扩展菜单

👉 `<dialog>`— 弹出对话框

👉 `<datalist>`— 文本输入建议

👉 `<fieldset>`— 分组表单元素

👉 `<object>`— 嵌入外部对象

👉 `<noscript>`— 如果 JavaScript 被禁用