原文： Useful HTML5 Tags You Might Not Know

HTML5 与之前版本不同的关键因素之一是语义标签的引入。

语义标签为网页添加了真正的含义，使人类和搜索引擎能够轻松区分网站的不同部分。

在一定程度上，它也会影响网页的 SEO。

因此，你应该知道可以用来提升你的网站的 HTML5 标签。

有一些非常有用但鲜为人知的 HTML5 标签也可以派上用场。它们为你的网页赋予语义意义，增强网站的可访问性。

在这篇文章里我列出了 5 个你可能想尝试的有用的 HTML 标签。

<abbr> 标签

当你想要显示你在博客中使用的缩写的完整形式时，你可以使用此标签。

例如，如果你正在撰写有关智能家居产品的文章，该产品还具有你想要讨论的一些 AI 功能。现在，可能会有一些不熟悉人工智能的普通读者。使用此 abbr 标签和 title 属性将向读者显示一个工具提示，其中包含写在缩写标题标签中的内容。当用户将鼠标悬停在缩写上时，它可以帮助他们了解 “AI” 的含义。

想想如果你想将这种功能添加到你的博客中，它将为你节省多少麻烦。你所要做的就是插入这个标签，而不是思考如何使用 CSS。

<abbr> 标签的工作原理

假如你正在编写博客并且可以访问 HTML 视图，你必须用 <abbr> 缩写词，并带有 title 属性，该属性将包含缩写词的定义或完整形式。正确完成后，当用户将鼠标悬停在显示 title 属性所包含内容的缩写上时，工具提示将出现。

<p style="font-family: sans-serif;"> Can <abbr title="Artificial Intelligence">AI</abbr> be taught how to reciprocate human emotions?
</p>
image-300

<details> 标签

可以使用此标记创建一个交互式容器框，当用户单击它时可以展开和收缩，同时包含所有内容。展开后，它会显示其中的内容，在收缩后它会关闭内容。

对于“常见问题解答”或“目录”部分，我都会使用它。

我最近在我的一个网站上工作时使用了它。我使用它构建了“目录”部分（你将能够在下面看到它）。

<details> 标签的工作原理

首先，我们声明包裹 <summary> 标签的 <details> 标签和你希望用户在需要时看到的常用内容。它可以是任何东西——表单、表格、段落或图像。

<details>
	<summary>Table of Contents</summary>
    <ul>
    	<li>
        	<a href="#web-dev">Web Development</a>
        </li>
        <ul>
            <li><a href="#web-dev-html">HTML</a></li>
            <li><a href="#web-dev-css">CSS</a></li>
        </ul>
       </ul>
 </details>

现在，我前面提到了 <summary> 标签：这个标签与 <details> 标签一起使用，并指定内容的标题。

details
Image Credit: Screen Grab of Freemium Stuff

提示：假设你正在使用此标签创建一个“常见问题解答”部分，并且你希望容器在页面加载时打开，例如“最常问的问题”：

<details open>
	<summary>How do I get my product registered?</summary>
    <p>You can get your product...</p>
</details>

<optgroup> 标签

此标签可让你在你构建的表单中对下拉列表的选项进行分类。

如果你想要用户可以从中选择的下拉列表之类的内容，请使用 <select> 标签。但是，用户浏览整个列表以找到正确的选项通常会变得非常冗长和乏味。

对选项进行分组确实很有帮助，你的用户会喜欢这一点，因为他们不必遍历每个选项。相反，他们可以导航到自己需要的类别。这有助于提升用户体验。

<optgroup> 标签的工作原理

在布局所有选项之前，声明 <optgroup> 标签并将所有类似的选项包裹在其中，就像下面的示例一样。你可以根据需要为尽可能多的组执行此操作。

<label for="cars">Cars</label>
    <select name="Cars" id="cars">
        <optgroup label="SUV">
            <option value="">Porsche Cayenne</option>
            <option value="">Lincoln Nautilus</option>
            <option value="">Mercedes-Benz GLB 2022</option>
            <option value="">BMW X3 2022</option>
            <option value="">Genesis GV80 2022</option> 
            <option value="">Mercedes-Benz GLS 2022</option>
        </optgroup>
        <optgroup label="Sports Car">
            <option value="">Ford Mustang</option>
            <option value="">Toyota GR Supra</option>
            <option value="">McLaren 7205</option>
            <option value="">Porsche 911</option>
            <option value="">Audi R8 V10</option>
            <option value="">Chevrolet Corvette Z06</option>
        </optgroup>
    </select>
image-302
图像来源：本文作者

<base> 标签

此标签将允许你更改该 HTML 文件中所有相对 URL 的基准 URL。你应该把它放在 <head> 标签中。它让你在使用相对 URL 的便利性的同时，还可以灵活地更改基准 URL。

<base> 标签的工作原理

用户只需要在 <head> 标签内声明这个标签，现在文档中的所有相对 URL 都会以新的 URL 作为其基础。

<head>
	<base href="https://bhaveshrawat.pages.dev/assets/">
</head>
<body>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="netflix-planform.webp">
        <figcaption>Netflix Planform made with Grid. </figcaption>
    </figure>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="hamburger-menu.gif">	
        <figcaption>&lt;input&gt; tag menu bar</figcaption>
    </figure>
</body>
image-305

<base> 标签的问题

不过，使用这个标签有一个问题。它不适用于页内锚标记，例如 <a href="#home">。从导航的角度来看，这些类型的链接非常有用。所以，除非你用 JS 来弥补页内锚标签，否则这个标签可能并不理想。

<map> 标签

如果你想将单个图像与多个链接挂钩并根据图像映射它们，这个标签将让你做到这一点。此标签可让你指定图像上的区域——它可以是矩形、圆形或多边形（基本上是任何不规则形状）——并将它们映射到不同的链接。

<map> 标签的工作原理

首先，我们使用 usemap 属性指定一个 <img> 标签，该属性与 <map> 标签的 name 属性具有相同的值。

<map> 标签将在之后声明，其 name 属性与 usemap 属性具有相同的值。

标签还包裹了具有 shape、coords、alt 属性的 <area> 标签。shape 属性指定地图区域的形状，coords 定义地图区域的坐标以用于映射目的，alt 用于替代文本，href 保存各个区域的链接。

<img src="frame.png" width="430" height="194" usemap="#map" />
    <map name="map">
        <area shape="circle" coords="51,51,31" alt="Twitter" href="https://twitter.com/" />
        <area shape="circle" coords="161,52, 33" alt="Github" href="https://github.com/" />
        <area shape="circle" coords="271,51,31" alt="LinkedIn" href="https://linkedin.com/" />
        <area shape="circle" coords="379,51,31" alt="Medium" href="https://medium.com/" />
        <area shape="circle" coords="187, 143, 31" alt="Contra" href="https://contra.com/" />
        <area shape="circle" coords="215, 143, 31" alt="Instagram" href="https://www.instagram.com/" />
        <area shape="circle" coords="323,143,31" alt="Codepen" href="https://codepen.io" />
    </map>
APNG-1

更多

这不是一个标签，而是一个可以帮助你为你的应用程序构建自定义上下文菜单的属性。我说的是 oncontextmenu 属性。

上下文菜单基本上是一个菜单栏，当用户在浏览器上单击鼠标右键时会出现并提供诸如“检查”、“查看页面源代码”等选项。

7ecce6cb9af145cb11c57bc6ccb47e1a2c0c5eac

在构建 Web 应用程序时，你可能希望为你的用户提供自定义上下文菜单，其中包含许多特殊选项和功能，就像 Spotify 所做的那样。

image-313
图片来源：来自 Spotify 的屏幕抓取

oncontextmenu 属性如何工作

此属性的值默认为 true。这使你可以访问右键单击时出现的上下文菜单。但是，当给定一个错误值时，上下文菜单将不会出现。

因此，你将禁用本机上下文菜单，因为你的用户不需要它。此外，它不会干扰你的 web 应用程序的功能。

你不希望你的自定义菜单被上下文菜单重叠/干扰，对吗？所以，这个练习可以让你摆脱这种可怕的经历。

<body oncontextmenu="return false"></body>

注意：该属性适用于所有 HTML 元素。这意味着如果你不希望用户仅在某个部分具有上下文菜单功能，你也可以这样做。只需使用父元素上的属性，就像这样：

<body>
    <section oncontextmenu="return false"></section>
</body>

总结

这些就是我想与大家分享的 HTML 标签！我希望这篇文章值得你花时间，你从中学到了一些东西。

如果这些标签中的任何一个引起了你的兴趣，你可以在 MDN 上了解更多关于它们的信息。

祝你有美好的一天！

如果你正在学习 Git，我想推荐一本我在学习 Git 时写的电子书。它有 PDF 和 E-PUB 格式，你可以在 Gumroad 上免费获得。希望你喜欢这本电子书。