1. 前言
在 HTML 的学习和使用中，我们总是会使用到一些常见的标签，比如 <div>、<p>、<a> 等等。但是，除了这些标签之外，还有一些被我们忽略但实际上很有用的标签存在。
本文将针对那些被我们忽略但实际上很有用的 HTML 标签进行总结和介绍，希望可以帮助大家更好地利用这些标签来优化自己的网页。
2. <aside>标签
2.1 <aside>标签的作用
<aside> 是一个定义内容之外的内容的容器。它可以用来包含与页面内容相关的边栏、广告或者导航栏等内容，通常呈现为页面的侧边栏。
通常情况下，<aside> 的内容应该与文章内容相关。例如，在一篇博客文章中，<aside> 中的内容可以是文章的标签、分类、作者信息等等。下面是一个简单的示例：
<article>
<h1>文章标题</h1>
<p>这是文章的内容。</p>
<aside>
<h3>相关信息</h3>
<ul>
<li>作者：XXX</li>
<li>类别：技术</li>
<li>标签：HTML, CSS, JavaScript</li>
</ul>
</aside>
</article>
这样，就可以将文章内容和相关信息分开来呈现，提高页面的可读性。
2.2 <aside>标签的注意事项
在使用<aside> 标签时，需要注意以下几点：
尽量将 <aside> 放在主要内容之后，这样可以保证读者先读主要内容再读相关信息。
对于与页面整体无关的内容（比如广告），应该使用其他标签而不是 <aside> 。
<aside> 并不是必须的，如果没有相关信息需要呈现，可以不使用该标签。
3. <figure>和<figcaption>标签
3.1 <figure>和<figcaption>标签的作用
在一些场合下，我们需要在页面中呈现一些图片或者图表。在这种情况下，使用 <img> 标签是最常见的做法。但是，如果只使用 <img> 标签，那么图片旁边的说明文字就只能通过 <p> 标签来实现，可能会导致较为混乱的页面结构。
这时候，就可以使用 <figure> 和 <figcaption> 标签来优化页面结构。
<figure> 标签表示一张图片或者图表，而 <figcaption> 利用标签的内容来为这张图片或者图表提供说明文字。
下面是一个简单的例子：
<figure>
<img src="picture.jpg" alt="图片标题">
<figcaption>这是图片的说明文字。</figcaption>
</figure>
3.2 <figure>和<figcaption>标签的注意事项
在使用 <figure> 和 <figcaption> 标签时，需要注意以下几点：
不要将没有说明文字的图片包裹在 <figure> 中，这样会导致页面冗余。
如果一个页面中只有一两张图片，使用 <figure> 和 <figcaption> 可能没有太大的作用。
4. <sub>和<sup>标签
4.1 <sub>和<sup>标签的作用
<sub> 和 <sup> 分别表示下标和上标。通常情况下，它们用来表示分子和分母，比如化学式中的原子序数。
下面是一个简单的例子：
<p>二氧化碳的化学式是 CO<sub>2</sub></p>
<p>氢氧离子的化学式是 H<sub>2</sub>O<sup>-</sup></p>
4.2 <sub>和<sup>标签的注意事项
在使用 <sub> 和 <sup> 标签时，需要注意以下几点：
不要滥用这两个标签，否则会导致页面冗余。
不要在 <sub> 或者 <sup> 中包含重要的信息，因为这些信息可能会被一些浏览器屏蔽掉。
5. <address>标签
5.1 <address>标签的作用
<address> 标签用来表示联系人的联系信息。
下面是一个简单的例子：
<address>
<p>公司名称：ABC 公司</p>
<p>公司地址：XXX 街道 XXX 号</p>
<p>联系电话：010-XXXX-XXXX</p>
</address>
5.2 <address>标签的注意事项
在使用 <address> 标签时，需要注意以下几点：
该标签主要用于表示联系人的联系信息，不要用它来表示其他信息。
如果一个页面中只有一两个联系人的联系信息，使用 <address> 标签可能没有太大的作用。
6. <time>标签
6.1 <time>标签的作用
<time> 标签用来表示时间或者日期。它既可以包含文本，也可以包含机器可读的数据。
下面是一个简单的例子：
<p>这篇文章发布于 <time datetime="2022-01-01">2022 年 1 月 1 日</time></p>6.2 <time>标签的注意事项
在使用 <time> 标签时，需要注意以下几点：
尽量使用机器可读的时间格式（比如 ISO 8601 格式），这样可以提高网站和搜索引擎的互操作性。
如果时间只是作为装饰用途，不包含机器可读数据，那么不需要使用 <time> 标签。
7. <progress>标签
7.1 <progress>标签的作用
<progress> 标签用来表示一个进度条。
下面是一个简单的例子：
<progress value="60" max="100">60%</progress>7.2 <progress>标签的注意事项
在使用 <progress> 标签时，需要注意以下几点：
该标签主要用于表示进度条，不要用它来表示其他信息。
不要在进度条中包含和进度条无关的信息（比如图标等）。
8. <details>和<summary>标签
8.1 <details>和<summary>标签的作用
<details> 标签用来表示一个可展开的详细内容。而 <summary> 标签则用来表示详细内容的摘要。
下面是一个简单的例子：
<details>
<summary>详细信息</summary>
<p>这里是详细的内容。</p>
</details>
8.2 <details>和<summary>标签的注意事项
在使用 <details> 和 <summary> 标签时，需要注意以下几点：
不要将不相关的内容放在 <details> 内部。
确保 <summary> 和 <details> 相关的内容清晰明了。
9. <mark>标签
9.1 <mark>标签的作用
<mark> 标签用来表示页面中需要突出显示的文本。
下面是一个简单的例子：
<p>我喜欢 JavaScript，因为它是一门很强大的语言。</p>9.2 <mark>标签的注意事项
在使用 <mark> 标签时，需要注意以下几点：
不要使用 <mark> 标签来表示整个页面或者整个段落。
在使用 <mark> 标签时，内容应该具有突出性，而不是单纯的着色。
10. 总结
本文总结了一些被我们忽略但实际上很有用的 HTML 标签，包括 <aside>、<figure>、<figcaption>、<sub>、<sup>、<address>、<time>、<progress>、<details> 和 <mark> 等标签。
在实际的页面开发中，合理使用这些标签可以提高页面的可读性和结构性，提高用户体验。