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 上可能直接退化成文本框。真正在意体验的人，从来不是查完文档就写死功能，而是先判断运行环境，再决定是否降级或增强。
