如果你写 HTML 已经好些年了，你可能觉得自己已经掌握了所有标签——<div>、<span>、<section>，还有那些常见“选手”。

但 HTML 其实藏着很多开发者容易忽略的宝藏标签，有些老标签被严重低估，而有些则是 HTML 新规范里的新鲜面孔。

下面咱们一起来看看这些强大但鲜为人知的 HTML 标签，它们能让你的标记代码更清爽、更具语义，有时候甚至更智能。

1.<dialog>— 无需 JavaScript 库的原生模态框

如果你一直在用笨重的 JS 模态框库，这个标签会让你眼前一亮。

<dialog>元素能创建一个原生的、可访问的对话框，完全不用第三方脚本。

<dialog id="myDialog">
  <p>Are you sure you want to delete this file?</p>
  <button onclick="document.getElementById('myDialog').close()">Cancel</button>
  <button>Confirm</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

亮点：

• 原生支持无障碍访问
• 提供 showModal()和 close()方法
• 无需额外的 ARIA 属性

2.<details>& <summary>— 原生展开/折叠

别再用 JS 重复造轮子做手风琴组件了。

HTML 自带现成解决方案。

<details>
  <summary>Read More</summary>
  <p>This paragraph is hidden until you click “Read More.”</p>
</details>

亮点：

• 自动添加展开/折叠三角图标
• 无需 JavaScript 即可运行
• 开箱即用的无障碍支持

3.<meter>— 轻松实现可视化范围

需要展示某个范围内的数值？

别再自定义进度条了，用 <meter>就行。

<p>Battery Level: <meter value="0.7" min="0" max="1">70%</meter></p>

亮点：

• 特别适合分数、评分、电池电量或进度指示
• 浏览器自动处理样式和无障碍
• 可添加 low、high和 optimum属性提供视觉提示

4.<progress>— 显示任务完成进度

需要进度条？HTML 直接支持。

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

亮点：

• 一键生成进度条
• 可用 CSS 自定义样式
• 所有现代浏览器都支持

5.<mark>— 无需 CSS 黑科技的文本高亮

别再用行内样式或 <span>类名了，<mark>提供语义化的高亮。

<p>The deadline is <mark>August 31</mark>, don’t miss it!</p>

亮点：

• 语义明确（“为参考而高亮”）
• 默认黄色高亮样式（可用 CSS 自定义）

6.<picture>— 为不同屏幕提供更智能的图片

响应式图片的强力工具。

你可以根据屏幕尺寸或格式提供不同的图片源。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Beautiful Landscape">
</picture>

亮点：

• 自动切换格式（WebP、JPEG、AVIF）
• 慢速网络下性能更好
• 非常适合响应式设计

7.<time>— 机器和人类都能读懂的日期时间

让你的时间戳既对人友好，也对机器友好。

<p>Event starts at <time datetime="2025-08-15T14:00">2:00 PM on Aug 15, 2025</time></p>

亮点：

• 帮助搜索引擎理解日期
• 对 SEO、微格式和提醒功能很有用

8.<abbr>— 鼠标悬停解释缩写词

在不打断文本流畅性的情况下解释缩写。

<p>The <abbr title="World Health Organization">WHO</abbr> released a new report.</p>

亮点：

• 鼠标悬停时显示完整含义
• 提升屏幕阅读器的无障碍体验

9.<datalist>— 无需 JavaScript 的自动补全

是不是想要一个带内置建议的 <input>？

来了。

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

亮点：

• 无需外部库就能实现自动补全
• 仍然允许自由输入

10.<template>— 等待 JavaScript 的 HTML

有时候你想把 HTML 标记放在页面里，但等到需要的时候再渲染。

<template id="cardTemplate">
  <div class="card">
    <h3>Title</h3>
    <p>Description</p>
  </div>
</template>

<script>
  const template = document.getElementById('cardTemplate');
  document.body.appendChild(template.content.cloneNode(true));
</script>

亮点：

• 标记随时待命，但默认隐藏
• 动态渲染列表、模态框或 UI 组件的绝佳选择

结语

HTML 不是一门静态的语言——它在不断进化。

这些标签很多都能替代复杂的 JavaScript，提升无障碍性，还能让你的代码更简洁。

它们已经被大多数现代浏览器支持了。

下次当你想用 <div>或复杂的 JS 方案解决问题时，先查查 HTML 是否已经有原生标签能搞定。

很可能它不仅存在，还能立刻让你的代码变得更好。