从静态页面到工程化：HTML代码质量提升全攻略

• 在整个文档中只能出现一次，且不应嵌套在

  或

  内部
• 用 今天 替代纯文本日期，机器可读性才真正生效

属性值不加引号？浏览器能容错，但构建工具会报错

写 看似能跑通，但在 Vite/Webpack 等构建流程中，这类无引号写法会被解析器直接截断——logo.png alt=公司标识 被当作一个整体字符串，导致资源路径失效或属性丢失。W3C 规范也明确要求所有属性值必须用引号包裹。

• 统一用双引号：class="user-card"，而非单引号或不加引号
• 布尔属性也需显式赋值：required="required"，而不是 required（后者在某些校验工具中会触发警告）
• 路径中的斜杠方向要一致：Windows 下写 ./images/icon.svg，别混用反斜杠

响应式失效？问题常出在 @media 之前就崩了

很多人调试了半天 @media (max-width: 768px)，发现手机上样式依然错乱，最后才找到根本原因——HTML 结构本身存在嵌套错误。比如

里塞了

，浏览器自动补全后 DOM 层级偏离预期，CSS 选择器压根没匹配到目标元素。

• 先用浏览器开发者工具的 Elements 面板，折叠查看 DOM 树是否“看起来像你写的那样”
• 再运行 npx htmlhint --config .htmlhintrc src/*.html，重点看 attr-no-duplication、attr-value-not-empty、id-unique 这类规则是否报错
• 最后才调试媒体查询——确保 viewport meta 标签存在且配置正确：

工程化不是堆砌工具，而是让每行 HTML 都经得起验证、适配缩放和团队协作。最容易忽略的细节，其实是每次保存前手动运行一次 htmlhint，以及在 Elements 面板里多点两下“刷新后检查 DOM 实际结构”。