迁移是“分层替换+验证闭环”，从DOCTYPE和编码开始逐层推进语义化、表单、多媒体，每步须在真实浏览器中验证渲染与可访问性。
直接说结论：迁移不是“重写”，而是“分层替换+验证闭环”——从 DOCTYPE 和编码开始，逐层推进语义化、表单、多媒体，每步都必须在真实浏览器中验证渲染和可访问性。
为什么 <!DOCTYPE html> 必须放在第一行且不能带空格或注释
这是触发标准模式的唯一开关。任何前置内容（BOM、空格、<!-- comment -->）都会让 IE 和旧版 Safari 进入怪异模式，导致盒模型、字体渲染、Flex 布局全部错乱。
- 检查文件开头是否隐藏 BOM：用 VS Code 打开，右下角看编码显示，选 “Save with Encoding → UTF-8” 强制清除 BOM
- 确认没有服务器端输出（如 PHP 的
echo ""或 ASP 的Response.Write("")）在<!DOCTYPE html>前执行 - HTML5 不再校验 DTD 路径，所以
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">这类旧声明必须整行删除，不能只改内容
<meta charset="UTF-8"> 和服务器响应头必须一致
仅写 HTML 标签不够。如果服务器返回的 Content-Type: text/html; charset=gbk，浏览器仍会按 GBK 解码，中文照样乱码，且 <meta> 会被忽略。
- 本地测试时用
curl -I http://localhost/page.html查看响应头中的charset - Apache 用户加
AddDefaultCharset UTF-8到.htaccess；Nginx 用户在server块里加charset utf-8; - PHP 页面顶部加
header('Content-Type: text/html; charset=utf-8');，且必须在任何输出之前调用
用 <header> 替换 <div id="header"> 时的 DOM 影响
语义标签不是“换个名字就行”。<header> 默认是块级元素，但它的隐式 ARIA role 是 banner，而旧 <div> 没有语义角色。这对屏幕阅读器和搜索引擎抓取有实质影响。
立即学习“前端免费学习笔记（深入）”；
- 不要只改标签名：检查 CSS 中是否写了
div#header { ... }，需同步改为header { ... }或保留 class 如<header class="site-header"> -
<nav>必须包裹导航链接，不能只包文字或图标；否则会被读作普通段落，失去导航上下文 -
<main>在整个文档中只能出现一次，且不能嵌套在<article>或<section>内——这是 W3C 明确规定的
<input type="email"> 等新类型在旧浏览器的行为差异
它们在 Chrome/Firefox/Safari 中触发原生校验和键盘优化（如 iOS 邮箱键盘），但在 IE10 及更早版本中降级为 type="text"，且 required 属性无效。
- 不依赖 JS 补充校验：先确保后端已做完整校验，前端增强只是体验加分项
- 避免用
pattern写复杂正则：移动端输入法可能无法正确匹配，建议用简单规则（如pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"） - 对 date/datetime-local 类型，务必提供 fallback：比如加一段提示文字“请使用 YYYY-MM-DD 格式”，因为 IE 和旧 Android 浏览器完全不渲染日期选择器
最容易被忽略的点是：迁移后必须用 Lighthouse 或 axe DevTools 扫描可访问性（a11y）报告——很多语义标签替换看似正确，但缺少 aria-label 或错误嵌套，反而比原来更难被辅助技术识别。
