HTML质量评估应优先修复W3C验证器中的Error级错误（如未闭合标签、非法嵌套），警惕语义标签在IE9–11/Safari中因html5shiv缺失或CSS未声明display:block导致的布局塌陷，禁用正则清洗HTML而应使用BeautifulSoup解析，迁移时须校验CSS、图片、链接三类路径有效性并修正alt空值警告。
HTML质量评估该看哪些报错和警告
W3C验证器里出现的 Element “header” not allowed as child of element “div” 这类错误，说明语义标签嵌套违反了规范；而 Attribute “charset” not allowed on element “meta” in this context 则是 HTML5 中 <meta charset="UTF-8"> 写法被误当成 XHTML 语法处理——这类警告往往源于 DOCTYPE 声明缺失或拼写错误。
真正要盯紧的是“Error”级别问题：未闭合的 <p>、<li> 或嵌套错位（如 <p><div>...</div></p>），它们会导致浏览器重排 DOM 树，JS 拿到的 querySelector 结果可能和预期不一致。Warning 级别可以暂缓，但 Bad value “” for attribute “alt” 必须修，否则影响可访问性测试得分。
迁移前必须检查的三类路径是否失效
迁移不是复制粘贴 HTML 文件，而是校验三类路径在新环境是否仍能解析：
-
<link rel="stylesheet" href="css/main.css">→ 新项目里是否真有css/main.css，还是已挪到assets/css/？ -
<img src="../images/logo.png">→ 相对路径向上跳级容易因入口 HTML 位置变化而 404，建议统一转为根路径/static/images/logo.png -
<a href="product.html?id=123">→ 带 query 参数的链接在 SPA 或 SSR 架构中大概率废弃，需映射到新路由并补<link rel="canonical">
漏掉任何一类，上线后就可能出现白屏、样式丢失或图片 404，且控制台无明确报错。
立即学习“前端免费学习笔记（深入）”；
语义化标签在 IE9–11 和 Safari 中的 display 行为
<header>、<nav>、<main> 在现代浏览器默认是 display: block，但在 IE9–11 和老版 Safari 中会被当成未知标签，计算为 display: inline，导致布局塌陷。
修复方式很直接：
- 确保
html5shiv.js在<head>内加载，且早于所有 CSS - 在 CSS 中显式声明：
header, nav, main, section, article, aside, footer { display: block; } - 避免嵌套多个
<main>—— 屏幕阅读器只识别第一个，后续内容会静默跳过
不验证 computed styles 里的 display 值，仅靠“写了语义标签”就认为没问题，是迁移中最隐蔽的坑。
用 BeautifulSoup 提取内容时别碰正则删标签
有人写 re.sub(r"<p>(.*?)</p>", r"\1", html) 清洗 HTML，结果把 <p>Hello <strong>world</strong></p> 截成 Hello <strong>world，因为 . 默认不匹配换行，*? 又无法处理嵌套。
正确做法是交给解析器：
- 用
BeautifulSoup(html, "html.parser")加载 - 提取正文：
soup.find("div", class_="content").decode_contents() - 去标签留文本：
soup.get_text()，它会自动处理<script>、<style>和注释块 - 图片路径标准化：
for img in soup.find_all("img"): img["src"] = img["src"].replace("./", "/static/")
正则处理 HTML 是反模式，尤其当模板含 <pre><code> 或服务端模板语法（如 {{ content }}）时，极易误删关键字符。
