合格HTML需满足三点：开头为且前无字符（含BOM/空格/注释），所有标签正确闭合，语义标签置于合法上下文；是结构测试唯一可靠起点，因其绕过浏览器容错解析。

HTML代码质量本身不决定渲染一致性，但它是所有跨平台一致性的前提条件——没有合格的HTML，后续样式、JS、测试都无从谈起。

怎么快速判断HTML是否“合格”

合格HTML不是指能跑起来，而是指能被所有浏览器以相同方式解析出结构。关键看三点：

• 开头必须是，且前面不能有任何字符（包括BOM、空格、注释），否则document.compatMode返回"BackCompat"，直接掉进怪异模式
• 所有标签必须闭合：比如

  text

  这种写法在Chrome会补，Safari可能丢节点，Firefox可能拒绝插入——document.querySelectorAll('p').length在三端结果不同
• 语义标签如
  、
  必须出现在合法上下文里，不能直接塞进
  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  或里，否则WebKit可能忽略、Trident可能报错

为什么是结构测试的唯一可靠起点

因为不触发浏览器实时解析，只存原始字符串。用它做快照比对，才能绕过各引擎对非法HTML的容错差异：

• 别用el.innerHTML = htmlStr注入待测结构，改用template.innerHTML = htmlStr → document.importNode(template.content, true)
• 表格结构必须显式包含，哪怕为空；JS逻辑只操作tbody子节点，不碰直接子节点
  克隆后调用el.normalize()合并相邻文本节点，避免换行/空格处理差异导致textContent不等

  哪些HTML问题会导致结构测试必然失败

  这类问题不会报错，但会让document.querySelector、childNodes.length等基础断言在不同平台返回不同值：

  直接写在下，没包：Chrome自动补，Firefox可能挂到table根节点，Safari重排时丢
  或作为flex子项，又没设min-width: 0：Safari 14–15会在布局阶段错误计算宽度，影响offsetWidth，但结构测试不该读这个——若误测就变成“假失败”

  用innerHTML +=追加内容：强制全量重解析，破坏焦点、滚动位置，且各引擎重排策略不同，导致el.children顺序或数量不一致

  真正难的不是写对HTML，而是让团队所有人持续写对——尤其当多人协作、模板嵌套、SSR与CSR混合时， + 静态校验（如html-validate）+ CI拦截（https://validator.w3.org/ API）这三层缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！