html5 新标签在 ie8 及更早版本中不被识别，需用 html5shiv 等方案动态创建元素；localstorage 只能存字符串，对象须 json.stringify()序列化；video 控件失效多因 mime 类型错误或 file:// 协议限制；canvas 清空需重置 width/height 属性而非仅 clearrect()。
HTML5 新标签在老浏览器里直接不显示？这是真问题，不是幻觉
IE8 及更早版本根本不认识 <header></header>、<nav></nav> 这些标签，DOM 里压根不解析，CSS 里设 display: block 也白搭——因为元素都没被创建出来。
- 必须用
html5shiv（或现代等价方案如document.createElement手动注册）在页面加载早期“骗”IE 创建这些元素 - 只靠 CSS 重置（比如
header, nav {display: block;}）在 IE8- 下完全无效，别试了 - 条件注释 + 外链脚本仍是兼容 IE8 的最稳写法：
<!--[if lt IE 9]><script src="html5shiv.min.js"></script><![endif]-->
localStorage.setItem() 存不了对象？没错，它只认字符串
直接传个对象进去，比如 localStorage.setItem('user', { name: 'Alice'})，存进去的其实是 [object Object]，取出来再 JSON.parse() 就会报错。
- 必须手动序列化：
localStorage.setItem('user', JSON.stringify({ name: 'Alice'})) - 读取时反序列化：
const user = JSON.parse(localStorage.getItem('user')) - 注意
getItem()返回null时JSON.parse(null)会返回null，但不会报错；而JSON.parse(undefined)会炸，建议加空值判断
video 标签加了 controls 却没控件？大概率是 MIME 类型或路径错了
Chrome 和 Firefox 对视频资源的响应头要求严格：如果服务器没返回正确的 Content-Type（如 video/mp4），即使文件本身没问题，<video></video> 也会静默失败，连“不支持”提示都不显示。
- 检查网络面板里视频请求的 Response Headers 是否含
Content-Type: video/mp4（类型需匹配<source></source>的type属性） - 本地双击打开 HTML 文件（
file://协议）时，多数浏览器会拒绝加载视频——必须走 HTTP(S) 服务（哪怕python3 -m http.server） -
preload="metadata"比preload="auto"更稳妥，尤其移动端，避免一进页面就疯狂加载整段视频
canvas 绘图后清空画布，别只用 clearRect() 就完事
ctx.clearRect(0, 0, canvas.width, canvas.height) 看似清干净了，但如果 canvas 元素被 CSS 缩放过（比如设了 width: 100%; height: auto;），实际绘图分辨率和显示尺寸不一致，清空区域可能错位、残留。
立即学习 “ 前端免费学习笔记（深入）”；
- 清空前先重置 canvas 的
width和height属性（不是 CSS）：canvas.width = canvas.width—— 这句会真正重置位图缓冲区 - 或者手动用
ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height)填白，更可控 - 缩放 canvas 时，务必同步调整
ctx.scale()或按设备像素比（window.devicePixelRatio）重设 canvas 内部尺寸，否则线条发虚
该踩的坑基本就这几类：老浏览器的 DOM 认知断层、Web Storage 的类型隐式转换、媒体加载的协议与响应头约束、Canvas 渲染上下文和显示层的分离逻辑。越基础的地方，越容易因“看起来跑通了”而埋下线上故障。
