HTML5语义化标签（如、、等）在现代浏览器中已无兼容问题，IE9+基本支持但需注意的兼容处理；canvas适合动态绘图，svg适合矢量图形与响应式场景；input新类型提升移动端体验但需服务端校验；localStorage/sessionStorage为同步键值存储，存对象需JSON序列化，敏感数据勿存，大容量或结构化需求应选IndexedDB。
哪些HTML5标签现在真能用、该优先学
绝大多数新语义化标签（<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>）在所有现代浏览器中已无兼容性问题，IE9+ 基本支持，但 IE9 不支持 <main></main> —— 如果还要兼容 IE9，得手动加 role="main" 或用 JS 补 DOM。
常见错误现象：<section></section> 被当“分栏容器”滥用，结果语义错乱；<div> 套一堆 <code><div> 却硬加 <code>class="header"，放弃原生语义。
-
<main></main>页面有且仅有一个，不能嵌套在<article></article>或<section></section>里 -
<article></article>强调可独立分发/复用的内容（如博客正文、新闻条目），不是所有“区块”都该用它 -
<time></time>必须带datetime属性才有机器可读性，光写<time>2024年3月</time>没用
canvas 和 svg 到底选哪个画图
看动态性与缩放需求：canvas 是位图绘制，适合游戏、实时图表、图像处理；svg 是矢量描述，适合图标、数据可视化（D3）、响应式插图，缩放不糊、可被 CSS/JS 精确控制节点。
容易踩的坑：canvas 在高 DPR 设备（如 MacBook Retina、iPhone）上默认模糊——必须手动设置 canvas.width/canvas.height 为物理像素，并用 CSS 控制显示尺寸；svg 内联进 HTML 才能被 CSS 选中，用 <img src="x.svg" alt="HTML5新特性有哪些_重要标签功能汇总【介绍】" > 就彻底失去样式和交互能力。
立即学习“前端免费学习笔记（深入）”；
- 动态更新频繁 → 优先
canvas（重绘成本低） - 要 SEO、无障碍、缩放清晰、CSS 动画 → 选
svg -
canvas导出图片需调用toDataURL()，注意跨域图片会触发安全异常
input 新类型：别只记得 type="email"
type="tel"、type="url"、type="search"、type="date" 这些不只是加个校验，关键是触发对应设备原生 UI：iOS 上 type="date" 弹日历，type="tel" 弹数字键盘，type="search" 自带清空按钮和圆角样式。
但别迷信自动校验：type="email" 只检查基本格式（如含 @），不验证邮箱真实存在；type="number" 允许输入 e 或 +，提交时才报错；type="date" 在 Safari 和 Firefox 中不支持 min/max 的完整约束（比如限制只能选未来日期，Safari 仍可手动输入绕过）。
- 移动端体验提升明显，但服务端校验不可省
-
type="date"的值永远是YYYY-MM-DD字符串，没有时区信息 - 想让 Chrome 的
type="number"禁用上下箭头？加 CSS：input[type="number"]::-webkit-inner-spin-button { display: none; }
localStorage 和 sessionStorage 的边界在哪
它们不是“前端数据库”，而是键值对字符串存储，容量约 5–10MB（因浏览器而异），且阻塞主线程（同步 API）。存对象必须先 JSON.stringify()，取出来再 JSON.parse()，否则存进去是 [object Object]。
典型误用：存大量日志、缓存接口原始响应体、代替 Redux/Pinia 做状态管理——一旦数据结构变更，旧缓存会导致页面崩溃；或者在多个 tab 间靠 storage 事件同步状态，却忘了监听时机（事件在其他 tab 触发后才派发，当前 tab 已渲染完毕）。
-
localStorage同源共享，关闭浏览器不丢失；sessionStorage仅限当前 tab，关 tab 即清空 - 敏感信息（token、密码片段）别存这里，XSS 攻击可直接读取
- 需要结构化查询或事务？换
IndexedDB，哪怕只是存几十条带索引的数据
localStorage 满了抛 QuotaExceededError，canvas 在 iOS Safari 隐私模式下直接禁用，这些边界情况比语法本身更值得盯紧。
