你可能不知道的 6 个 HTML 标签

引言（可跳过）

几天前，我在办公桌前工作，我可爱的女朋友坐在我旁边，她很想知道我真正的工作是什么。她知道我从事IT行业，也知道我偶尔会写一些代码。她问我，如果她喜欢写代码，该怎么判断我是否真的喜欢。我做了我该做的。我向她解释了我认为网站代码的工作原理，给她看了几个视频，然后打开了w3schools网站。我找到了HTML部分，打开了Visual Studio Code ，并启用了实时服务器。然后她就开始了。

我当时怎么也没想到，几个小时后，她掌握的HTML标签数量就会超过我。正是在那时，我才意识到HTML实际上比我想象的要灵活得多。

帖子结构

本文结构如下：

• HTML标签名称
• 标签说明
• 使用示例
• 链接到 W3Schools 页面

准备好了吗？开始吧！

我们将从我认为最有趣、最有用的内容开始。

地图

`<map>`标签用于为图像添加地图。这意味着您可以定义图像上的区域，并设置与这些区域交互时的不同结果。例如，您可以为图像添加地图，并设置两个区域：点击区域 1 跳转到 Google，点击区域 2 跳转到 Twitter。

句法

<img src="https://asciiden.com/assets/img/profile-img.jpg" usemap="#map-name">

<map name="map-name">
    <area target="_blank" alt="ALT_TEXT" title="TITLE_TEXT" href="https://example.com" coords="93,57,305,169" shape="rect">
    <area target="" alt="ALT_TEXT" title="TITLE_TEXT" href="https://example.com" coords="144,248,253,278" shape="rect">
</map>

W3Schools链接

提示

您可以使用此网站自动生成图像地图！

图片

<picture>标签的用法与此类似。虽然使用了标签，但它为开发者提供了更大的灵活性。您可以为不同的数据源定义不同的视口，从而在不同的屏幕上显示不同的图像，而无需任何 CSS 代码。

句法

<picture>
  <source media="(max-width: <WIDTH>px)" srcset="someimage.jpg">
  <source media="(min-width: <WIDTH>px)" srcset="someimage.jpg">
  <img src="DEFAULT_IMAGE" style="width:auto;">
</picture>

W3Schools链接

超级

<sup>标签可以将文本向上移动一点。它代表上标文本。

句法

<sup> supscripted text </sup>

W3Schools链接

子

<sub>标签用于降低文本高度，它代表下标文本。

句法

<sub> subscripted text </sub>

W3Schools链接

BDO

<bdo>标签用于选择文本方向，它可以覆盖当前方向。

句法

<bdo dir="ltr"> text from left to right </bdo>
<bdo dir="rtl"> text from right to left </bdo>

W3Schools链接

DL

<dl>标签定义了“描述列表”，这是 HTML 中可以使用的另一种列表形式。它将列表项稍微向右移动，从而营造出一种描述的感觉。

句法：

<dl>
<dt>Item title</dt>
<dd>Item description</dd>
</dl>

W3Schools链接

关于作者

我叫丹尼斯，网名ASCIIden，是一名DevOps工程师。不过，我不喜欢用“DevOps”这个头衔来定义自己。我更愿意称自己为未来主义者和科技爱好者。

我从事IT行业大约两年了。我努力成为业内所有年轻从业者的得力助手，并尽我所能为大家提供优质、易懂（甚至有趣！）的内容。

如果你想找我合作项目，或者只是想打个招呼，欢迎随时通过我的推特账号联系我。