【前端】涨知识了，原来HTML里还有这么多神奇的标签

HTML中有上百个标签，然而我们一般只会记住和使用少数的标签，例如 <p>、<div>、<input> 等，但其实还有很多实用但我们很少听说过的标签，下面让我们一起来看看这些神奇的标签吧。

1. abbr - 缩略语

<abbr title="我是完整描述">缩写</abbr>

文档：abbr: The Abbreviation element - HTML: HyperText Markup Language | MDN

2. ins & del - 插入和删除

<style>
del,
ins {
    display: block;
    text-decoration: none;
    position: relative;
}

del {
    background-color: #fbb;
}

ins {
    background-color: #d4fcbc;
}

del::before,
ins::before {
    position: absolute;
    left: .5rem;
    font-family: monospace;
}

del::before {
    content: '−';
}

ins::before {
    content: '+';
}
</style>
<ins>我是新插入的行</ins>
<del>我是删除的行</del>

文档：ins - HTML: HyperText Markup Language | MDN

3. bdo - 文本方向

可以指定文本的方向为 从左向右 或 从右向左 。

<bdo dir="rtl">从右向左读</bdo><br>
<bdo dir="ltr">从左向左读</bdo><br>

文档：bdo: The Bidirectional Text Override element - HTML: HyperText Markup Language | MDN

4. mark - 文本高亮

我来展示<mark>高亮</mark>的用法。

文档：mark: The Mark Text element - HTML: HyperText Markup Language | MDN

5. progress & meter - 进度条

<p>
process进度条
<progress></progress>
</p>
<p>
meter进度条
<meter></meter>
</p>

文档

• progress: The Progress Indicator element - HTML: HyperText Markup Language | MDN
• meter: The HTML Meter element - HTML: HyperText Markup Language | MDN

6. sup & sub - 上标和下标

x<sub>0</sub><sup>2</sup>

文档

• sup: The Superscript element - HTML: HyperText Markup Language | MDN
• sub: The Subscript element - HTML: HyperText Markup Language | MDN

7. figure - 带标题的图片

<figure>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>
    

文档：figure: The Figure with Optional Caption element - HTML: HyperText Markup Language | MDN

8. details - 折叠菜单

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

文档：details: The Details disclosure element - HTML: HyperText Markup Language | MDN

9. 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>

文档：datalist: The HTML Data List element - HTML: HyperText Markup Language | MDN

10. fieldset - 标签组

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

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

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

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

文档：figure: The Figure with Optional Caption element - HTML: HyperText Markup Language | MDN

11. object - 文件嵌入

可以利用 object 标签嵌入文件，例如 PDF、视频等。

<object
    type="application/pdf"
    data="./test.pdf" >
</object>

文档：object: The External Object element - HTML: HyperText Markup Language | MDN

12. noscript - JavaScript 检测

如果浏览器不支持或禁用了 JavaScript，才会显示标签内容。

<noscript>您的浏览器不支持或禁用了 Javascript。</noscript>

---

参考资料

• 7 Cool HTML Elements Nobody Uses. Were you left in tears while searching… | by Tapajyoti Bose | Oct, 2022 | Medium
• Those HTML Elements You Never Use 🌚🕵🏿 - DEV Community 👩‍💻👨‍💻
• MDN Web Docs