这是一个很多开发者都会犯的错误。

几个月前，我给自己定了一个挑战：

尝试开发一个内部管理后台，并且尽可能减少JavaScript的使用。

目标很简单：

减少依赖。

降低复杂度。

提升加载速度。

但最后让我意外的，并不是我删掉了多少JavaScript代码。

而是：

我突然发现，自己竟然忽略了HTML这么多年。

很多过去我认为必须依赖框架、插件，甚至需要自己写大量代码实现的功能，其实早就已经被浏览器原生支持。

1. 原生表单验证

很多年前，我经常为了检查用户输入是否完整，专门写JavaScript验证逻辑。

比如：

用户有没有填写邮箱？

邮箱格式是否正确？

字段是不是为空？

然后不断维护各种验证代码。

后来我才发现：

浏览器自己已经会做这些事情。

例如：

<form>
  <input type="email" required>
  <button type="submit">Subscribe</button>
</form>

就这么简单。

浏览器会自动完成：

• 检查必填字段；
• 验证邮箱格式；
• 阻止错误提交；
• 显示友好的错误提示。

完全不需要额外写验证逻辑。

为什么它会让网站感觉更高级？

原因很简单：

用户可以立即得到反馈。

开发者减少重复代码。

产品体验也更加顺畅。

现在我的习惯是：

优先使用HTML原生验证。

只有当需求真的超出浏览器能力时，才加入JavaScript。

2. Details折叠元素

这个功能第一次发现时，我甚至觉得有点“不公平”。

因为过去我做FAQ手风琴效果，通常需要：

写JavaScript。

管理展开状态。

处理点击事件。

兼容键盘操作。

但现在：

一个HTML标签就够了。

<details>
  <summary>What is HTML5?</summary>
  <p>The latest evolution of HTML.</p>
</details>

浏览器自动提供：

• 可展开区域；
• 键盘访问支持；
• 状态管理；
• 基础交互效果。

没有脚本。

没有依赖。

甚至不用引入任何组件库。

实际应用场景

它非常适合：

• 常见问题FAQ；
• 产品文档；
• 参数说明；
• 更新日志。

以前几十行JavaScript才能完成的交互，现在一行HTML就可以解决。

3. 能自动优化体验的Input类型

很多开发者使用表单时，习惯只写：

<input type="text">

但这其实浪费了HTML5提供的大量能力。

HTML5增加了很多专用输入类型：

<input type="date">

<input type="color">

<input type="range">

<input type="tel">

现代浏览器会自动提供优化后的交互界面。

尤其是在手机端。

用户可以直接获得：

• 数字键盘；
• 日期选择器；
• 颜色选择器。

无需额外开发。

---

为什么这个细节很重要？

因为：

每减少一次用户操作，就增加了一点完成任务的概率。

很多人认为自动化一定来自AI。

其实并不是。

有时候，真正优秀的体验，只是：

让浏览器做好它本来应该做的事情。

---

4. Progress进度元素

以前开发加载进度条，我经常自己写组件。

计算百分比。

控制动画。

处理样式。

后来发现：

HTML已经内置了。

<progress value="65" max="100"></progress>

直接拥有进度展示能力。

非常适合：

• 文件上传；
• 学习进度；
• 软件安装；
• 数据统计。

---

它真正强大的地方是什么？

不是视觉效果。

而是语义化。

屏幕阅读器能够理解它。

浏览器能够理解它。

搜索引擎也能够理解它。

用户同样能够理解。

这才是好的工程设计。

5. 图片懒加载

这个功能曾经直接改变了我的一个项目体验。

以前：

页面里的所有图片都会立即加载。

哪怕用户根本没有滚动到那里。

结果就是：

首屏加载慢。

流量浪费。

性能下降。

现在：

只需要增加一个属性。

<img src="product.jpg"
     alt="Product"
     loading="lazy">

一个参数。

带来明显性能提升。

浏览器背后做了什么？

当图片即将进入用户视野时，浏览器才开始加载。

这样可以获得：

• 更快页面打开速度；
• 更低带宽消耗；
• 更好的Core Web Vitals表现；
• 更流畅的用户体验。

Google喜欢快速的网站。

用户也喜欢快速的网站。

甚至你的跳出率，也喜欢快速的网站。

6. Dialog弹窗元素

我曾经花了很多时间手写弹窗。

包括：

遮罩层。

关闭按钮。

焦点控制。

键盘事件。

无障碍处理。

直到HTML5推出Dialog。

例如：

<dialog id="popup">
  <p>Welcome back!</p>
</dialog>

然后：

document.getElementById("popup").showModal();

就可以创建一个模态窗口。

最后

现代Web开发正在出现一种“依赖过度”的问题。

很多时候，我们第一反应是：

安装一个新的包。

引入一个新的框架。

增加一层新的抽象。

但却忘记：

浏览器本身可能已经提供了解决方案。

未来几年，真正优秀的开发者，不一定是使用工具最多的人。

而是知道：

什么时候根本不需要工具的人。

因为真正高级的开发，不是不断增加复杂度。

而是用最简单的方式，解决最复杂的问题。