你好，世界！
浏览网页、获得来自世界各地的资讯是人们上网活动的主要部分。网页上有许多交互的元素，比如按钮、输入框、对话框等，它们实现网页和用户的交互，有时会让网页功能丰富、界面灵活。然而，许多这样的交互功能是开发者使用 JavaScript 实现的。浏览器里的 JavaScript 实际上有许多隐私和安全的隐患。
实际上，许多网络开发者太习惯于使用 JavaScript 来处理交互，而忘了只用网页语言 HTML 就能实现的交互效果。
今天，我们就来探索如何仅使用 HTML，实现那些常见且实用的交互效果。这不仅能减少对 JavaScript 的依赖，让页面更轻快，还能更贴近浏览器的“原生”体验。
`popover`属性让做一个点击按钮显示/隐藏信息的弹窗变得很简单，而无需编写`display: block`或`z-index`的 JavaScript 逻辑。
其核心属性如下：
<!-- 控制按钮 -->
<button popovertarget="notice-popup">查看通知</button>
<!-- 弹窗内容 -->
<div id="notice-popup" popover>
<p>您有一条新的系统消息。</p>
<button popovertarget="notice-popup" popovertargetaction="hide">关闭</button>
</div>
效果：点击“查看通知”按钮，弹窗会出现在页面顶层。点击“关闭”按钮、弹窗外任意空白处或按键盘的`Esc`键，弹窗自动关闭，全程无需任何 JavaScript。
对于需要用户必须做出响应（比如确认删除、阅读重要条款）的模态框，`<dialog>`元素是绝佳选择。我们同样可以结合`popover`来用纯 HTML 控制它的显示。
<!-- 用 popover 方式打开 dialog -->
<button popovertarget="confirm-dialog">删除我的账号</button>
<dialog id="confirm-dialog" popover>
<p>此操作不可撤销，确定要删除账号吗？</p>
<!-- 方法1: 使用 popover 关闭 -->
<button popovertarget="confirm-dialog" popovertargetaction="hide">取消</button>
<!-- 方法2: 使用 form 关闭 (更符合 dialog 语义，且不刷新页面) -->
<form method="dialog">
<button>确认删除</button>
</form>
</dialog>
效果：对话框会居中显示，并带有背景遮罩（浏览器原生提供）。点击“取消”或遮罩处即可关闭，点击“确认删除”则通过表单方式关闭，交互清晰且安全。
`<details>`和`<summary>`早已支持单个内容的展开收起。现在，通过共享`name`属性，可以将它们编组，形成“手风琴”效果：展开一个，自动收起同组其他项。
<details name="menu-group">
<summary>主食</summary>
<p>米饭、面条、饺子</p>
</details>
<details name="menu-group">
<summary>配菜</summary>
<p>凉拌黄瓜、酸辣土豆丝</p>
</details>
<details name="menu-group">
<summary>饮品</summary>
<p>绿茶、柠檬水、豆浆</p>
</details>
效果：点击任意一个类别，其内容展开，之前打开的类别会自动收起。非常适合做常见问题回答、侧边栏菜单或产品分类，代码极其简洁。
这是一项较新但潜力巨大的功能。它允许一个按钮通过`command`属性直接控制另一个元素（如弹出框、对话框等）的行为，无需编写事件监听。
<!-- 两个按钮分别控制同一个面板的打开和关闭 -->
<button command="show-popover" commandfor="control-panel">展开面板</button>
<button command="hide-popover" commandfor="control-panel">收起面板</button>
<div id="control-panel" popover>
<p>这是一个可被命令控制的面板。</p>
<button command="hide-popover" commandfor="control-panel">关闭</button>
</div>
效果：点击“展开面板”显示内容，点击“收起面板”或内部的“关闭”按钮隐藏内容。未来`command`支持的值将更丰富（如控制视频播放、增减数值等），让 HTML 的交互控制力更强。
优化页面性能的常用手段是图片懒加载。现在，无需引入`IntersectionObserver`库或编写复杂逻辑，直接在`<img>`标签上设置即可。
<img src="high-res-photo.jpg" alt="风景" loading="lazy" width="1200" height="800">
效果：图片会在即将进入浏览器视口时才被加载。浏览长页面时，这能显著提升首屏加载速度，节省用户流量。这是目前最原生、最可靠的懒加载方式。
这是一个有趣且实用的功能。元素默认处于隐藏状态，但当页面内导航（如点击锚点链接跳转到该元素的`id`）或使用浏览器页面搜索（`Ctrl+F` / `Cmd+F`）指向它时，浏览器会自动将其显示出来。
<a href="#easter-egg">点击寻找彩蛋</a>
<!-- 这个段落默认完全隐藏，只有通过上述链接跳转或搜索“彩蛋”时才会显示 -->
<p id="easter-egg" hidden="until-found">
恭喜你找到隐藏的彩蛋！这里是给你的小惊喜。
</p>
效果：点击链接，页面会滚动到该段落，并且它自动变为可见。这种交互非常适合做“提示答案”、“隐藏关卡”或“用户指引”，完全由 HTML 原生支持。
大家已经看到了，HTML 提供了许多功能强大的原生控件，它们自带完整的交互界面，完全无需 JavaScript。类似的控件还有不少：
<label>选择主题色：<input type="color" value="#2E86AB"></label>
<label>预约日期：<input type="date"></label>
<label>设置音量：<input type="range" min="0" max="100" value="60"></label>
<label>文件上传进度：<progress value="45" max="100">45%</progress></label>
<label>电量状态：<meter min="0" value="75" max="100" low="20" high="90">75%</meter></label>
<!-- datalist 提供输入建议 -->
<label>输入你喜欢的编程语言：
<input type="text" list="lang-list">
</label>
<datalist id="lang-list">
<option value="Python">
<option value="JavaScript">
<option value="Java">
<option value="C++">
<option value="Rust">
</datalist>
效果：颜色、日期选择器会弹出系统级或浏览器内置的交互界面。`datalist`会在你输入时动态显示匹配的建议列表。所有这些控件都具备完整的键盘操作和无障碍支持。
HTML 的这些原生功能强大、简洁，且正不断发展。这些功能虽然不是为了完全取代 JavaScript，而是为网络提供了更多“无干扰”、高性能的交互选择。在合适的场景下使用它们，能让你的网页更优雅、更健壮。更重要的是，这些功能让你避免使用 JavaScript， 让浏览器不必加载额外代码，有效保护了用户安全和隐私。
现在，打开你的浏览器，新建一个 HTML 文件，将上面的示例代码复制进去试试吧！你会发现，HTML 的世界，比你想象的更精彩。如果你希望自己的网页没有 JavaScript，那么 立伯乐 或许可以帮你。
让自由软件带你进入的美好自由世界！