htmlq 不是校验器，仅提取不验证；真正落地的 html 质量校验需分层：构建时用 html-validate 扫静态结构，运行时在 serverless 函数中嵌入三行轻量守卫逻辑，并全部容器化固化。
不能靠 htmlq 做 HTML 质量校验，它只提取不验证；真正能落地的实时校验体系，必须分层：构建时用 html-validate 扫静态结构，运行时在 Serverless 函数里加三行守卫逻辑，且全部容器化固化。
htmlq 不是校验器，别把它当质量门禁用
常见错误现象：在 Lambda 函数里跑 htmlq 'title' 返回空，就认为
缺失——其实它只是没匹配到，连 HTML 是否解析成功都不报错。htmlq 的设计目标是提取，不是校验，它压根不检查可访问性、XSS 模式、语义嵌套或标签闭合。
<ul>
<li>
<code>htmlq 'body'</code> 返回空，可能是 HTML 为空、解析失败，也可能是文档根本没 <code></code> 标签，它不会告诉你原因</li>
<li>用 <code>htmlq '*'</code> 全量提取，在 128MB 内存档的 Lambda 里极易触发 OOM，尤其含大量内联 JS 时</li>
<li>它无法识别 <code>onerror="alert(1)"</code> 或 <code>javascript:</code> 这类高危模式，也不报告 <code><header></header></code> 在 <code><main></main></code> 外嵌套这类语义错误</li>
</ul>
<h3>Serverless 函数返回前必须插三行轻量守卫</h3>
<p>构建时扫描拦不住模板字符串拼接错误，所以必须在函数实际返回 HTML 前做最小可行检查。这些逻辑要极轻（
</p>
<ul>
<li>检查 <code><title></title></code> 是否存在：<code>strings.Contains(htmlBody, "<title>")</title></code> 或正则 <code><title>[^</title></code>，缺失直接返回 HTTP 500</li>
<li>禁止内联样式：<code>strings.Contains(htmlBody, "style=")</code>，发现即拒绝响应——不是为了美观，而是防止绕过 CSP</li>
<li>确认 charset 声明：<code>strings.HasPrefix(htmlBody, "<meta charset="utf-8">")</code> 或等效 <code><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></code>，否则中文首屏固化乱码</li>
</ul>
<p>别用 <code>document.querySelector</code> 或 <code>cheerio.load</code>——Serverless 环境没有 DOM，jsdom 启动开销远超 htmlq，且冷启动延迟常突破 100ms 阈值。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<h3>CI/CD 流水线里 HTML 校验必须容器化执行</h3>
<p>本地跑 <code>html-validate</code> 和流水线结果不一致，根本原因是 Node 版本、规则版本、甚至 libxml2 行为漂移。容器化不是为了“高大上”，而是锁定可重现性。</p>
<ul>
<li>基础镜像用 <code>node:18-alpine</code>，全局安装 <code>html-validate@5.2.0</code>（非 devDependencies），避免 <code>package-lock.json</code> 失效</li>
<li>
<code>.htmlvalidate.json</code> 必须 COPY 进镜像，不挂载——挂载会破坏构建可重现性</li>
<li>
<code>CMD ["html-validate", "--config", ".htmlvalidate.json", "public/**/*.html"]</code>，失败时 exit 1，让 CI 自然中断</li>
<li>若用 GitHub Actions，显式 <code>actions/setup-node</code> + <code>npm install html-validate --no-save</code>，路径通配符加引号防 shell 展开</li>
</ul>
<h3>微<a style="color:#f60; text-decoration:underline;" title="前端" href="https://m.php.cn/zt/15813.html" target="_blank">前端</a>和组件内 HTML 片段得用 eslint-plugin-html 补位</h3>
<p><code>html-validate</code> 和 <code>htmlhint</code> 只认纯 <code>.html</code> 文件，对 Vue 的 <code><template></template></code> 或 React 的 <code>dangerouslySetInnerHTML</code> 完全无感——这是高频 XSS 漏洞温床。</p>
<ul>
<li>安装 <code>eslint-plugin-html</code>，在 <code>.eslintrc.js</code> 中配置 <code>processor: "html/eslint-plugin"</code>，把 HTML 片段提取给 ESLint 解析</li>
<li>它能捕获 <code>v-html="${userInput}"</code> 这类危险拼接，但不能查 <code>clss="foo"</code> 拼写错误——这类还得靠 <code>htmlhint</code> 的 <code>attr-name-style</code> 规则</li>
<li>微服务多子应用场景下，按目录隔离配置：<code>app-vue/.eslintrc.js</code> 和 <code>app-react/.eslintrc.js</code> 分别定义 processor，CI 步骤独立运行、独立失败</li>
</ul>
<p>最易被忽略的是动态插入点：服务端拼的 <code>innerHTML</code> 字符串、模板字面量里的 HTML 片段、甚至 <code>res.send(<div>${content}</div>)</code> ——这些地方没经过任何 lint，却直出到浏览器，是质量盲区中最硬的骨头。</p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
