你可能从未听说过的15种HTML元素方法！-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常使用HTML标签来创建网页内容。除了常见的标签如<div>、<p>和<img>之外，还存在许多鲜为人知的HTML元素，它们可以帮助我们更好地构建页面并提升用户体验。本文将介绍一些你可能从未听说过的15种HTML元素方法。

1. `<details>` 和 `<summary>`

<details> 和 <summary> 可以用来创建折叠面板，使用户能够展开或收起某些内容。当用户点击 <summary> 元素时，与其相关的 <details> 元素将显示或隐藏。

<details>
  <summary>点击我展开/收起</summary>
  <p>这里是需要显示/隐藏的内容。</p>
</details>

2. `<progress>`

<progress> 元素可以用来显示任务的进度。它有一个 value 属性，表示已经完成的百分比。

<progress value="50" max="100"></progress>

3. `<meter>`

<meter> 元素也可以用来显示进度条，但它可以显示更详细的信息。它具有一个 value 属性，表示已经完成的值，还有一个 min 和 max 属性，表示最小值和最大值。

<meter value="0.6" min="0" max="1">60%</meter>

4. `<time>`

<time> 元素可以用来显示日期和时间。它有一个 datetime 属性，表示日期和时间的值，还可以使用 title 属性添加额外的说明。

<time datetime="2023-04-07T10:00:00Z" title="这是一个重要的时间">10:00 AM</time>

5. `<cite>`

<cite> 元素可以用来表示引用或参考的文本。它通常与 <blockquote> 或 <q> 元素一起使用。

<blockquote>
  <p>这里是一段引用的文本。</p>
  <cite>——引用来源</cite>
</blockquote>

6. `<abbr>`

<abbr> 元素可以用来表示缩写或首字母缩略词。它有一个 title 属性，表示完整的解释。

<p>HTML 是 <abbr title="超文本标记语言">HTML</abbr> 的缩写。</p>

7. `<address>`

<address> 元素可以用来表示联系信息，如作者、公司或组织等。它通常包含一个或多个联系信息元素，如 <a>、<p> 和 <br>。

<address>
  <p><a href="mailto:info@example.com">info@example.com</a></p>
  <p>123 Main St<br> Anytown, USA</p>
</address>

8. `<del>` 和 `<ins>`

<del> 和 <ins> 元素可以用来标记删除或插入的文本。它们都有一个 datetime 属性，表示时间戳。

<p><del datetime="2023-04-01T00:00:00Z">这段文本被删除了。</del></p>
<p><ins datetime="2023-04-01T00:00:00Z">这段文本被插入了。</ins></p>

9. `<dfn>`

<dfn> 元素可以用来表示定义。它通常与 <abbr> 或 <a> 元素一起使用。

<p><dfn title="World Wide Web">WWW</dfn> 是互联网上的一组信息资源。</p>

10. `<code>` 和 `<kbd>`

<code> 和 <kbd> 元素可以用来

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/36619

你可能从未听说过的15种HTML元素方法！

1. <details> 和 <summary>