HTML5迁移需验证DOCTYPE、语义标签渲染、表单控件兼容性、多媒体API降级及JS DOM依赖。必须用,检查header/nav/main等标签display值,引入html5shiv;input新类型影响校验与UI;video/audio需正确MIME与CORS;JS应避免硬编码节点索引,改用matches()或querySelector。
不改 就不算真正进入 HTML5,但光改这行远远不够。浏览器会根据 DOCTYPE 切换渲染模式,旧页面若含 IE 条件注释或 ,可能触发怪异模式或兼容视口缩放异常。
重点检查:、、、、、、 这些新语义标签是否被正确解析为块级元素(尤其在 IE9+ 和老版 Safari 中),否则内容会塌陷或样式错乱。
display 值不是 inline
html5shiv.js 并确保它在 内且早于 CSS 加载 外再嵌套另一个 —— 多数屏幕阅读器只识别第一个,后续会被忽略HTML5 新增的 、、、 等,表面看只是加了类型,实际改变了三件事:默认校验逻辑、键盘弹出类型(移动端)、原生 UI 组件(如日期选择器)。这些在 Chrome/Firefox/Safari 表现差异极大,且旧 JS 校验可能与原生冲突。
form.checkValidity() 返回值是否与预期一致,尤其注意 required + type="email" 组合下空字符串和非法格式的触发时机type="number" 会禁用长按粘贴,且 input.valueAsNumber 对非数字字符串返回 NaN,不能直接用于计算type="date" 的 value 格式做后端解析 —— 它始终是 YYYY-MM-DD,但用户看不到时区,服务端收到的可能是 UTC 零点时间把 换成

不是简单替换标签。关键问题在于资源路径解析、MIME 类型响应头、跨域策略,以及 fallback 内容是否真能被读取。
的 src 必须是服务端返回 Content-Type: video/mp4(或对应格式),否则 Safari 直接静默失败,控制台无报错canvas.toDataURL("image/png") 导出图片时,若 canvas 含跨域图像(哪怕同域但带 query 参数),会触发 SecurityError —— 必须提前设置 img.crossOrigin = "anonymous" 且服务端配好 CORS 响应头 在 iOS Safari 中默认禁止自动播放,play() 必须由用户手势(如 click)触发,否则 Promise reject很多老 JS 代码靠遍历 childNodes 或硬写 getElementsByTagName("div")[2] 定位元素,一旦换成语义化标签,节点树结构就变了。更隐蔽的是,document.querySelector("div > p") 可能因新增 包裹而失效。
parentNode、nextSibling、firstChild 的地方 —— HTML5 语义标签插入后,空白文本节点仍存在,但视觉上不可见,容易误判层级Element.matches() 替代硬编码索引定位,例如把 div.children[1] 改成 div.querySelector(".submit-btn")
$("header nav ul li a") 是否仍能匹配 —— 有些老插件会过滤掉未知标签名最常被跳过的其实是 form 表单 submit 事件监听方式:HTML5 下 点击会触发 submit,但若 JS 里只监听了 click,就漏掉了回车提交;反之,若监听了 submit 却没 preventDefault(),就可能重复提交。这种细节不跑真实用户操作流,根本测不出来。