HTML 逐步接管 JavaScript 功能领域HTML 正在逐步接管许多原本属于 JavaScript 的功能领域。本页面列举了一系列现在仅用 HTML 就能实现的动态功能。页面搭建与修改更新于 2026 年 8 月 20 日最初在 2026 年 HTML 日用一个小时搭建了这个页面旨在书写和赞颂 HTML。不过后来做了一些修改以更清晰地指出浏览器在实现某些功能时存在严重不足以及完全无法满足可访问性需求的问题。所以尽管可以尝试这些功能但请尽可能确保其可访问性1. popover浏览器支持情况可查看相关链接。轻触关闭按 Esc 键也能关闭而且无需手动管理 z-index 来将其置于顶层。所有这些功能都可以通过 HTML 中的 popover 和 popovertarget以及 popovertargetaction属性来实现。切换弹出框无需 JavaScript借助现代浏览器的强大功能就能实现这要感谢那些为网络制定规范并开发浏览器的优秀人士关闭给出了相应的 HTML 代码示例。2. 浏览器支持情况可查看相关链接。这里的功能与 popover 类似不过这次使用的是专门用于模态对话框的元素。关于另一个最近才出现的功能即允许我们打开和关闭对话框元素的 command / commandFor未来它还会在许多其他非 JavaScript 功能中发挥作用请参阅下面的介绍。切换 弹出框同样popover 属性在这里发挥了重要作用关闭给出了相应的 HTML 代码示例。打开对话框这个对话框通过 JavaScript 调用 .showModal() 方法打开调用 .close() 方法关闭。关闭 显示由 JavaScript 驱动的对话框代码给出了相应的 HTML 和 JavaScript 代码示例。3. 分组的 浏览器支持情况可查看相关链接。使用相同的 name 属性可以将一组 元素变成一个排他式手风琴菜单。打开其中一个其他的会自动关闭非常神奇第一个打开第二个看看这个会自动关闭。第二个现在第一个隐藏了。并给出了相应的 HTML 代码示例。4. command 与 commandfor浏览器支持情况可查看相关链接。通过独立的 HTML 按钮来控制一个弹出框无需编写脚本。注意到目前为止浏览器中稳定支持的命令只有 show-modal、close、request-close、toggle-popover、show-popover 和 hide-popover。期待未来能有更多支持的调用器用于增加或减少数值、与媒体元素交互、复制文本等功能。打开 关闭show-popover 用于打开hide-popover 用于关闭关闭给出了相应的 HTML 代码示例。5. loadinglazy浏览器支持情况可查看相关链接。这张图片会在接近视口时才开始加载无需使用 IntersectionObserver。并展示了图片及相应的 HTML 代码示例。6. hidden until-found浏览器支持情况可查看相关链接。点击下面的片段链接会显示隐藏的部分。浏览器会自动移除 hiddenuntil-found 属性。注意这个功能还比较新目前只能很好地配合浏览器的默认搜索功能而在屏幕阅读器搜索功能中的表现不太理想。不过还是可以先记着说不定以后会有用跳转到隐藏内容哈哈你找到我啦并给出了相应的 HTML 代码示例。7. 颜色、日期和时间、范围输入框浏览器支持情况可查看相关链接。颜色选择器、范围选择器和日期选择器都已内置在浏览器中。警告其中一些元素的实现还不够完善。希望未来几年表单元素能得到更多改进但就目前而言浏览器中的实现仍有不足。使用这些元素时要格外谨慎因为不同浏览器对这些元素的默认样式差异很大而且可访问性体验也很差。要小心诸多潜在的问题颜色范围日期给出了相应的 HTML 代码示例。8. 浏览器支持情况可查看相关链接。原生的自动完成建议功能无需使用下拉菜单库。警告不同输入类型对这个功能的支持还不太稳定而且浏览器在实现过程中也存在一些问题。更多信息请参阅相关文章。甚至可以暂时不使用这个功能关注一下未来几年它是否会有所改进。最喜欢的 HTML 元素给出了相应的 HTML 代码示例。文章相关信息本文由 Chris Burnell 为 2026 年 HTML 日撰写并构建。该活动是由 Zachary Kai 于 2026 年 8 月 8 日星期六举办的在线活动的一部分。欢迎对本页面进行纠错或修改并非专家但会尽力如实呈现内容。请勿用本页面的内容向老板或自己证明决策的合理性。别忘了并非所有人浏览网页的方式都和你一样。希望能享受这些 HTML 的新特性
HTML 崛起！逐步接管 JavaScript 功能，实现多种动态功能
HTML 逐步接管 JavaScript 功能领域HTML 正在逐步接管许多原本属于 JavaScript 的功能领域。本页面列举了一系列现在仅用 HTML 就能实现的动态功能。页面搭建与修改更新于 2026 年 8 月 20 日最初在 2026 年 HTML 日用一个小时搭建了这个页面旨在书写和赞颂 HTML。不过后来做了一些修改以更清晰地指出浏览器在实现某些功能时存在严重不足以及完全无法满足可访问性需求的问题。所以尽管可以尝试这些功能但请尽可能确保其可访问性1. popover浏览器支持情况可查看相关链接。轻触关闭按 Esc 键也能关闭而且无需手动管理 z-index 来将其置于顶层。所有这些功能都可以通过 HTML 中的 popover 和 popovertarget以及 popovertargetaction属性来实现。切换弹出框无需 JavaScript借助现代浏览器的强大功能就能实现这要感谢那些为网络制定规范并开发浏览器的优秀人士关闭给出了相应的 HTML 代码示例。2. 浏览器支持情况可查看相关链接。这里的功能与 popover 类似不过这次使用的是专门用于模态对话框的元素。关于另一个最近才出现的功能即允许我们打开和关闭对话框元素的 command / commandFor未来它还会在许多其他非 JavaScript 功能中发挥作用请参阅下面的介绍。切换 弹出框同样popover 属性在这里发挥了重要作用关闭给出了相应的 HTML 代码示例。打开对话框这个对话框通过 JavaScript 调用 .showModal() 方法打开调用 .close() 方法关闭。关闭 显示由 JavaScript 驱动的对话框代码给出了相应的 HTML 和 JavaScript 代码示例。3. 分组的 浏览器支持情况可查看相关链接。使用相同的 name 属性可以将一组 元素变成一个排他式手风琴菜单。打开其中一个其他的会自动关闭非常神奇第一个打开第二个看看这个会自动关闭。第二个现在第一个隐藏了。并给出了相应的 HTML 代码示例。4. command 与 commandfor浏览器支持情况可查看相关链接。通过独立的 HTML 按钮来控制一个弹出框无需编写脚本。注意到目前为止浏览器中稳定支持的命令只有 show-modal、close、request-close、toggle-popover、show-popover 和 hide-popover。期待未来能有更多支持的调用器用于增加或减少数值、与媒体元素交互、复制文本等功能。打开 关闭show-popover 用于打开hide-popover 用于关闭关闭给出了相应的 HTML 代码示例。5. loadinglazy浏览器支持情况可查看相关链接。这张图片会在接近视口时才开始加载无需使用 IntersectionObserver。并展示了图片及相应的 HTML 代码示例。6. hidden until-found浏览器支持情况可查看相关链接。点击下面的片段链接会显示隐藏的部分。浏览器会自动移除 hiddenuntil-found 属性。注意这个功能还比较新目前只能很好地配合浏览器的默认搜索功能而在屏幕阅读器搜索功能中的表现不太理想。不过还是可以先记着说不定以后会有用跳转到隐藏内容哈哈你找到我啦并给出了相应的 HTML 代码示例。7. 颜色、日期和时间、范围输入框浏览器支持情况可查看相关链接。颜色选择器、范围选择器和日期选择器都已内置在浏览器中。警告其中一些元素的实现还不够完善。希望未来几年表单元素能得到更多改进但就目前而言浏览器中的实现仍有不足。使用这些元素时要格外谨慎因为不同浏览器对这些元素的默认样式差异很大而且可访问性体验也很差。要小心诸多潜在的问题颜色范围日期给出了相应的 HTML 代码示例。8. 浏览器支持情况可查看相关链接。原生的自动完成建议功能无需使用下拉菜单库。警告不同输入类型对这个功能的支持还不太稳定而且浏览器在实现过程中也存在一些问题。更多信息请参阅相关文章。甚至可以暂时不使用这个功能关注一下未来几年它是否会有所改进。最喜欢的 HTML 元素给出了相应的 HTML 代码示例。文章相关信息本文由 Chris Burnell 为 2026 年 HTML 日撰写并构建。该活动是由 Zachary Kai 于 2026 年 8 月 8 日星期六举办的在线活动的一部分。欢迎对本页面进行纠错或修改并非专家但会尽力如实呈现内容。请勿用本页面的内容向老板或自己证明决策的合理性。别忘了并非所有人浏览网页的方式都和你一样。希望能享受这些 HTML 的新特性