HTML5 的 DOCTYPE 必须写为 <!DOCTYPE html>，字符编码用 <meta charset="utf-8">；二者不可混用，否则浏览器可能忽略或报错。
DOCTYPE 和字符编码怎么写才不翻车
HTML4 必须写一长串 DTD 声明，比如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，漏一个引号或 URL 错位，某些旧浏览器（如 IE8）就可能触发怪异模式（Quirks Mode），导致盒模型、浮动、定位全乱套。
HTML5 直接简化为 <!DOCTYPE html> —— 全小写、无空格、无引号、无 URL。它不依赖 DTD，只是一条“切换标准模式”的开关指令。同样地，字符编码也从 HTML4 的 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 缩减为 <meta charset="utf-8">。注意：两者不能混用，否则部分浏览器会忽略后者，或报解析警告。
语义标签不是“换汤不换药”，而是重构 DOM 结构逻辑
HTML4 几乎全靠 <div id="header">、<div class="nav"> 撑起整个页面，结果是：DOM 层级深、可读性差、屏幕阅读器无法识别区域意图、SEO 爬虫抓不到结构权重。
HTML5 引入了原生语义容器，比如：
立即学习“前端免费学习笔记（深入）”；
-
<header>和<footer>不再是“有样式的 div”，而是明确表示文档/区块的头部与尾部； -
<nav>专用于导航链接集合，被辅助技术识别为“跳转入口区”； -
<article>表示独立可分发内容（如一篇博客），<section>表示逻辑分组（如“评论区”“相关推荐”），二者嵌套关系有语义约束，不能随便互换； -
<time datetime="2025-12-29">今天</time>让机器能准确提取时间值，而不用靠正则匹配文本。
关键点：语义标签 ≠ 视觉样式替代品。它们默认无样式，仍需 CSS 控制外观；但一旦用了，就得按语义逻辑组织，否则反而降低可访问性。
表单和多媒体不再靠 JS 或 Flash 打补丁
HTML4 表单只能靠 <input type="text"> + 大量 JavaScript 验证邮箱、日期、数字范围，既冗余又易被绕过；视频音频必须塞进 <object> 或 Flash 插件，移动端基本失效。
HTML5 把这些能力“下沉”到原生标签：
-
<input type="email">在支持浏览器中自动校验格式，required、pattern、min/max属性直接触发 UI 提示； -
<video controls><source src="demo.mp4" type="video/mp4"></video>一行就能播放，无需插件，且支持<track>添加字幕； -
<canvas id="chart"></canvas>配合 JS 绘图，替代 Flash 图表，但注意：Canvas 是位图，缩放会模糊，SVG 才适合图标类矢量图形。
兼容性提醒：IE9 及以下完全不支持 <video> 和新 input 类型，必须用 polyfill（如 Modernizr + fallback）或降级方案（如 poster 图 + 链接下载）。
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 及以下的支持。很多项目把 <!DOCTYPE html> 一加就叫“已用 HTML5”，其实只摸到了门槛；真正的升级，是从 DOM 组织方式、表单验证逻辑、资源加载策略开始重写。
