这些 HTML 标签你一定从未使用过

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

但是实际上还有很多隐藏在W3C参考的黑暗领域中。

< abbr > — 缩写

这个元素表示缩写(如Corporation➟Corp.)和首字母缩写(如级联样式表➟CSS)。此外，可以使用它的title属性来编写单词的完整形式，以便屏幕阅读器可以阅读它，用户可以将鼠标悬停在上面阅读它。

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

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

<ins>和<del>元素表示已添加或删除到文档中的文本范围。

<p>“You're late!”</p>
<del>
    <p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
    <p>“A wizard is never late …”</p>
</ins>

<blockquote>
    There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

< dfn >， < var >， < kbd >， < samp >， < output >

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

<p>A <dfn id="def-validator">validator</dfn> is a program that checks for syntax errors in code or documents.</p>

<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>

< bdo > 文本方向

此元素可以更改文本的方向，使其向后呈现。你可以使用dir属性控制它的行为。

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

<h1>Famous seaside songs</h1>

<p>The English song "Oh I do like to be beside the seaside"</p>

<p>Looks like this in Hebrew: <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span></p>

<p>In the computer's memory, this is stored as <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo></p>

< mark > 高亮文本

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

<p>Search results for "salamander":</p>

<hr>

<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>

<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>

< area > 可点击的图像区域

你可以使用此元素使图像的某些区域表现为链接!

<map name="infographic">
    <area shape="rect" coords="184,6,253,27"
          href="https://mozilla.org"
          target="_blank" alt="Mozilla" />
    <area shape="circle" coords="130,136,60"
          href="https://developer.mozilla.org/"
          target="_blank" alt="MDN" />
    <area shape="poly" coords="130,6,253,96,223,106,130,39"
          href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
          target="_blank" alt="Graphics" />
    <area shape="poly" coords="253,96,207,241,189,217,223,103"
          href="https://developer.mozilla.org/docs/Web/HTML"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="207,241,54,241,72,217,189,217"
          href="https://developer.mozilla.org/docs/Web/JavaScript"
          target="_blank" alt="JavaScript" />
    <area shape="poly" coords="54,241,6,97,36,107,72,217"
          href="https://developer.mozilla.org/docs/Web/API"
          target="_blank" alt="Web APIs" />
    <area shape="poly" coords="6,97,130,6,130,39,36,107"
          href="https://developer.mozilla.org/docs/Web/CSS"
          target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />

alt

< dl >, < dd > 和 < dt > 描述性列表

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

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

有了这两个元素，可以在文档中添加上标(如x²)和下标(如x₀)。

< figure > 和 < figcaption > 可附标题内容元素

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

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

< progress > 和 < meter > 进度条标记

这两个标签允许你创建语义正确的进度条元素，用来显示动作完成的距离。

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>

<label for="fuel">Fuel level:</label>

<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

< details > 可展开菜单

你可以使用此元素创建一个具有标题并可以使用按钮展开的本地菜单。不需要JavaScript。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

< dialog > 弹出对话框

使用这个元素可以创建语义准确的对话。它本身做不了多少事情，所以您必须使用CSS和JavaScript添加更多的功能。

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

< datalist > -文本输入建议

这个元素允许你手动添加文本输入建议。你可以添加任何你想要的东西!

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

< fieldset > -分组表单元素

使用<fieldset>元素保持表单整洁和用户友好。

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

< object > -嵌入外部对象

有了这个惊人的元素，你可以嵌入几乎任何你想要的文件到你的网站!最常用的支持文件是pdf、“爱腾优”视频等。

<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

< noscript >—如果JavaScript被禁用显示

当JavaScript被浏览器禁用时，这个元素可以用来显示一些内容。它通常被那些严重依赖JavaScript的网站所使用，比如单页应用程序(spa)。

<noscript>
  <!-- anchor linking to external file -->
  <a href="https://www.mozilla.com/">External Link</a>
</noscript>
<p>Rocks!</p>

如果你发现这个指南很有用，请不要忘记👍🏻和在看哦！

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