前言

近日，「State of HTML 2025」年度调查报告公布。

这份报告收集了全球数万名开发者的真实使用经验和反馈，堪称是 Web 开发领域的“年度风向标”。

让我们看看 2025 年，大家都用了 HTML 的哪些功能。

注：State of JS 2025 还未公布，欢迎关注公众号：冴羽，第一时间获取报告结果。

特性 Top 5

开发者使用最多的特性 Top 5 分别是：

1. 地标元素（Landmark Elements）

其实就是<aside>, <article>, <main>, <nav>, <section>这些，想必你也经常使用。

2. tabindex 属性：使 HTML 元素可聚焦，允许或阻止它们按顺序获得焦点。

<div role="button" tabindex="0">I’m Tabbable</div>

3. <svg>（内联 SVG）

<svg>
  <circle cx="50" cy="50" r="50" />
</svg>

4. <canvas>

<canvas width="200" height="200"></canvas>

5. loading="lazy"：懒加载

<img src="picture.jpg" loading="lazy" /> <iframe src="supplementary.html" loading="lazy"></iframe>

表单 Top 5

开发者使用最多的表单功能 Top 5 分别是：

1. <input type="color">：颜色选择器

<input type="color" />

2. <datalist>：供用户选择的表单控件

<input name="country" list="countries" />
<datalist id="countries">
  <option>Afghanistan</option>
  ...
</datalist>

3. input.showPicker()：打开具有选择器的表单控件（颜色选择器、日期输入框等）

<input id="dateInput" type="date" /> <button onclick="dateInput.showPicker()">Select date</button>

4. contenteditable="plaintext-only"：允许编辑元素的原始文本，但不允许进行富文本格式设置

<h2 class="title" contenteditable="plaintext-only"></h2>

5. Customizable Select：可自定义样式和样式的下拉控件

select,
::picker(select) {
  appearance: base-select;
}

图形和多媒体 Top 5

开发者使用最多的图形和多媒体功能 Top 5 分别是：

1. <svg>（内联 SVG）

<svg>
  <circle cx="50" cy="50" r="50" />
</svg>

2. <canvas>

<canvas width="200" height="200"></canvas>

3. ctx.drawElement()：使开发者可以在 HTML 元素上绘制 <canvas>

<canvas id="canvas" layoutsubtree="true">
  <p>Hello world!</p>
</canvas>
<script type="module">
  const ctx = canvas.getContext("2d");
  const text = canvas.querySelector("p");
  ctx.drawElement(text, 30, 0);
</script>

4. WebGL：一个基于 OpenGL 的底层 API

const gl = canvas.getContext("webgl");

5. colorSpace：设置图形的颜色空间

const ctx = canvas.getContext("2d", {colorSpace: "display-p3"});

内容 Top 5

开发者使用最多的图形和多媒体功能 Top 5 分别是：

1. 内容安全策略 (CSP)：网站向浏览器发出的一组指令，用于帮助检测和缓解 XSS 攻击

Content-Security-Policy: script-src 'self';

2. <template>：内容在加载页面时不会呈现，但随后可以在运行时使用 JavaScript 实例化

<template id="counter">
  <div class="counter">Clicked {{ times }} times</div>
</template>

3. Intl.LocaleAPI：国际化 API

const us = new Intl.Locale("en-US");

4. HTML 模块：通过 JS imports 导入 HTML 文件，并访问其元素和 JS 导出

<script type="module">
  import { TabList } from "./tablist.html" with { type: 'html' };
  customElements.define("tab-list", TabList);
</script>

5. Sanitizer API：element.setHTML() 以及 Document.parseHTML() API，通过清理 HTML 中不受信任的字符串来防止 XSS 攻击。

greeting.setHTML('Hello ' + nameInput.value);

交互 Top 5

开发者使用最多的交互功能 Top 5 分别是：

1. <details> 和 <summary>：隐藏或显示内容

<details>
  <summary>Details</summary>
  Longer content
</details>

2. <dialog>：对话框

<dialog id="confirm">
  <form method="dialog">
    Are you sure?
    <button value="1">Yes</button>
    <button value="0">No</button>
  </form>
</dialog>

3. <details name>：手风琴效果

<details open name="sidebar_panel">
  <summary>Main info</summary>
  <!-- controls -->
</details>
<details name="sidebar_panel">
  <summary>Style</summary>
  <!-- controls -->
</details>

4. popover：弹出窗口

<button popovertarget="foo">Toggle the popover</button>
<div id="foo" popover>Popover content</div>

5. element.before()：将一个元素移动到另一个元素之前的 DOM 方法

referenceElement.before(newElement);

性能 Top 5

开发者使用最多的性能功能 Top 5 分别是：

1. loading="lazy"：懒加载

<img src="picture.jpg" loading="lazy" /> <iframe src="supplementary.html" loading="lazy"></iframe>

2. srcset 和 sizes 属性：提供多个源图像，以帮助浏览器选择正确的图像

<img srcset="fairy-med.jpg 480w, fairy-large.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="fairy-large.jpg" alt="Elva dressed as a fairy" />

3. fetchpriority 属性：浏览器优先获取该资源

<img src="logo.svg" fetchpriority="high" />

4. <img sizes="auto" loading="lazy">：sizes="auto" 属性会在图像加载之前为其预留布局空间，从而避免一些布局偏移

<img sizes="auto" loading="lazy" />

5. blocking="render"：阻止渲染（但不阻止解析），直到某些资源加载完毕

<script blocking="render" async src="async-script.js"></script>

Web 组件 Top 5

开发者使用最多的 Web 组件功能 Top 5 分别是：

1. 自定义元素

<my-switch start="On" end="Off">Wi-Fi</my-switch>

2. 定义自定义元素

class MyElement extends HTMLElement { … }
customElements.define("my-element", MyElement);

3. Shadow DOM：将外部不可见的元素封装起来，并使用不影响页面其余部分的 CSS 对其进行样式设置

this.shadowRoot = this.attachShadow({ mode: "open" });

4. slot 属性：将组件 UI 中预定义的部分替换为自己的元素

<my-switch>
  Wi-Fi
  <i slot="start" class="icon-on">On</i>
  <i slot="end" class="icon-off">Off</i>
</my-switch>

5. 声明 Shadow DOM：使用 HTML 定义 Shadow 树，例如在服务器端渲染 Web 组件时

<host-element>
  <template shadowrootmode="open">
    <!-- Shadow content -->
  </template>
</host-element>

系统功能 Top 5

开发者使用最多的系统功能 Top 5 分别是：

1. Web Share API：将内容共享给用户选择的各种目标的机制

navigator.share(shareData);

2. 文件系统访问 API：访问用户本地设备上的文件和目录，并创建可写文件，以便进行更新

const handle = await window.showSaveFilePicker();
const writable = await handle.createWritable();
await writable.write("Hello, world!");
await writable.close();

3. SpeechRecognition：将麦克风输入转换为文本的 API

const rec = new SpeechRecognition();
rec.lang = "en-US";
rec.addEventListener("result", (e) => console.log(e.results[0][0].transcript));
rec.start();

4. share_target manifest field：允许 PWA 通过系统共享对话框接收来自其他应用程序共享的数据（文本、文件、URL）

"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url",
    "files": [{ "name": "image", "accept": ["image/*"] }]
  }
}

5. 文件处理 API：允许 PWA 将自身注册为某些文件类型的处理程序

"file_handlers": [{
  "action": "/open-file",
  "accept": {
    "image/svg+xml": ".svg",
    "image/png": ".png"
  }
}]

无障碍 Top 5

开发者使用最多的无障碍功能 Top 5 分别是：

1. 地标元素
2. tabindex 属性：使 HTML 元素可聚焦，允许或阻止它们按顺序获得焦点

<div role="button" tabindex="0">I’m Tabbable</div>

3. <search>：用于封装搜索用户界面的语义元素

<search>
  <form action="search.php">
    <label>Find: <input name="q" type="search" /></label>
    <button>Go!</button>
  </form>
</search>

4. focusgroup 属性：使用键盘方向键在可聚焦元素之间进行键盘焦点导航

<div focusgroup="wrap horizontal">
  <!-- child elements -->
</div>

最后

我们通常认为最炫酷的功能会最吸引开发者，比如人工智能 API、3D/XR/AR 或设备 API。

然而，年复一年，最终脱颖而出的却往往是那些看似平淡无奇的功能，甚至是一些非常普通的功能：下拉菜单、组合框、弹出框、对话框、表单验证、文件加载和保存、模板、安全地显示用户生成内容、图标等等。

有人可能会问：“这些功能不是早就有了吗？”

确实是，但问题在于 ——当用户界面无法自定义或设置样式时，它实际上就等于无法使用。

于是你不得不重复造轮子，拼一堆第三方库。结果明明是基础需求，却搞得像 “高端操作”。

但好消息是：HTML 正在变好！

2023 年还在讨论的功能，现在已经在主流浏览器上线了；之前没法用的 Popover API，现在所有主流浏览器都支持了。

虽然开发者的信任要滞后很多……

比如 Popover API 明明已经全支持了，却还是开发者投诉 “浏览器不支持” 最多的功能 —— 不是浏览器没跟上，是我们还没反应过来 “这个功能已经能用了”。

此外，AI 也拖了后腿。

按理说，AI 懂现代 Web 功能，应该能帮我们更快应用新特性，但实际情况是 —— AI 太保守了，推荐的都是 “老办法”，反而让新功能的普及变慢了。

总的来说，HTML 的未来方向很清晰：更灵活、更能表达需求、更贴合开发者实际开发习惯。

最后使用报告中的一句话：

“Web 的进步很少轰轰烈烈，但都是累积的。每多一个基本功能，就少用一次变通方案、少依赖一个库、少写一个脆弱的 hack。等这些基础都到位了，整个 Web 开发都会变轻松。”

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。

1. 前言

作为一名前端开发工程师，你一定被 JavaScript 的日期处理折磨过。

这不是你的问题，是 JavaScript 自己的问题——它的 Date 功能真的很糟糕。

2. Date 的离谱行为

让我给你举几个例子，你就明白有多离谱了：

月份从 0 开始计数：

// 你以为这是 2026 年 1 月 1 日？
console.log(new Date(2026, 1, 1));
// 结果：2026 年 2 月 1 日！

// 因为月份是从 0 开始数的：0=1月，1=2月...
// 但年份和日期又是正常计数的

日期格式混乱到让人抓狂：

// 用斜杠分隔，加不加前导零都没问题
console.log(new Date("2026/01/02"));
// Fri Jan 02 2026 00:00:00 GMT+0800 (中国标准时间)

// 但如果用短横线分隔，同样的写法
console.log(new Date("2026-01-02"));
// Fri Jan 02 2026 08:00:00 GMT+0800 (中国标准时间)

// 时间居然不一样了！

// 如果用东半球标准时间，更离谱！一个是 1 月 2 日，一个是 1 月 1 日

两位数年份的迷惑行为：

console.log(new Date("49")); // 2049 年
console.log(new Date("99")); // 1999 年
console.log(new Date("100")); // 公元 100 年！

规则莫名其妙：33-99 代表 1900 年代，但 32-49 又代表 2000 年代，100 以上就真的是公元那一年了。

更致命的问题是 —— 日期居然可以被“改变”！

const today = new Date();
console.log(today.toDateString()); // Fri Jan 09 2026

// 我想算一下明天是几号
const addDay = (theDate) => {
  theDate.setDate(theDate.getDate() + 1);
  return theDate;
};

console.log(`明天是 ${addDay(today).toLocaleDateString()}。`);
// 明天是 2026/1/10。

console.log(`今天是 ${today.toLocaleDateString()}。`);
// 今天是 2026/1/10。

// 等等，今天怎么也变成明天了？！

当然这是可以解释的：

因为 today 就像一个地址，指向内存里的某个位置。当你把 today 传给函数时，函数拿到的也是这个地址。所以当函数修改日期时，原来的 today 也被改了。

但这种设计违反了一个基本常识：日期应该是固定的。“2026 年 1 月 10 日”就是“2026 年 1 月 10 日”，不应该因为你拿它做了个计算，它自己就变了。

所以 Date 真的很糟糕。实际上，它就是挂羊头卖狗肉，它叫做 Date，表示日期，实际上，它是时间。

在内部，Date 是以数值形式存储的，这就是我们熟悉的以 1000 毫秒为单位的时间戳。

时间当然包含日期，你可以从时间中推断出日期，但这多少有点恶心了。

Java 早在 1997 年就弃用了其 Date 类，而 JavaScript 的 Date 类仅仅在几年后就问世了；与此同时，我们却一直被这个烂摊子困扰着。

正如你目前所见，它在解析日期方面极其不稳定。它除了本地时间和格林威治标准时间 (GMT) 之外，对其他时区一无所知。而且，Date 类只支持公历。它完全不理解夏令时的概念。当然最糟糕的还是它的可变的，这直接让他偏离了时间的本质。

所有这些缺陷使得使用第三方库来解决这些问题变得异常普遍，其中一些库体积庞大，这种性能损耗已经对网络造成了切实可衡量的损害。

3. Temporal 才是未来

幸运的是，Date 即将彻底退出历史舞台。

当然这样说，还是有点夸张了。

实际上是它会一直存在，但如果可以避免，你最好不要再用它了。

因为我们会有一个完全取代 Date 的对象 —— Temporal。

部分同学可能对 Temporal 这个单词不太熟悉，实际上，它的意思就是“时间”，你可以理解为它是一个更专业的词汇：

与 Date 不同，Temporal 不是构造函数，它是一个命名空间对象——一个由静态属性和方法组成的普通对象，就像 Math 对象一样：

console.log(Temporal);
/* Result (expanded):
Temporal { … }
  Duration: function Duration()
  Instant: function Instant()
  Now: Temporal.Now { … }
  PlainDate: function PlainDate()
  PlainDateTime: function PlainDateTime()
  PlainMonthDay: function PlainMonthDay()
  PlainTime: function PlainTime()
  PlainYearMonth: function PlainYearMonth()
  ZonedDateTime: function ZonedDateTime()
  Symbol(Symbol.toStringTag): "Temporal"
*/

Temporal 包含的类和命名空间对象允许你计算两个时间点之间的持续时间、表示一个时间点（无论是否具有时区信息）、通过 Now 属性访问当前时间点等。

如果我们要获取当前时间：

console.log(Temporal.Now.plainDateISO());
/* Result (expanded):
Temporal.PlainDate 2025-12-31
  <prototype>: Object { … }
*/

该方法返回的是当前时区的今天日期。

Temporal 还能支持时区：

const date = Temporal.Now.plainDateISO();

// 指定这个日期在伦敦时区
console.log(date.toZonedDateTime("Europe/London"));

Temporal 还可以计算日期差：

const today = Temporal.Now.plainDateISO();
const jsShipped = Temporal.PlainDate.from("1995-12-04"); // JavaScript 发布日期
const difference = today.since(jsShipped, { largestUnit: "year" });

console.log(`JavaScript 已经存在了 ${difference.years} 年 ${difference.months} 个月零 ${difference.days} 天。`);

各种时间操作也会更加直观：

const today = Temporal.Now.plainDateISO();

// 加一天
console.log(today.add({ days: 1 }));

// 加一个月零一天，再减两年——可以链式操作
console.log(today.add({ months: 1, days: 1 }).subtract({ years: 2 }));

// 看，多清楚！

当然，更重要的是，日期不会被意外修改

const today = Temporal.Now.plainDateISO();

// 计算明天的日期
const tomorrow = today.add({ days: 1 });

console.log(`今天是 ${today}。`); // 2025-12-31
console.log(`明天是 ${tomorrow}。`); // 2026-01-01

// 今天还是今天，完美！

add 方法会返回一个新的日期对象，而不是修改原来的。就像你复印了一份日历，在复印件上写字，原件不会被弄脏。

4. 什么时候能用？

好消息：最新版的 Chrome 和 Firefox 已经支持了！

坏消息：它还在“实验阶段”，这意味着具体用法可能还会微调，但大方向已定。

我们终于要和 Date 的噩梦说再见了。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs） ，每天分享前端知识、AI 干货。