尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
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 的新特性
RELATED

相关推荐

手机变口袋个人书库:Talebook 移动端阅读完整指南

手机变口袋个人书库:Talebook 移动端阅读完整指南

手机变口袋个人书库:Talebook 移动端阅读完整指南 【免费下载链接】talebook 一个简单好用的个人书库 项目地址: https://gitcode.com/gh_mirrors/ta/talebook 睡前躺床上的几分钟、地铁里的一段路,往往是很多人最稳定的阅读时间。Talebook 是一套…

📅 2026/10/26 4:14:43
把 AI 装进一根小棒子:VibeStick 总体架构与源码全链路解析

把 AI 装进一根小棒子:VibeStick 总体架构与源码全链路解析

摘要:VibeStick 把 M5Stack StickS3 变成桌面 AI Agent 的状态屏和语音遥控器。本文从源码出发,拆解固件、Python Bridge、Agent 观察器、ASR 与桌面粘贴的完整链路。 建议标签:ESP32-S3 Python LVGL AI Agent 物联网很多“AI 硬件”的架构图…

📅 2026/10/19 23:30:05
Vin象棋:5分钟跑通的象棋AI连线自动落子工具

Vin象棋:5分钟跑通的象棋AI连线自动落子工具

Vin象棋:5分钟跑通的象棋AI连线自动落子工具 【免费下载链接】VinXiangQi Xiangqi syncing tool based on Yolov5 / 基于Yolov5的中国象棋连线工具 项目地址: https://gitcode.com/gh_mirrors/vi/VinXiangQi 看不到好棋、想自动下棋却腾不出手,这…

📅 2026/10/24 14:58:08
MORE NEWS

更多资讯

📰

高安在哪里考电工证怎么选靠谱机构

高安在哪里考电工证怎么选靠谱机构 证书过期了不知道怎么复审延期?你是不是也在为【高安在哪里考电工证】发愁?特别是像南阳卧龙区的市政公用工程从业者,手里拿着低压电工证或高压电工证,一旦过了有效期,就等于“持证上岗”变成了“无证上岗”,不仅影响…

📰

国网认高级电工证吗?良心建议帮你避坑省下培训费

国网认高级电工证吗?良心建议帮你避坑省下培训费 怕考不过白交培训费?你不是一个人。现在特种作业证报名门槛低、培训机构多,一不小心就踩坑。别急,今天从驻马店一家中小施工企业的角度,给你讲讲 国网认高级电工证吗…

📰

汝州市电工证培训多少钱?别被中介坑了,看看真实培训流程

汝州市电工证培训多少钱?别被中介坑了,看看真实培训流程 你是不是正愁不知道去哪报名汝州市电工证培训,怕被中介坑了?别急,这篇文章给你讲透彻,从报名到考试,从费用到证书价值,一网打尽。 电工证到底值不值得考? 很多人问,…

📰

汝州市电工证培训真实经历:外省证能转过来吗?我来给你讲清楚

汝州市电工证培训真实经历:外省证能转过来吗?我来给你讲清楚 之前考的证在外省能不能转过来?这是我上周在汝州市做电工证培训咨询时,一个学员直接问我的。他的经历让我感触很深,也让我意识到很多人在跨地区办理电工证时存在信息差和操作盲点。…

📰

电工证过期了不知道怎么复审?彭本勇电工证多久拿证全攻略

电工证过期了不知道怎么复审?彭本勇电工证多久拿证全攻略 证书过期了不知道怎么复审延期?别急,彭本勇电工证的复审流程其实并不复杂,只要掌握关键步骤,就能快速完成延期。尤其是对洛阳市政公用工程从业者来说,电工证的有效期和年审要求直接关系到你的执…

📰

湖州长兴考电工证内部消息:别再被中介坑了,报名全攻略来了

湖州长兴考电工证内部消息:别再被中介坑了,报名全攻略来了 你是不是也这样, 不知道去哪报名怕被中介坑 ?最近湖州长兴的不少电工想考证,结果要么被坑钱,要么信息不对称,最后白忙一场。别急, 内部消息…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬