HTML5 的 DOCTYPE 必须写为 ，字符编码用 ；二者不可混用，否则浏览器可能忽略或报错。
DOCTYPE 和字符编码怎么写才不翻车
HTML4 必须写一长串 DTD 声明，比如 ，漏一个引号或 URL 错位，某些旧浏览器（如 IE8）就可能触发怪异模式（Quirks Mode），导致盒模型、浮动、定位全乱套。
HTML5 直接简化为 —— 全小写、无空格、无引号、无 URL。它不依赖 DTD，只是一条“切换标准模式”的开关指令。同样地，字符编码也从 HTML4 的 缩减为 。注意：两者不能混用，否则部分浏览器会忽略后者，或报解析警告。
语义标签不是“换汤不换药”，而是重构 DOM 结构逻辑
HTML4 几乎全靠 HTML5 引入了原生语义容器，比如： 立即学习“前端免费学习笔记（深入）”； 关键点：语义标签 ≠ 视觉样式替代品。它们默认无样式，仍需 CSS 控制外观；但一旦用了，就得按语义逻辑组织，否则反而降低可访问性。 HTML4 表单只能靠 HTML5 把这些能力“下沉”到原生标签： 兼容性提醒：IE9 及以下完全不支持 HTML4 时代，持久化数据只能靠 Cookie（4KB 限制、每次请求携带、无加密），复杂交互只能阻塞主线程跑 JS —— 页面卡顿、滚动掉帧是常态。 HTML5 提供真正可用的底层能力： 容易被忽略的坑： 真正决定是否升级 HTML5 的，不是“能不能用新标签”，而是你是否需要语义化结构支撑 SEO 与无障碍、是否依赖本地存储或后台任务、是否放弃对 IE8 及以下的支持。很多项目把
不再是“有样式的 div”，而是明确表示文档/区块的头部与尾部； 专用于导航链接集合，被辅助技术识别为“跳转入口区”； 表示独立可分发内容（如一篇博客）， 表示逻辑分组（如“评论区”“相关推荐”），二者嵌套关系有语义约束，不能随便互换； 让机器能准确提取时间值，而不用靠正则匹配文本。表单和多媒体不再靠 JS 或 Flash 打补丁
+ 大量 JavaScript 验证邮箱、日期、数字范围，既冗余又易被绕过；视频音频必须塞进 或 Flash 插件，移动端基本失效。
在支持浏览器中自动校验格式，required、pattern、min/max 属性直接触发 UI 提示； 一行就能播放，无需插件，且支持 添加字幕； 配合 JS 绘图，替代 Flash 图表，但注意：Canvas 是位图，缩放会模糊，SVG 才适合图标类矢量图形。 和新 input 类型，必须用 polyfill（如 Modernizr + fallback）或降级方案（如 poster 图 + 链接下载）。localStorage 和 Web Workers 这些 API 不是“锦上添花”，而是架构级升级
localStorage.setItem('theme', 'dark') 存储 5–10MB 数据，不随请求发送，且跨会话保留；new Worker('task.js') 把耗时计算（如图片压缩、JSON 解析）扔进后台线程，UI 完全不卡；navigator.geolocation.getCurrentPosition() 获取经纬度，配合地图 API 实现 LBS 功能，无需第三方 SDK。localStorage 是同步阻塞操作，高频读写（如每秒多次）会影响性能；Web Worker 无法直接操作 DOM，所有通信必须走 postMessage，数据要序列化 —— 大对象传参反而更慢。 一加就叫“已用 HTML5”，其实只摸到了门槛；真正的升级，是从 DOM 组织方式、表单验证逻辑、资源加载策略开始重写。
