🧩 2025 年值得关注的新 HTML 属性
1. popover + popovertarget —— 原生弹出层（Popover API）
无需 JS 即可创建模态/非模态弹窗
<button popovertarget="my-tooltip">帮助</button>
<div id="my-tooltip" popover>
这是一个原生弹出提示！
</div>
- 默认为 非模态（用户仍可与页面其他部分交互）；
- 添加
popover="auto"或popover="manual"控制行为； - 按
ESC自动关闭，点击外部自动关闭； - 支持
:popover-openCSS 伪类做动画。
✅ 优势：语义清晰、内置焦点管理、无障碍友好，替代大量自定义 tooltip/modal 组件。
2. inert —— 暂时禁用整个子树交互
让元素及其子元素“不可见、不可聚焦、不可交互”
<div inert>
<input type="text" /> <!-- 无法聚焦 -->
<button>提交</button> <!-- 无法点击 -->
</div>
✅ 典型场景：
- 加载遮罩下的内容；
- 弹窗打开时背景内容“冻结”；
- A/B 测试中临时隐藏模块。
💡 替代方案过去需手动遍历所有子元素加
disabled/aria-hidden，现在一行搞定！
3. blocking="render"（实验性，但已在 Chrome 试用）
控制资源加载对渲染的阻塞行为
<script src="analytics.js" blocking="render"></script>
<link rel="stylesheet" href="critical.css" blocking="render">
- 默认
<script>和<link rel="stylesheet">都会阻塞渲染； - 此属性未来可能用于更精细控制“哪些资源必须阻塞，哪些可延迟”。
⚠️ 注意：截至 2025 年底，该属性仍在 Origin Trial 阶段，尚未全量上线，但值得跟踪。
4. fetchpriority="high" / "low" —— 资源加载优先级提示
告诉浏览器哪些资源更重要
<img src="hero.jpg" fetchpriority="high" alt="主图">
<img src="decoration.png" fetchpriority="low" alt="装饰图">
- 适用于
<img>、<link>、<script>； - 浏览器据此调整网络请求调度；
- 提升 LCP（最大内容绘制）性能。
✅ 已广泛支持：Chrome 107+、Edge、Opera；Firefox 实验中。
5. autocapitalize 扩展支持（移动端增强）
虽非全新，但在 2024–2025 年获得更一致的跨平台支持：
<input autocapitalize="words"> <!-- 每个单词首字母大写 -->
<input autocapitalize="characters"> <!-- 全部大写 -->
<input autocapitalize="sentences"> <!-- 句首大写（默认） -->
✅ 提升移动端表单体验，尤其适用于姓名、地址等输入场景。
6. onformdata 事件属性（配合 <form>）
虽是事件，但作为 HTML 属性可直接绑定：
<form onformdata="console.log(event.formData)">
<input name="username">
<button type="submit">提交</button>
</form>
- 在表单序列化为
FormData对象时触发； - 可用于动态添加字段（如 CSRF token）而不修改 DOM。
✅ 比 submit 更底层，适合高级表单控制。
7. rel="icon" 的新类型支持（PWA 增强）
虽非属性本身新增，但
rel值扩展：
<link rel="mask-icon" href="icon.svg" color="#4a98f7">
<link rel="apple-touch-startup-image" href="splash.png">
<!-- 新增：Web Manifest 图标预加载 -->
<link rel="manifest" href="manifest.webmanifest">
同时，<link rel="prefetch"> 和 preload 使用更规范，配合 fetchpriority 效果更佳。
8. <dialog> 的 open 属性标准化
虽
<dialog>早已存在，但 2023–2025 年 Firefox 和 Safari 完成全面支持，使其真正可用：
<dialog open>
<p>欢迎！</p>
<form method="dialog">
<button>关闭</button>
</form>
</dialog>
open属性控制显示/隐藏；- 内置
.showModal()/.close()方法； - 自动管理焦点和 ESC 关闭。
✅ 终于可以不用第三方 modal 库了！
🔜 即将到来（值得关注的提案）
| 属性 | 说明 |
|---|---|
virtual-keyboard | 控制虚拟键盘行为（如 virtual-keyboard="manual"） |
content-visibility | 虽是 CSS 属性，但常与 hidden 配合使用，提升长列表性能 |
anchor（锚点定位） | 未来可能用于 <popup> 与触发器的自动对齐 |
🌐 浏览器支持情况（2025 年 11 月）
| 属性 / 功能 | Chrome | Firefox | Safari | 移动端 |
|---|---|---|---|---|
popover | ✅ 114+ | ✅ 121+ | ✅ 16.4+ | ✅ |
inert | ✅ 109+ | ✅ 117+ | ✅ 16.4+ | ✅ |
fetchpriority | ✅ 107+ | ⚠️ 122+（部分） | ✅ 16.4+ | ✅ |
<dialog> 完整支持 | ✅ | ✅ 98+ | ✅ 15.4+ | ✅ |
blocking | 🧪 Origin Trial | ❌ | ❌ | ❌ |
✅ 结语
2025 年的 HTML 正变得更智能、语义化、无障碍友好。从原生弹窗（popover）到交互冻结（inert），再到资源优先级控制（fetchpriority），这些新属性让我们用更少的 JavaScript 实现更健壮的用户体验。
