HTML转HTML5需测试哪些功能点_覆盖核心功能保稳定【测试】

HTML5迁移需验证DOCTYPE、语义标签渲染、表单控件兼容性、多媒体API降级及JS DOM依赖。必须用,检查header/nav/main等标签display值,引入html5shiv;input新类型影响校验与UI;video/audio需正确MIME与CORS;JS应避免硬编码节点索

引,改用matches()或querySelector。

HTML转HTML5后必须验证的DOCTYPE和语义化标签渲染

不改 就不算真正进入 HTML5,但光改这行远远不够。浏览器会根据 DOCTYPE 切换渲染模式,旧页面若含 IE 条件注释或 ,可能触发怪异模式或兼容视口缩放异常。

重点检查:

这些新语义标签是否被正确解析为块级元素(尤其在 IE9+ 和老版 Safari 中),否则内容会塌陷或样式错乱。

  • 用开发者工具检查元素 computed styles,确认 display 值不是 inline
  • 对 IE9–11,需引入 html5shiv.js 并确保它在 内且早于 CSS 加载
  • 避免在
    外再嵌套另一个
    —— 多数屏幕阅读器只识别第一个,后续会被忽略

表单控件升级后的行为与校验兼容性

HTML5 新增的 等,表面看只是加了类型,实际改变了三件事:默认校验逻辑、键盘弹出类型(移动端)、原生 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 的降级与资源加载路径

换成 或把 Flash 视频替成 不是简单替换标签。关键问题在于资源路径解析、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

JavaScript API 调用是否隐式依赖旧 DOM 结构

很多老 JS 代码靠遍历 childNodes 或硬写 getElementsByTagName("div")[2] 定位元素,一旦换成语义化标签,节点树结构就变了。更隐蔽的是,document.querySelector("div > p") 可能因新增

包裹而失效。

  • 检查所有用到 parentNodenextSiblingfirstChild 的地方 —— HTML5 语义标签插入后,空白文本节点仍存在,但视觉上不可见,容易误判层级
  • Element.matches() 替代硬编码索引定位,例如把 div.children[1] 改成 div.querySelector(".submit-btn")
  • 如果用了 jQuery,确认版本 ≥ 1.9(支持 HTML5 标签),并检查 $("header nav ul li a") 是否仍能匹配 —— 有些老插件会过滤掉未知标签名

最常被跳过的其实是 form 表单 submit 事件监听方式:HTML5 下 点击会触发 submit,但若 JS 里只监听了 click,就漏掉了回车提交;反之,若监听了 submit 却没 preventDefault(),就可能重复提交。这种细节不跑真实用户操作流,根本测不出来。