HTML代码质量始于首行DOCTYPE，需严格遵循DOCTYPE→lang→charset顺序，三者必须顶格首行且charset须为head首个子元素；语义标签须正确闭合，img等14个空元素禁止结束标签；alt=""表装饰性图片可忽略，缺失则致读屏误读。
HTML 代码质量不是“写完能跑就行”，而是从第一行 <!DOCTYPE html> 就开始的防御性工程。它直接影响渲染安全（如 XSS 风险、CSP 生效前提）、可访问性（screen reader 解析）、SEO（结构语义识别）和后续 JS 操作可靠性（DOM 树稳定性）。不规范的 HTML 往往在 CI 阶段才暴露，但修复成本已远高于预防成本。
强制校验 DOCTYPE、lang 和 charset 的位置与顺序
这三个声明必须出现在文档最开头，且顺序固定：DOCTYPE → <html lang="xx"> → <meta charset="UTF-8">。浏览器只读前 1024 字节决定编码，<meta charset> 若被注释、BOM 或空格挤到后面，会触发乱码甚至解析失败；lang 缺失或错位则让屏幕阅读器无法切换语音，也影响搜索引擎对页面语言的判定。
-
<!DOCTYPE html>必须是文件首行首字符，不能有空格、注释或 BOM -
<html lang="zh-CN">紧跟其后，不可换行或插入其他标签 -
<meta charset="UTF-8">必须在<head>内且为<head>中第一个子元素（早于<title>、<script>） - 避免使用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 它不被现代浏览器视为编码声明依据
语义化标签闭合与自闭合规则必须严格匹配 HTML5 规范
错误的闭合方式会让 DOM 解析器产生隐式修正，破坏预期结构。例如 <img src="x"></img> 会被转成两个节点（<img> + 文本节点 </img>），导致 querySelectorAll('img') 返回异常结果；而 <p>hello</p><p>world</p> 被误写成 <p>hello<p>world</p> 时，第二个 <p> 会自动闭合前一个，造成嵌套错乱。
- 仅以下标签允许且必须自闭合（无结束标签）：
<area>,<base>,<br>,<col>,<embed>,<hr>,<img>,<input>,<link>,<meta>,<param>,<source>,<track>,<wbr> - 所有非自闭合标签（如
<div>,<p>,<section>）必须显式闭合，哪怕内容为空 - 禁止混用写法：
<img src="x" />是合法的，但<div />是非法的，会被解析为<div></div>并可能触发警告
HTMLHint 集成到 pre-commit 阶段而非仅靠编辑器提示
VS Code 插件只能提醒当前文件，而真实风险常来自多人协作中绕过编辑器设置的提交。把 HTMLHint 嵌入 Git hooks 才能守住底线。注意默认配置太宽松，需手动启用关键规则并禁用过时项（如 attr-lowercase 已被现代解析器弱化，但 doctype-first、meta-charset-require、tagname-lowercase 必须开启）。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install --save-dev htmlhint - 配置
.htmlhintrc文件，明确启用："doctype-first","meta-charset-require","tagname-lowercase","attr-value-double-quotes","id-class-value" - 在
package.json中添加脚本："lint:html": "htmlhint src/**/*.html" - 用
husky绑定 pre-commit：npx husky add .husky/pre-commit "npm run lint:html"
alt 属性与图片 fallback 结构必须区分语义意图
空 alt="" 和缺失 alt 在可访问性上效果截然不同：前者明确告知辅助技术“此处是装饰性图片，跳过”；后者则让屏幕阅读器强行读出文件名或路径，造成干扰。更复杂的是 <picture> 场景 —— <source> 不支持 alt，必须由最终的 <img> 提供，且该 <img> 的 src 必须存在（哪怕只是占位符），否则整个 <picture> 会被忽略。
- 装饰图：用
<img src="deco.svg" alt="">，不可省略alt - 内容图：必须写有意义的描述，如
<img src="chart.png" alt="2026年Q2用户留存率折线图"> -
<picture>中：<source srcset="...">后必须跟<img src="fallback.jpg" alt="...">，且src不可为空 - 避免用
title替代alt—— 它不参与可访问性树，仅作为 tooltip 显示
真正难的不是记住每条规则，而是理解每处看似微小的写法差异如何在浏览器解析层、辅助技术层、搜索引擎索引层引发连锁反应。比如一个多余的空格就可能让 <meta charset> 失效，而一次随意的标签省略会悄悄破坏 ARIA 属性的上下文关联。这些点不会报错，但会在某个深夜的无障碍审计或 SEO 报告里突然浮现。
