17370845950

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