htmlhint 可在保存时自动报错，需安装插件并配置 .htmlhintrc 文件启用关键规则（如 tagname-lowercase），同时在 settings.json 中开启 "html.validate.scripts": true，实现本地开发阶段即时捕获低级 html 错误。
怎么用 HTMLHint 在保存时自动报错
本地开发阶段就卡住低级错误，比上线后被 QA 或用户反馈再修快得多。HTMLHint 是最轻量、最易集成的静态检查工具，关键不是装上就完事，而是让它在你写完 div 忘打闭合标签的瞬间就标红。
- VS Code 中安装
HTMLHint插件后，必须手动创建.htmlhintrc配置文件（放在项目根目录），否则默认规则极宽松，几乎不报错 - 至少启用这几条硬性规则：
"tagname-lowercase"、"attr-lowercase"、"attr-value-double-quotes"、"id-unique"——它们覆盖 80% 的模板 runtime 崩溃源头 - 在 VS Code
settings.json中加一句："html.validate.scripts": true，否则<script></script>块里的 DOM 操作错误（如document.getElementById("xxx")找不到）不会被提示 - 别依赖“右键 → Run Linter”，它只扫当前文件；真正起效的是保存即校验——需确认插件设置里勾选了
Run on save
DevTools Console 里哪些错误必须立刻处理
不是所有红字都紧急，但以下几类错误一旦出现，说明 HTML 结构已影响 JS 执行逻辑，交付前必须清零：
-
TypeError: Cannot read property 'addEventListener' of null：典型 DOM 元素未加载就绑定事件，根源常是document.getElementById调用早于<script></script>放置位置，或没加defer属性 -
ReferenceError: $ is not defined：jQuery 等库未加载成功，但更常见的是 HTML 模板中误写了<script src="js/jquery.min.js"></script>，而实际路径是assets/js/jquery.min.js -
Warning: ARIA attributes must be valid：比如写了aria-labelledby="nonexistent-id"，这类警告在无障碍测试中会直接 Fail，不能忽略 - 没有报错但元素渲染异常？切换到 Elements 面板，右键节点选
Break on > attribute modifications，可捕获 JS 动态删改 class 或 style 导致的样式错乱
为什么 W3C 验证器结果和浏览器表现不一致
W3C 验证器报 “Error: Element section is missing a required child element.”，但页面看起来完全正常——这不是工具错了，而是你混淆了“语法合法”和“渲染可用”。
- W3C 校验的是 HTML5 规范定义的约束，比如
<main></main>不允许嵌套多个<main></main>，但浏览器会自动容错并渲染，这种“能跑≠合规”正是线上故障温床 - 验证器不检查 JS 行为，所以
setCustomValidity()写了但没配reportValidity()，它不会报错，但用户提交时无反馈 - 真实交付场景下，应把 W3C 报告中的
Error当作编译失败处理，Warning至少逐条确认是否属于已知可控例外（例如某些 SSR 框架生成的data-server-rendered属于合理警告） - 注意验证器默认检测模式是 HTML5，若项目仍用 XHTML 语法（如自闭合
<img>），需手动切换文档类型，否则大量误报
表单类模板最容易漏掉的三个可访问性硬指标
很多团队通过了视觉验收和功能测试，上线后却被无障碍审计打回，问题往往出在表单结构的三处细节，且无法靠截图或肉眼发现：
-
<label></label>和对应控件的for/id必须严格匹配，且id全局唯一；用aria-labelledby替代时，引用的 ID 也必须真实存在 -
<input type="checkbox">或<input type="radio">必须包裹在<fieldset></fieldset>+<legend></legend>中，否则屏幕阅读器无法识别分组语义 - 所有交互控件（包括
<button></button>）必须有明确的type属性：type="button"、type="submit"或type="reset"；缺省值在表单内会触发意外提交
这些点不难补，但一旦漏掉，修复成本远高于预防——尤其当模板被复用十几次后，改一处等于全局扫一遍 id 和 for 配对关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
