HTML 是网页的基础，它使我们能够创建结构化的、有意义的内容。 虽然有一些 HTML 标签比其他标签使用得更频繁，但也有许多鲜为人知的标签非常有用。
在这篇文章中，我们将探索许多人不知道的一些好用的 HTML 标签。 我们将为每个标签提供易于理解的解释，并提供如何使用它们的示例。
01、<details> 和 <summary> 标签
<details> 和 <summary> 标签可用于在网页上创建可折叠的内容。 这对于以紧凑格式显示大量信息很有用。 当页面加载时，<details> 标签内的内容被隐藏，只有摘要可见。 当用户单击摘要时，内容会展开以显示详细信息。
这是一个例子：
<details>
<summary>Click me to reveal the details</summary>
<p>This is the hidden content that will be revealed when the summary is clicked.</p>
</details>
02、<mark> 标签
<mark> 标签可用于突出显示网页上的文本。 这类似于在打印文档上使用荧光笔。 当页面加载时，<mark> 标签内的文本将以黄色突出显示。
这是一个例子：
<p>This is some <mark>highlighted text</mark> on a web page.</p>
03、<abbr> 标签
<abbr> 标签用于定义网页上的缩写词或首字母缩写词。 当用户将鼠标悬停在缩写词上时，将出现带有完整定义的工具提示。
这是一个例子：
<p>The <abbr title=“World Wide Web”>WWW</abbr> is a global system of interconnected computer networks.</p>
04、<meter> 标签
<meter> 标签可用于在网页上创建度量值或值的可视化表示。 它通常用于显示进度条、评分和其他类型的视觉反馈。
这是一个例子：
<meter value=“75” min=“0” max=“100”>75%</meter>
05、<time>标签
<time> 标签可用于在网页上显示日期和时间。 它还可以用于标记机器可读的日期和时间，这对搜索引擎优化很有用。
这是一个例子：
<p>The <time datetime=“2023-05-01”>first of May</time> is a public holiday.</p>
06、<picture>标签
<picture> 标签用于为网页上的图像提供多个来源。 它可用于根据用户的设备、屏幕尺寸或其他因素提供不同的图像。
这是一个例子：
<picture>
<source media=“(min-width: 768px)” srcset=“large.jpg”>
<source media=“(min-width: 480px)” srcset=“medium.jpg”>
<img src=“small.jpg” alt=“A picture”>
</picture>
07、<source> 标签
<source> 标签用于指定媒体元素的替代媒体资源，例如 <audio> 或 <video>。 这对于提供媒体文件的多种格式或分辨率以确保与不同设备和浏览器的兼容性很有用。
这是一个例子：
<video controls>
<source src=“video.mp4” type=“video/mp4”>
<source src=“video.webm” type=“video/webm”>
Your browser does not support the video tag.
</video>
08、`<dialog>` 标签
`<dialog>` 标签可用于在网页上创建对话框。 它通常用于确认操作、显示错误消息或显示附加信息。 这是一个例子：
<dialog>
<h2>Confirmation</h2>
<p>Are you sure you want to delete this item?</p>
<button>Yes</button>
<button>No</button>
</dialog>
09、<nav> 标签
<nav> 标签用于定义包含导航链接的网页部分。 它通常用于创建菜单或导航栏。
这是一个例子：
<nav>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>About</a></li>
<li><a href=“#”>Services</a></li>
<li><a href=“#”>Contact</a></li>
</ul>
</nav>
10、<progress> 标签
<progress> 标签可用于在网页上创建进度条。 它通常用于显示任务或进程的进度，例如，上传文件或加载网页。
这是一个例子：
<progress value=“50” max=“100”>50%</progress>
总之，HTML 提供了广泛的标签，可用于在 Web 上创建结构化且有意义的内容。 虽然有些标签的使用频率高于其他标签，但鲜为人知的标签也非常有用。
在本文中，我们探索了一些很多人都不知道的最佳 HTML 标签。 我们为每个标签提供了易于理解的解释，并提供了如何使用它们的示例。 通过将这些标签合并到您的网页中，您可以为您的用户创建更具吸引力和互动性的体验。
相关文章
