2025 年 HTML 年度调查报告亮点速览！

Abierto
  • ¿Algo no está bien?
#397 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
20/100
Tipo de issue
Documentación
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
html
Área
content, documentation, frontend

Línea de trabajo

The issue contains a Chinese HTML survey article with embedded images, examples, and links to MDN references, but it names no repository file or requested change. Start by locating where this article belongs in the blog; done requires a defined editorial scope and a corresponding update to the article.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

1. 前言

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

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

上篇文章我们盘点了使用最多的功能 Top 5，本篇我们盘点下这份报告的亮点部分。

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

2. 延迟加载最常用

使用过延迟加载的受访者比例高达 70%，是“新可用（Newly Available）”功能中最常用的功能。

所谓延迟加载，指的是 loading="lazy"属性，该属性可以指定仅在需要时加载资源。

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

3. 内容安全策略（CSP）使用量增长最多

内容安全策略的使用量同比增长最大。

但同时，内容安全策略也是最令人失望的功能榜首 😂。

所谓内容安全策略，指的是网站向浏览器发出的一组指令，用于帮助检测和缓解 XSS 攻击。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" />

4. <input type="color"/>表单使用最广泛

<input type="color"/> 是 2025 年使用最广泛的表单相关功能，41.8% 的受访者表示使用过该功能。

5. JPEG XL 最受好评

JPEG XL 和 ctx.drawElement() 是图形方面两项最受好评的新功能。

关于这两项功能：

JPEG XL 是一种新型图像编码格式，它结合了现有的 JPEG 和 WebP 编码技术，旨在提供更好的压缩性能、更高的图像质量和更好的适用性，支持有损和无损压缩。它旨在超越现有的位图格式，并成为它们的通用替代。

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>

6. hidden="until-found" 好多人从没听说过

你知道浏览器现在可以玩捉迷藏了吗？

这个 hidden="until-found" 属性可以让你隐藏一个元素，直到用户触发它，例如点击指向它的锚链接。

目前这项功能显然还处于“隐藏”状态，79.4% 的受访者甚至从未听说过它。

而且浏览器支持仍然有限（说的就是你，Safari！）。

但一旦互操作性得到改善，它或许会成为你工具箱中不可或缺的工具。

7. Sanitizer API 最受欢迎

最受欢迎和最不受欢迎的功能都与安全有关：

Sanitizer API 获得了最多的正面评价，而内容安全策略则位列最令人失望的功能榜首。

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

8. popover 可以开始用了

Popover API 今年正式上线，这意味着它现在已被四大主流浏览器全面支持。

所以现在正是学习该 API 的最佳时机。

其实 Popover API 学起来也很简单，它主要用于实现弹出窗口，例如覆盖层、弹窗、菜单等。

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

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

9. blocking="render" 知道的人多了起来

顾名思义，这个属性可以让<link>、<script>、<style>标签阻塞页面渲染，直到它们完全加载完毕。

不过浏览器支持尚未完全到位，但一旦得到广泛支持，它肯定会使网页加载用户体验更加流畅。

10. ElementInternals 可以开始用了

如果你编写过 Web 组件，那么你一定经常需要指定自定义伪类、默认 ARIA 参数，或者让组件的行为像常规表单元素一样。

ElementInternals 不仅能做到这些，还能做得更多！

而且它应用广泛，自 2023 年以来就受到所有浏览器的支持！

11. PaymentRequestAPI 值得密切关注

广告似乎已成为网络世界中不可避免的一部分，PaymentRequest API 可能是实现浏览器集成微支付的第一步。仅凭这一点，就值得我们密切关注。

目前支持度欠佳：

12. <search>可以开始用了

<search> 元素属于那种只需稍加努力就能轻松添加到最佳实践列表中的实用技巧。

用于封装搜索用户界面的语义元素：

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

现在它已被四大主流浏览器支持，没有理由不使用它了。

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

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

Lenguaje dominante
Sin datos de lenguaje
Estrellas
31.1k
Forks
4.6k
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de mqyqingfeng/Blog

Todos los issues de mqyqingfeng/Blog

Issues similares

Más issues de Content

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.