HTML标签嵌套错位会导致DOM结构异常，浏览器虽自动修正但结果常偏离预期，影响CSS、JS及可访问性；属性值必须用双引号包裹，禁止省略布尔属性值；缩进须统一空格，禁用Tab；应优先使用语义化标签并补全ARIA属性。
HTML标签嵌套错位导致DOM结构异常
浏览器对错误嵌套的容错处理会“自动修正”，但结果往往偏离预期。比如 <div><p>文字</div></p>，浏览器实际解析成 <div><p>文字</p></div>，而开发者可能误以为 <p> 是兄弟节点——这直接影响 CSS 选择器、JS 查询和可访问性树。
- 用浏览器
Elements面板逐层展开 DOM，观察是否出现意外包裹或截断 - 禁用编辑器的“自动闭合标签”功能，手动输入时严格遵循“父开→子开→子闭→父闭”顺序
- 在 CI 流程中接入
html-validate工具，配置规则"no-duplicate-attributes"和"no-self-closing-element"
属性值不加引号引发解析失败
src=image.png 看似能运行，但一旦路径含空格、括号或特殊字符（如 src=img (1).png），就会被截断为 src=img，资源 404。更隐蔽的是，未加引号的布尔属性（如 required）在某些解析器中可能被忽略。
- 所有属性值必须用双引号包裹，包括
class、id、data-属性 - 避免省略布尔属性值：写
disabled="disabled"或简写为disabled，但不要写disabled="" - VS Code 中启用
editor.autoClosingQuotes并设为"always"，配合 Prettier 的htmlWhitespaceSensitivity: "css"
缩进混用空格与Tab破坏协作一致性
当团队成员分别用 Tab 和 4 空格缩进时，Git diff 会显示大量无意义变更，且 prettier 格式化后可能反复颠倒缩进风格，造成合并冲突。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 项目根目录下建
.editorconfig，强制indent_style = space和indent_size = 2 - VS Code 设置中关闭
editor.detectIndentation，避免根据文件历史自动切换缩进方式 - 检查
settings.json是否存在语言级覆盖：确认没有"[html]": { "editor.insertSpaces": false }这类冲突配置
语义化缺失使SEO与无障碍失效
用 <div class="header"> 替代 <header>，屏幕阅读器无法识别页眉区域；<span> 包裹按钮文本却不加 role="button"，键盘焦点将失效。
立即学习“前端免费学习笔记（深入）”；
- 优先使用
<nav>、<main>、<section>、<time>等语义化标签，而非堆砌<div> - 对非标准交互元素（如自定义下拉菜单）必须补全 ARIA 属性：
aria-expanded、aria-controls、role - 用 axe 浏览器插件扫描页面，重点关注
document.hasFocus()路径和aria-*缺失警告
真实项目里最常被跳过的，是把 .editorconfig 提交到仓库并要求所有成员启用它——不是“有就行”，而是“所有人统一执行”。否则格式化工具再强，也只在本地生效。
