盘点那些你可能不知道但十分有用的 HTML 标签和属性

前言

很多前端开发者习惯了用 JavaScript 解决问题，往往忘了原生 HTML 已经内置了不少开箱即用的能力 —— 而且零依赖、零运行时开销。

2020 年我写过一篇盘点有趣 HTML 标签的文章，六年过去了，浏览器又新增了不少好东西。这篇更新一下，把 2020 年的老内容和 2026 年的新能力合并在一起。

表单输入

取色器

需要一个颜色选择器？不用找 UI 库。

<input type="color" />

点击弹出一个系统原生的颜色面板，返回值是 #RRGGBB 格式。

滑动条

<input type="range" min="0" max="100" value="50" />

原生日期时间选择

<input type="date" />
<input type="time" />
<input type="datetime-local" />
<input type="month" />
<input type="week" />

不同浏览器渲染样式略有差异，但功能一致。移动端 Safari 会弹出原生的滚轮选择器，体验远超任何第三方组件。

输入提示（datalist）

给输入框挂一个候选列表，类似搜索建议：

<input list="domains" placeholder="输入邮箱" />
<datalist id="domains">
  <option value="@gmail.com" />
  <option value="@qq.com" />
  <option value="@outlook.com" />
</datalist>

不需要写任何 JS 就能实现输入建议。

移动端键盘优化（inputmode）

在手机上点击输入框时，控制弹出哪种键盘：

<input type="text" inputmode="numeric" placeholder="纯数字键盘" />
<input type="text" inputmode="decimal" placeholder="带小数点的数字键盘" />
<input type="text" inputmode="email" placeholder="邮箱键盘（带@）" />
<input type="text" inputmode="url" placeholder="URL 键盘（带/和.）" />
<input type="text" inputmode="search" placeholder="搜索键盘（带搜索按钮）" />

这比 type="number" 好用 —— 不会强制验证、不会出现上下箭头。

必填和验证

<input type="email" required placeholder="必填邮箱" />
<input type="url" placeholder="必须是合法 URL" />
<input type="text" pattern="[A-Za-z]{3,}" title="至少3个字母" />
<input type="number" min="1" max="100" />

表单提交时浏览器自动校验，不需要额外 JS。

内容展示

进度条

<!-- 确定进度 -->
<progress value="70" max="100"></progress>


<!-- 不确定进度（一直在动） -->
<progress></progress>


<!-- 度量值（带阈值颜色变化） -->
<meter value="20" min="0" max="100" low="30" high="60" optimum="80"></meter>
<meter value="50" min="0" max="100" low="30" high="60" optimum="80"></meter>
<meter value="90" min="0" max="100" low="30" high="60" optimum="80"></meter>

<meter> 的值在不同区间会显示不同颜色（低 = 红色，中 = 黄色，高 = 绿色），具体颜色取决于浏览器。

折叠面板（details / summary）

不用手写 display: none 切换逻辑：

<details>
  <summary>点击展开更多</summary>
  <p>这里是被隐藏的内容，展开后可见。</p>
  <p>支持任意 HTML。</p>
</details>

设置 open 属性可以默认展开：

<details open>
  <summary>默认展开</summary>
  <p>这里的内容一开始就可见。</p>
</details>

图片描述（figure / figcaption）

<figure>
  <img src="/assets/note/avatar.png" alt="头像" />
  <figcaption>这是我的个人头像，摄于 2024 年</figcaption>
</figure>

语义化标签，搜索引擎会理解图片和描述之间的关联。

响应式图片（picture）

根据不同屏幕分辨率加载不同尺寸的图片：

<picture>
  <source media="(max-width: 600px)" srcset="/img/small.webp" />
  <source media="(max-width: 1200px)" srcset="/img/medium.webp" />
  <img src="/img/large.webp" alt="响应式图片" />
</picture>

浏览器会自动选择匹配 media 条件的第一个 <source>。小屏幕加载小图，省流量。

懒加载

<img src="photo.jpg" loading="lazy" alt="懒加载图片" />
<iframe src="https://example.com" loading="lazy"></iframe>

图片和 iframe 都支持。滚动到视口附近时才加载，不需要 Intersection Observer 那一套。

弹窗和对话框

原生弹窗（dialog）

<dialog id="myDialog">
  <h2>提示</h2>
  <p>这是一个原生模态弹窗。</p>
  <form method="dialog">
    <button>关闭</button>
  </form>
</dialog>


<script>
  const dialog = document.getElementById("myDialog");
  dialog.showModal();  // 打开（模态）
  // dialog.show();     // 打开（非模态）
</script>

showModal() 会自动添加背景遮罩、处理焦点、按 Escape 关闭。<form method="dialog"> 里的按钮点击时自动关闭 dialog，不用手动写 dialog.close()。

Popover API（2024+）

比 dialog 更轻量，用于弹出菜单、tooltip 等场景：

<button popovertarget="popup">点击我</button>
<div id="popup" popover>
  <p>这是 Popover 内容</p>
  <p>点击页面其他区域自动关闭</p>
</div>

不需要 JS。popover="auto"（默认）点击外部自动关闭，popover="manual" 需要手动控制。

文本语义

<del>这是一段被删除的文本</del>
<ins>这是一段新插入的文本</ins>
<mark>这是一段高亮文本</mark>
<abbr title="HyperText Markup Language">HTML</abbr>
<time datetime="2026-05-28">2026年5月28日</time>
<kbd>Ctrl</kbd> + <kbd>C</kbd>

这些标签不仅语义正确，还自带默认样式（删除线、下划线、黄色高亮等）。

高级玩法

可编辑区域

<div contenteditable="true">
  点击这里可以直接编辑这段文字。
</div>

整个 div 变成一个富文本编辑器，支持粘贴格式文本。

惰性属性（inert）

<div inert>
  <button>我点不了</button>
  <a href="#">我跳不了</a>
  <input type="text" placeholder="无法聚焦" />
</div>

加了 inert 的元素及其所有子元素都不可交互、不会被屏幕阅读器朗读、不参与焦点导航。做模态弹窗时把背景区域标为 inert，比 pointer-events: none + aria-hidden 那一套省事得多。

搜索元素

<search>
  <form>
    <input type="search" name="q" />
    <button>搜索</button>
  </form>
</search>

<search> 是 2023 年新增的语义化标签，屏幕阅读器会将其识别为搜索区域。

插槽（Web Components）

<template id="card-template">
  <style>
    .card { border: 1px solid #ddd; padding: 1rem; border-radius: 8px; }
  </style>
  <div class="card">
    <h2><slot name="title">默认标题</slot></h2>
    <slot>默认内容</slot>
  </div>
</template>


<my-card>
  <span slot="title">自定义标题</span>
  <p>这是卡片内容</p>
</my-card>

<slot> 是 Web Components 的核心机制，定义组件的可替换内容区域。

总结

这些标签和属性有几个共同点：

  • 零依赖，不需要 npm install 任何东西
  • 浏览器原生支持，性能开销极低
  • 自带无障碍（accessibility）支持，屏幕阅读器能正确理解
  • 在 JS 被禁用时依然正常工作

下次想在项目里引入一个颜色选择器或者折叠面板组件之前，先翻翻看 HTML 标准里有没有现成的。