跳到内容

State of HTML 2025

使用情况

您如何使用 HTML。

浏览器互操作性

Web 平台的状态与实际的现实世界采用之间总是存在一点滞后，所以 Popover API 仍然位居榜首也就不足为奇了。但别搞错了，这个功能现在正式拥有“新近可用”的基准状态，这意味着以后跨浏览器使用它应该不再是一个问题。
由于浏览器差异或缺乏支持，您无法使用哪些现有 HTML 功能或浏览器 API？
多选
对应特定 Web 平台特性的最主要痛点主题。

视图:

标记为“features”的项目
0%
20%
40%
60%
80%
100%
01
02
<select>
+4
03
-1
04
05
+7
06
-1
07
-3
08
+2
09
<input type="date">
-1
10
0%
20%
40%
60%
80%
100%
受访者百分比
884
14%
25
5

功能有限

表单控件和其他交互元素再次被认为是限制最大的。随着可定制选择的解决，看起来也许日期选择器应该是下一个目标。
由于其他原因，您无法使用哪些现有的 HTML 功能或浏览器 API？
多选
对应特定 Web 平台特性的最主要痛点主题。

视图:

标记为“features”的项目
0%
20%
40%
60%
80%
100%
01
<select>
02
<input type="date">
03
+5
04
05
-1
06
+1
07
<select multiple>
08
-2
09
10
<input type="color">
0%
20%
40%
60%
80%
100%
受访者百分比
406
7%
5

缺失的元素

今年 datatable 再次成为最受欢迎的新元素。虽然拥有内置的过滤、排序、搜索等功能肯定很棒，但这似乎不是很快就会成为现实的事情。

另一方面，其他期待已久的功能（如原生 switch 元素）正在取得进展，这解释了它在排名中的下降。

如果可以在 HTML 中添加 3 个元素，它们是什么？
多选
0%
20%
40%
60%
80%
100%
01
数据表（带排序、筛选等功能）
1,545
02
组合框/自动补全
1,249
03
选项卡（Tabs）
-1
1,182
04
下拉菜单
1,071
05
富文本编辑器
975
06
开关（Switch / Toggle）
-3
957
07
HTML 包含 (HTML include)
920
08
可排序的拖放列表
910
09
骨架屏/加载占位符
-5
728
10
上下文菜单/右键菜单
-5
719
0%
20%
40%
60%
80%
100%
受访者百分比
3,887
62%
25

样式问题

表单输入位居最难设置样式的元素榜首，这不足为奇。值得庆幸的是，可定制的 select 元素正在开发中，尽管浏览器支持仍然滞后。
您在设置样式或视觉自定义方面最纠结哪些元素？
多选
0%
20%
40%
60%
80%
100%
01
<select>
1,699
02
<input type="date">
1,178
03
<select multiple>
792
04
791
05
验证错误
491
06
432
07
<input type="time">
401
08
369
09
<input type="range">
317
10
314
0%
20%
40%
60%
80%
100%
受访者百分比
3,331
54%
10

HTML 复用

很难否认 JavaScript 组件已成为在 Web 上构建 UI 的主导范式。是的，处理所有这些相互竞争的前端框架可能会很混乱——但这是我们知道的（甚至可能喜欢的？）混乱，这一事实使得 Web 组件很难在第四名之外获得进展。
您使用哪些策略来实现组件或以其他方式复用 HTML 代码？
多选
0%
20%
40%
60%
80%
100%
1
基于组件的 JavaScript 框架
2,696
2
服务端模板
1,922
3
客户端模板
1,297
4
1,237
5
构建时模板
1,184
6
复制粘贴
914
7
Web 组件辅助库
492
8
无
44
9
其他答案
69
0%
20%
40%
60%
80%
100%
受访者百分比
3,749
60%
10

设计系统

设计系统已成为大多数大型项目的要求，这一事实反映在所有这些不同方法的流行中。
您是否使用以下任何设计系统策略来保持 UI 一致性？
多选
0%
20%
40%
60%
80%
100%
1
元素/组件
3,084
2
设计令牌 (Design tokens)
2,664
3
实用程序类 (Utilities)
2,407
4
指南
2,008
5
模式
1,316
6
无
112
7
其他答案
45
0%
20%
40%
60%
80%
100%
受访者百分比
3,810
61%
10

HTML/CSS 与 JavaScript/TypeScript 之间的平衡

正如上面的“组件策略”图表所示，JavaScript 是我们生成的许多 HTML 代码的事实上的载体。这解释了为什么我们花这么多时间编写它！
您如何分配编写 HTML/CSS 和 JavaScript（或 TypeScript）代码的时间？
0%
20%
40%
60%
80%
100%
1
100% HTML/CSS
65
2
1
269
3
2
422
4
3
287
5
50%–50%
635
6
5
494
7
6
1,179
8
7
494
9
100% JS
40
0%
20%
40%
60%
80%
100%
受访者百分比
3,885
62%
57%
63%
10

HTML 使用情况

虽然平均调查受访者主要致力于动态 Web 应用程序，但我们许多人也花时间创建博客或其他文本密集型网站，这让人回想起 HTML 作为面向文档语言的根源。
What do you use HTML for?
多选
0%
20%
40%
60%
80%
100%
01
网络应用
3,378
02
博客或其他文本密集型网站
2,253
03
营销网站和登录页
1,894
04
设计系统
1,519
05
电子邮件
1,139
06
桌面应用
891
07
移动应用程序
879
08
印刷文件
659
09
E-Commerce sites
10
无
16
11
其他答案
114
0%
20%
40%
60%
80%
100%
受访者百分比
3,933
63%
10
💡
科学证明，在Twitter、Facebook或电子邮件上分享这项调查， 可以让你的 JavaScript 性能提高15%。

其他痛点

当更普遍地看待 Web 平台痛点时，浏览器支持脱颖而出——尤其是在涉及 Apple 生态系统时。

因此，像 #AppleBrowserBan 标签这样的社区倡议一直在获得动力，而在供应商方面，Interop 每年都在朝着正确的方向迈进。

在使用 HTML 和相关技术方面还有其他痛点吗？
多选
总体上最主要的痛点主题。

视图:

不为“limitations”之一的项目
0%
20%
40%
60%
80%
100%
01
Browser support
1
02
Environments & Consumers
2
03
Content
2
04
Reliance on JavaScript
05
Cognitive overload
2
06
Ecosystem issues
2
07
Education
08
Accessibility
09
Excessive complexity
10
Poor design
1
11
Styling & customization
1
12
Performance
13
Vendor politics
14
Missing elements
15
16
workplace
17
Tooling
18
Security & privacy
19
PDF
20
Declarative APIs
21
其他答案
0%
20%
40%
60%
80%
100%
受访者百分比
191
3%
5

资源推荐

Frontend Masters

Frontend Masters

Advance Your Skills with In-Depth, Modern Front-End Engineering Courses
感谢合作伙伴对我们的支持! 了解更多。