HTML 还有啥可学的？这份年终总结帮你梳理
💰 点进来就是赚到知识点！本文带你解读 2024年 HTML 的发展现状，点赞、收藏、评论更能促进消化吸收！
前言
作为前端三驾马车之一的 HTML，其关注度可能不如 CSS 和 JavaScript 那样高。但这绝不是因为它不重要，正相反，作为 Web 生态的基石，HTML 是最早被设计出来构成 Web 页面的基本标准，它简明、稳定，所以非常让开发者省心，绝不是 CSS 和 JavaScript 那种闹人的孩子。
一般来说，30 岁的人就不怎么长高了，那么这项 30 岁的 Web 技术，是否也已经悄悄停止了生长呢？我的答案是：并没有。这不，最近《2024 HTML 年度调查结果报告》新鲜出炉，从从业人群、特性、工具等维度统计了来自全球 5000+ 的问卷结果，汇总出了 2024 年 HTML 的完整面貌。
如果你也不甘落后，想与业界保持同步的技术认知和水平，但又没时间仔细研究完整个维度繁复、类目庞杂的调查报告，那接下来，我会带你直击几个核心类目的 Top 5，让你轻松了解全球开发者最爱用、最关注、最期待的特性和 API。
最常用功能 Top5
上图中列出的功能，是用过人数最多的前 5 个元素。
Landmark元素：<main>、<nav>、<aside>、<header>、<footer>、<section>这些 HTML5 语义化标签。还记得十年前我入行前端时，「什么是 HTML 语义化」是必考的面试题。tabindex：控制元素的聚焦交互，是提升用户操作效率的小妙招。- 懒加载：控制图片、视频或 iframe 的加载时机，可以有效节省带宽、提升首屏加载速度。
srcset：设置多媒体元素的源路径，它的广泛使用代表着 Web 页面内容的多样性。<details>和<summary>：原生折叠/展开控件。我得承认我还没直接使用过，看来技术栈要更新了。
最想了解的特性 Top5
如上图所示，这 5 个特性是开发者们在填完问卷后最想要第一时间去学习的。
- 自定义
Select元素：可自定义内容和样式的下拉菜单，目前包括<selectlist>和<selectmenu>。
focusgroup：让用户能用键盘的方向键来选中聚焦元素，提升操作体验和效率。- Popover API：原生的弹层组件
- EditContext API：控制元素可编辑性
- 自定义高亮：用 CSS 控制文本选中后的样式
Web 组件库 Top5
当被问到用哪些库/框架来搭建 UI 界面时，上图中这 5 种库名列前茅；而大家熟知的 Vue、React 则分别排在了第 12 和第 13。是不是很意外？其实这可能和问题的语境有关系。大型 Web 应用为了方便协作和维护一般用主流框架，但也有些中小工程用一些简洁框架反而更高效。
用 Web 技术开发原生应用时最常用的特性 Top5
这一领域相对小众，样本数量下降了一个量级。但也为我们提供了不一样的视角，看到一些新鲜的 API：
- Web Share API：用于控制分享逻辑。
- File System Access API：用于处理设备本地的文件，增删改查样样行，能力超强，我有一个专栏就是写这个 API 的。
- Launch API：控制 PWA 的启动逻辑。
- FIle Handling API：用于在 PWA 中注册文件类型。
- WIndow Controls Overlay API：PWA 控制自定义内容的显示。
网站生成框架 Top5
这类框架一般用于静态官网、博客等站点的生成。
- Next.js：基于 React，无论是国内外都是应用最广的主流框架。
- Astro：它有一套自己的组件体系，像 Vue 但又有独到之处，很适合搭建博客。
- Nuxt：基于 Vue，对标 Next.js。我在用，一套代码搞定前后端逻辑，非常爽。
- SvelteKit：顾名思义是 Svelte 的配套生态。
- Eleventy：还没用到过，从官网介绍看，是主打小巧简洁。很想玩一玩。
信息来源 Top5
这一类目统计了开发者们日常获取泛 HTML 知识和信息的渠道，从数据可以看到大家主要用的都是上图这几种。
呼声最高的补完计划 Top5
有这么一些组件，是咱们日常开发非常常用，但 HTML 却迟迟没有提供原生支持的：
- 数据表格：指的是自带排序、过滤等常用功能的 table。
- 标签页组件
- Switch/Toggle 开关
- 骨架屏、Loading 组件
- 右键菜单
结语
恭喜你读完本文，你真棒！
这一次我们选取了 7 个核心维度来解读 《2024 HTML 年度调查结果报告》。如果其中有你陌生的技术点，那正好可以查缺补漏。
最后，咱们玩个互动小游戏：
把你的输入法切到中文，再按 H、T、M、L 这四个键，把你最离谱的联想词打在评论区，看看谁最逆天！
我用的是小鹤双拼，所以打出了「混天绫」，笑死，每天都用 HTML，原来我是哪吒。
📣 我是 Jax，在畅游 Web 技术海洋的又一年，我仍然是坚定不移的 JavaScript 迷弟，Web 技术带给我太多乐趣。如果你也和我一样，欢迎关注、私聊！
来源：juejin.cn/post/7439353204054228992
