DOCTYPE 和字符编码怎么写才不翻车
HTML4 必须写一长串 DTD 声明，比如 ，漏一个引号或 URL 错位，某些旧浏览器（如 IE8）就可能触发怪异模式（Quirks Mode），导致盒模型、浮动、定位全乱套。
html5 直接简化为 —— 全小写、无空格、无引号、无 URL。它不依赖 DTD，只是一条“切换标准模式”的开关指令。同样地，字符编码也从 HTML4 的 缩减为 。注意：两者不能混用，否则部分浏览器会忽略后者，或报解析警告。
语义标签不是“换汤不换药”，而是重构 dom 结构逻辑
HTML4 几乎全靠
撑起整个页面，结果是：DOM 层级深、可读性差、屏幕阅读器无法识别区域意图、seo 爬虫抓不到结构权重。 HTML5 引入了原生语义容器，比如：
立即学习“前端免费学习笔记（深入）”；
-
-
-
-
关键点：语义标签 ≠ 视觉样式替代品。它们默认无样式，仍需 css 控制外观；但一旦用了，就得按语义逻辑组织，否则反而降低可访问性。
表单和多媒体不再靠 js 或 Flash 打补丁
HTML4 表单只能靠
HTML5 把这些能力“下沉”到原生标签：
-
required、pattern、min/max 属性直接触发 UI 提示； -
-
兼容性提醒：IE9 及以下完全不支持
localStorage 和 Web Workers 这些 API 不是“锦上添花”，而是架构级升级
HTML4 时代，持久化数据只能靠 cookie（4KB 限制、每次请求携带、无加密），复杂交互只能阻塞主线程跑 JS —— 页面卡顿、滚动掉帧是常态。
HTML5 提供真正可用的底层能力：
-
localStorage.setItem('theme', 'dark') 存储 5–10MB 数据，不随请求发送，且跨会话保留； -
new Worker('task.js') 把耗时计算（如图片压缩、json 解析）扔进后台线程，UI 完全不卡； -
navigator.geolocation.getCurrentPosition() 获取经纬度，配合地图 API 实现 LBS 功能，无需第三方 SDK。
容易被忽略的坑：localStorage 是同步阻塞操作，高频读写（如每秒多次）会影响性能；Web Worker 无法直接操作 DOM，所有通信必须走 postMessage，数据要序列化 —— 大对象传参反而更慢。
真正决定是否升级 HTML5 的，不是“能不能用新标签”，而是你是否需要语义化结构支撑 SEO 与无障碍、是否依赖本地存储或后台任务、是否放弃对 IE8 及以下的支持。很多项目把 一加就叫“已用 HTML5”，其实只摸到了门槛；真正的升级，是从 DOM 组织方式、表单验证逻辑、资源加载策略开始重写。