html5迁移需验证doctype、语义标签渲染、表单控件兼容性、多媒体api降级及js dom依赖。必须用，检查header/nav/main等标签display值，引入html5shiv；input新类型影响校验与ui；video/audio需正确mime与cors；js应避免硬编码节点索引，改用matches()或queryselector。
HTML转HTML5后必须验证的DOCTYPE和语义化标签渲染
不改 就不算真正进入 HTML5，但光改这行远远不够。<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>会根据 DOCTYPE 切换渲染模式，旧页面若含 IE 条件注释或 <code><meta http-equiv="X-UA-Compatible" content="IE=edge">，可能触发怪异模式或兼容视口缩放异常。
重点检查：<header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<aside></aside>、<footer></footer> 这些新语义标签是否被正确解析为块级元素（尤其在 IE9+ 和老版 Safari 中），否则内容会塌陷或样式错乱。
- 用开发者工具检查元素 computed styles，确认
display值不是inline - 对 IE9–11，需引入
html5shiv.js并确保它在内且早于 CSS 加载 - 避免在
<main></main>外再嵌套另一个<main></main>—— 多数屏幕阅读器只识别第一个，后续会被忽略
表单控件升级后的行为与校验兼容性
HTML5 新增的 <input type="email">、<input type="url">、<input type="number">、<input type="date"> 等，表面看只是加了类型，实际改变了三件事：默认校验逻辑、键盘弹出类型（移动端）、原生 UI 组件（如日期选择器）。这些在 Chrome/Firefox/Safari 表现差异极大，且旧 JS 校验可能与原生冲突。
- 测试提交时
form.checkValidity()返回值是否与预期一致，尤其注意required+type="email"组合下空字符串和非法格式的触发时机 - 在 iOS Safari 上，
type="number"会禁用长按粘贴，且input.valueAsNumber对非数字字符串返回NaN，不能直接用于计算 - 不要依赖
type="date"的 value 格式做后端解析 —— 它始终是YYYY-MM-DD，但用户看不到时区，服务端收到的可能是 UTC 零点时间
Canvas、Video、Audio 等新 API 的降级与资源加载路径
把 <img alt="HTML转HTML5需测试哪些功能点_覆盖核心功能保稳定【测试】" > 换成 <canvas></canvas> 或把 Flash 视频替成 <video></video> 不是简单替换标签。关键问题在于资源路径解析、MIME 类型响应头、跨域策略，以及 fallback 内容是否真能被读取。
立即学习“前端免费学习笔记（深入）”；
-
<video></video>的src必须是服务端返回Content-Type: video/mp4（或对应格式），否则 Safari 直接静默失败，控制台无报错 - 使用
canvas.toDataURL("image/png")导出图片时，若 canvas 含跨域图像（哪怕同域但带 query 参数），会触发SecurityError—— 必须提前设置img.crossOrigin = "anonymous"且服务端配好 CORS 响应头 -
<audio></audio>在 iOS Safari 中默认禁止自动播放，play()必须由用户手势（如 click）触发，否则 Promise reject
JavaScript API 调用是否隐式依赖旧 DOM 结构
很多老 JS 代码靠遍历 childNodes 或硬写 getElementsByTagName("div")[2] 定位元素，一旦换成语义化标签，节点树结构就变了。更隐蔽的是，document.querySelector("div > p") 可能因新增 <section></section> 包裹而失效。
- 检查所有用到
parentNode、nextSibling、firstChild的地方 —— HTML5 语义标签插入后，空白文本节点仍存在，但视觉上不可见，容易误判层级 - 用
Element.matches()替代硬编码索引定位，例如把div.children[1]改成div.querySelector(".submit-btn") - 如果用了 jQuery，确认版本 ≥ 1.9（支持 HTML5 标签），并检查
$("header nav ul li a")是否仍能匹配 —— 有些老插件会过滤掉未知标签名
最常被跳过的其实是 form 表单 submit 事件监听方式：HTML5 下 <button type="submit"></button> 点击会触发 submit，但若 JS 里只监听了 click，就漏掉了回车提交；反之，若监听了 submit 却没 preventDefault()，就可能重复提交。这种细节不跑真实用户操作流，根本测不出来。
