合格HTML需满足三点：开头为且前无字符（含BOM/空格/注释），所有标签正确闭合，语义标签置于合法上下文；是结构测试唯一可靠起点，因其绕过浏览器容错解析。
HTML代码质量本身不决定渲染一致性，但它是所有跨平台一致性的前提条件——没有合格的HTML，后续样式、JS、测试都无从谈起。
怎么快速判断HTML是否“合格”
合格HTML不是指能跑起来，而是指能被所有浏览器以相同方式解析出结构。关键看三点：
- 开头必须是
，且前面不能有任何字符（包括BOM、空格、注释），否则<code>document.compatMode返回"BackCompat"，直接掉进怪异模式 - 所有标签必须闭合：比如
<div><p>text</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>这种写法在Chrome会补，Safari可能丢节点，Firefox可能拒绝插入——document.querySelectorAll('p').length在三端结果不同 - 语义标签如
<header></header>、<main></main>必须出现在合法上下文里，不能直接塞进<p></p>或<span></span>里，否则WebKit可能忽略、Trident可能报错
为什么<template></template>是结构测试的唯一可靠起点
因为<template></template>不触发浏览器实时解析，只存原始字符串。用它做快照比对，才能绕过各引擎对非法HTML的容错差异：
立即学习“前端免费学习笔记（深入）”；
- 别用
el.innerHTML = htmlStr注入待测结构，改用template.innerHTML = htmlStr→document.importNode(template.content, true) - 表格结构必须显式包含
<tbody></tbody>，哪怕为空；JS逻辑只操作tbody子节点，不碰<table>直接子节点 <li>克隆后调用<code>el.normalize()合并相邻文本节点，避免换行/空格处理差异导致textContent不等 <tr>直接写在<code><table>下，没包<code><tbody>：Chrome自动补，Firefox可能挂到<code>table根节点，Safari重排时丢<td> <li> <code><img alt="应对多平台渲染一致性表现的HTML代码质量核心指标设计指南" >或<input>作为flex子项，又没设min-width: 0：Safari 14–15会在布局阶段错误计算宽度，影响offsetWidth，但结构测试不该读这个——若误测就变成“假失败”- 用
innerHTML +=追加内容：强制全量重解析，破坏焦点、滚动位置，且各引擎重排策略不同，导致el.children顺序或数量不一致
哪些HTML问题会导致结构测试必然失败
这类问题不会报错，但会让document.querySelector、childNodes.length等基础断言在不同平台返回不同值：
真正难的不是写对HTML，而是让团队所有人持续写对——尤其当多人协作、模板嵌套、SSR与CSR混合时，<template></template> + 静态校验（如html-validate）+ CI拦截（https://validator.w3.org/ API）这三层缺一不可。
