HTML5是浏览器对网页底层能力的系统性补全，将音视频、存储等原生化；video/audio标签免插件播放，localStorage/sessionStorage按生命周期区分存储，querySelector灵活但getElementById更快更语义化。

HTML5 不是“升级版 HTML”，而是浏览器厂商和标准组织在多年实践中，对网页底层能力的一次系统性补全——它把过去靠 Flash、JavaScript 模拟或插件实现的功能，变成了原生支持的标签和 API。

为什么 和 能直接播放，不用装插件？

因为 HTML5 把音视频能力写进了标准，浏览器内核原生实现了解码、控件渲染和事件响应。不需要依赖第三方插件，也不需要额外加载 JS 库来模拟播放器 UI。

• 支持 src、controls、autoplay（注意：多数浏览器禁止无交互 autoplay 音频）
• 不同浏览器对编码格式支持不一：Chrome 支持 mp4 (H.264) 和 webm (VP8/VP9)；Safari 基本只认 mp4；Firefox 优先用 webm
• 推荐写法：用 提供多格式回退，而不是只写一个 src

localStorage 和 sessionStorage 到底存哪儿、能存多久？

它们都存在浏览器进程的内存+磁盘中，不是 Cookie，不随 HTTP 请求自动发送，也不受同源策略以外的限制（但严格遵循同源策略）。

• localStorage：永不过期，除非手动调用 localStorage.removeItem() 或用户清空站点数据
• sessionStorage：仅当前 tab 有效，关闭 tab 即销毁，新开 tab 是全新实例
• 两者都只能存字符串；存对象要先 JSON.stringify()，取出来再 JSON.parse()
• 大小限制通常为 5–10 MB，超出会抛 QuotaExceededError

为什么 document.querySelector() 比 getElementById() 更常用，但又不能完全替代？

前者是 CSS 选择器接口，灵活；后者是 ID 查找专用接口，快且语义明确。性能和语义不可兼得时，得看场景。

• getElementById("header") 在所有浏览器中都是 O(1) 查找（基于 ID 索引），而 querySelector("#header") 需解析选择器、遍历 DOM 树
• 如果只是找一个有明确 ID 的元素，用 getElementById 更稳妥；ID 重复时，querySelector 只返回第一个，getElementById 行为未定义（实际也只返回第一个）
• querySelector 支持伪类如 :checked、:nth-child(2)，getElementById 完全不支持

HTML5 的“新”不在语法多炫，而在它让很多曾经必须绕路的事，变成一行标签或一次 API 调用。但这也意味着：每个新特性都有自己的兼容边界、行为差异和隐式约束——比如 在 iOS Safari 上唤起的是原生日期滚轮，但在旧版 Android 上可能直接退化成文本框。真正在意体验的人，从来不是查完文档就写死功能，而是先判断运行环境，再决定是否降级或增强。

# css  # javascript  # java  # html  # android  # js  # json  # html5  # cookie  # 编码  # 浏览器 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何用免费手机建站系统零基础打造专业网站？  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  Laravel如何实现多对多模型关联？（Eloquent教程）  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  php485函数参数是什么意思_php485各参数详细说明【介绍】  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  Laravel如何实现本地化和多语言支持？（i18n教程）  Python3.6正式版新特性预览  Laravel怎么在Blade中安全地输出原始HTML内容  如何在香港免费服务器上快速搭建网站？  手机网站制作与建设方案,手机网站如何建设？  北京的网站制作公司有哪些,哪个视频网站最好？  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  如何在阿里云域名上完成建站全流程？  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  海南网站制作公司有哪些,海口网是哪家的？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  教你用AI润色文章，让你的文字表达更专业  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  实现点击下箭头变上箭头来回切换的两种方法【推荐】  详解CentOS6.5 安装 MySQL5.1.71的方法  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  Android GridView 滑动条设置一直显示状态(推荐)  Java遍历集合的三种方式  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  EditPlus中的正则表达式 实战(2)  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  图册素材网站设计制作软件,图册的导出方式有几种？  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  如何快速搭建FTP站点实现文件共享？  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  PHP 500报错的快速解决方法  香港服务器建站指南：免备案优势与SEO优化技巧全解析  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  JavaScript如何实现错误处理_try...catch如何捕获异常？  Laravel如何操作JSON类型的数据库字段？（Eloquent示例）  如何撰写建站申请书？关键要点有哪些？  如何快速完成中国万网建站详细流程？  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  iOS正则表达式验证手机号、邮箱、身份证号等  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法