html5是浏览器厂商实践收敛的事实标准,非传统升级;video/audio需多格式源适配、本地开发须用服务器、ios需muted+playsinline+手势触发;localstorage/sessionstorage为字符串键值存储,有容量和作用域限制;fetch()对http错误码不reject,需手动检查response.ok。

HTML5 不是“新版本的 HTML”那种升级关系,而是浏览器厂商和开发者在实践中逐步收敛出的一套事实标准——它没有强制安装包,也不需要你“下载更新”,只要用现代浏览器打开,就默认支持。
HTML5 的 <video></video> 和 <audio></audio> 标签为什么经常不播放
常见错误现象:页面加载后黑屏、控制栏灰掉、控制台报 DOMException: The element has no supported sources。根本原因不是标签写错了,而是浏览器对编码格式的支持差异太大。
-
<video></video>至少得提供.mp4(H.264 + AAC)和.webm(VP8/VP9 + Vorbis/Opus)两个源,靠<source></source>顺序和type属性让浏览器自己选;只放一个.mp4在 Firefox 或 Safari 上可能直接静音或拒播 - 本地开发时用
file://协议打开,Chrome 会禁止<video></video>自动播放(哪怕加了autoplay muted),必须起个本地服务器,比如npx serve或python3 -m http.server - 移动端 iOS Safari 对
autoplay极其严格:必须同时满足muted、playsinline、用户手势触发(比如点击按钮后再调用play()),缺一不可
localStorage 和 sessionStorage 的实际边界在哪
它们不是“前端数据库”,而是键值对字符串存储,最大容量通常为 5–10MB,但超出时不会报错,而是静默失败或抛 QuotaExceededError。
-
localStorage持久存在,关浏览器、重启电脑都不丢,但换浏览器、换设备、清缓存就没了;它按协议+域名+端口隔离,http://a.com和https://a.com是两份数据 -
sessionStorage只在当前 tab 有效,关闭 tab 就清空,新开 tab 也是空的;它不共享,即使同域名下的两个 tab 也互不可见 - 存对象必须手动
JSON.stringify(),取出来要JSON.parse();直接存undefined或函数会被转成"undefined"字符串,再也还原不了
为什么 fetch() 明明收到响应却进不到 .then()
这不是网络问题,而是 fetch() 的设计逻辑和传统认知有偏差:它只在网络断开或请求被阻止时才 reject,HTTP 状态码 404、500、甚至 0 都算“成功”,会进 .then()。
立即学习“前端免费学习笔记(深入)”;
- 必须手动检查
response.ok(即status >= 200 && status ),否则 404 返回的 HTML 页面内容会照常解析,导致后续 <code>response.json()报错 -
fetch()默认不带 cookie,跨域请求要显式加credentials: 'include',但服务端也得配Access-Control-Allow-Credentials: true,且Access-Control-Allow-Origin不能是通配符* - 超时不是原生支持的,得靠
AbortController配合signal参数实现,不写的话请求卡住也不会自动中断
真正麻烦的从来不是“HTML5 有什么新标签”,而是这些接口在不同浏览器里行为不一致、在不同上下文里权限受限、在不同部署方式下策略突变——写的时候多看一眼控制台 Network 面板和 Console 错误,比背规范管用得多。











