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

HTML中有上百个标签，然而我们一般只会记住和使用少数的标签，例如

、

、 等，但其实还有很多实用但我们很少听说过的标签，下面让我们一起来看看这些神奇的标签吧。

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>0sub><sup>2sup>

文档

• 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 sunsetfigcaption>
figure>
    

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

8. details - 折叠菜单

<details>
    <summary>Detailssummary>
    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 monsterlegend>

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

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

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothmanlabel>
  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