HTML 也能做这些：盘点纯 HTML 实现的动态功能
HTML Can Do That
HTML Can Do That HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML. Update 2026-08-20: I originally built this page in one hour during HTML Day 2026 to write and celebrate HTML, but I’ve since made some edits to better express and highlight where the browser implementation of some of this stuff is severely lacking and/or completely fails to meet accessibility needs. So, by all means, try it out, but make it as accessible as you can! ## popover Browser Support: popover → Light dismiss, Esc to close, no managing z-index to wrangle it onto a top later. All managed with popover and popovertarget (and popovertargetaction) attributes in HTML. (MDN) Toggle popover No JavaScript, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers! Close ``` Toggle popover
HTML 能做到这些 HTML 一直在吞噬原本属于 JavaScript 的领域。这个页面列出了一些我们现在仅用 HTML 就能实现的动态功能。更新于 2026-08-20：我最初是在 2026 年 HTML 日花了一小时构建这个页面来撰写和庆祝 HTML，但后来我做了一些编辑，以更好地表达和强调其中一些功能在浏览器实现上的严重不足和/或完全无法满足无障碍需求。所以，尽管去尝试，但请尽可能让它无障碍！## popover 浏览器支持：popover → 轻触关闭，按 Esc 关闭，无需管理 z-index 将其置于顶层。全部通过 HTML 中的 popover 和 popovertarget（以及 popovertargetaction）属性管理。（MDN）切换 popover 无需 JavaScript，只需现代浏览器的魔法，感谢那些为网络制定规范并构建我们浏览器的了不起的人们！关闭 ``` 切换 popover
No JavaScript, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers!
无需 JavaScript，只需现代浏览器的魔法，感谢那些为网络制定规范并构建我们浏览器的了不起的人们！
Close
关闭
``` ## Browser Support: dialog → Similar thing going on as popover here, except this time with a dedicated element for modal dialog boxes. (MDN) See command / commandFor below for another, more recently-landing feature that allows us to open and close dialog elements (and will be useful for lots of other non-JS functionality, one day!). Toggle popover Once again the popover attribute is doing some heavy-lifting here! Close ``` Toggle <dialog> popover``` ## Browser Support: dialog → Similar thing going on as popover here, except this time with a dedicated element for modal dialog boxes. (MDN) See command / commandFor below for another, more recently-landing feature that allows us to open and close dialog elements (and will be useful for lots of other non-JS functionality, one day!). Toggle popover Once again the popover attribute is doing some heavy-lifting here! Close ``` Toggle <dialog> popoverClosed with just HTML via <form method="dialog">, opened with the popover attribute.
通过 <form method="dialog"> 仅用 HTML 关闭，用 popover 属性打开。
Close ``` Even though it’s sort of against the spirit of this page, I want to include this short snippet of how to interact with dialog elements in JavaScript: Open dialog This one is opened with .showModal() and closed with .close(), both called from JavaScript. Close Show JS-powered dialog code ``` Open dialog
关闭 ``` 尽管这有点违背本页面的精神，但我想包含这段简短的代码片段，展示如何用 JavaScript 与 dialog 元素交互：打开对话框 这个是通过 .showModal() 打开，通过 .close() 关闭，两者都从 JavaScript 调用。关闭 显示 JS 驱动的对话框代码 ``` 打开对话框
This one is opened with .showModal() and closed with .close(), both called from JavaScript.
这个是通过 .showModal() 打开，通过 .close() 关闭，两者都从 JavaScript 调用。
Close ``` ``` document.getElementById("example-dialog-js-open").addEventListener("click", () => { document.getElementById("example-dialog-js").showModal() }) document.getElementById("example-dialog-js-close").addEventListener("click", () => { document.getElementById("example-dialog-js").close() }) ``` ## Grouped Browser Support: details name → A shared name attribute turns a group of into an exclusive accordion. Open one and the others close automatically. Magic! (MDN) First Open the second one and watch this close on its own. Second First one’s hidden now. ``` First
关闭 ``` ``` document.getElementById("example-dialog-js-open").addEventListener("click", () => { document.getElementById("example-dialog-js").showModal() }) document.getElementById("example-dialog-js-close").addEventListener("click", () => { document.getElementById("example-dialog-js").close() }) ``` ## 分组 浏览器支持：details name → 共享的 name 属性将一组 <details> 变成互斥的手风琴。打开一个，其他的自动关闭。神奇！（MDN）第一个 打开第二个，看这个自动关闭。第二个 第一个现在隐藏了。``` 第一个
Open the second one and watch this close on its own.
打开第二个，看这个自动关闭。
Second
第二个
First one’s hidden now.
第一个现在隐藏了。
``` ## command & commandfor Browser Support: invoker commands → Separate HTML buttons controlling one popover. No scripting. (MDN) Note: So far only show-modal, close, request-close, toggle-popover, show-popover, and hide-popover have landed stable in browsers. We can look forward to invokers supported in the future to increment/decrement values, interact with media elements, copy text, etc. Open Close show-popover opens this and hide-popover closes it! Close ``` Open Close``` ## command & commandfor Browser Support: invoker commands → Separate HTML buttons controlling one popover. No scripting. (MDN) Note: So far only show-modal, close, request-close, toggle-popover, show-popover, and hide-popover have landed stable in browsers. We can look forward to invokers supported in the future to increment/decrement values, interact with media elements, copy text, etc. Open Close show-popover opens this and hide-popover closes it! Close ``` Open Closeshow-popover opens this and hide-popover closes it!
show-popover 打开这个，hide-popover 关闭它！
Close ``` ## loading="lazy" Browser Support: loading-lazy-attr → This image defers loading until it’s near the viewport. Not an IntersectionObserver in sight. (MDN) ``` ``` ## hidden until-found Browser Support: hidden until-found → Navigating to the fragment link below reveals the hidden section. The browser automatically removes hidden="until-found". (MDN) Note: This one’s still pretty new and only really plays nicely with browser default search, and not so well with screen reader search implementations, for example. Still, one to keep in the back pocket for another day down the road! Jump to hidden content Yahaha! You found me! ``` Jump to hidden content
关闭 ``` ## loading="lazy" 浏览器支持：loading-lazy-attr → 此图片延迟加载，直到接近视口时才加载。这里没有使用 IntersectionObserver。（MDN） ``` ``` ## hidden until-found 浏览器支持：hidden until-found → 导航到下面的片段链接会显示隐藏部分。浏览器会自动移除 hidden="until-found"。（MDN） 注意：这个特性还比较新，目前主要与浏览器默认搜索配合良好，但与屏幕阅读器搜索实现等配合不佳。不过，这仍是一个值得留待未来使用的技巧！ 跳转到隐藏内容 呀哈！你找到我了！ ``` 跳转到隐藏内容
Yahaha! You found me!
呀哈！你找到我了！
``` ## Colour, Date & Time, Range Inputs Browser Support: input-color →, input-range →, input-datetime → Colour, range, and date pickers, built right into the browser. (MDN: Color Input, MDN: Range Input, MDN: Color Input) Warning! Some of these elements feel a little unfinished. I’m hoping that we can expect form elements to receive some more love over the coming years, but at this point in time, the implementations shipping in browsers are still lacking. I would tread very carefully with using some of these. You can expect things like the default browser styles of these elements to vary pretty wildly between browsers and for the accessibility experienecs to be very poor. Be wary of the many pitfalls! Colour Range Date ``` Colour Range Date ``` ## Browser Support: datalist → Native autocomplete suggestions, no dropdown library required. (MDN) Warning! Support for this across input types is still pretty spotty, and there are also a number of issues in its implementation in browsers. See Adrian Roselli’s Under-Engineered Comboboxen for more info. You might even want to skip using this for now, and keep an eye on it to see if it improves over the new few years. Favourite HTML element ``` Favourite HTML element ``` Written and built by Chris Burnell for HTML Day 2026 during the Online Event run by Zachary Kai on Saturday, 8th August 2026. I welcome corrections or amends to this page! I am not an expert, but I’ve attempted to represent things honestly. Do not use this page to justify decisions to your boss. Or yourself. Don’t forget that not everyone browses the web like you do. And have fun with these new-ish features of HTML!``` ## Colour, Date & Time, Range Inputs Browser Support: input-color →, input-range →, input-datetime → Colour, range, and date pickers, built right into the browser. (MDN: Color Input, MDN: Range Input, MDN: Color Input) Warning! Some of these elements feel a little unfinished. I’m hoping that we can expect form elements to receive some more love over the coming years, but at this point in time, the implementations shipping in browsers are still lacking. I would tread very carefully with using some of these. You can expect things like the default browser styles of these elements to vary pretty wildly between browsers and for the accessibility experienecs to be very poor. Be wary of the many pitfalls! Colour Range Date ``` Colour Range Date ``` ## Browser Support: datalist → Native autocomplete suggestions, no dropdown library required. (MDN) Warning! Support for this across input types is still pretty spotty, and there are also a number of issues in its implementation in browsers. See Adrian Roselli’s Under-Engineered Comboboxen for more info. You might even want to skip using this for now, and keep an eye on it to see if it improves over the new few years. Favourite HTML element ``` Favourite HTML element ``` Written and built by Chris Burnell for HTML Day 2026 during the Online Event run by Zachary Kai on Saturday, 8th August 2026. I welcome corrections or amends to this page! I am not an expert, but I’ve attempted to represent things honestly. Do not use this page to justify decisions to your boss. Or yourself. Don’t forget that not everyone browses the web like you do. And have fun with these new-ish features of HTML!更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力