html5中仅14个void元素（area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr）可写/但不推荐；其余如、、等非void元素写/即非法，会导致dom错乱、脚本不执行或内容丢失。
哪些标签真能写 /，哪些写了就错
HTML5 明确定义了 14 个 void elements： area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr。这些标签语法上禁止结束标签，也禁止写 / —— 但浏览器容错，会忽略 /，所以 <img src="a.jpg"> 能渲染，不代表它合规。
textarea、select、script、style、p、div 这类不是 void 元素，必须显式闭合。写成 <textarea></textarea> 或 <p>hello</p> 漏掉后半部分，会导致 DOM 结构错乱：placeholder 不生效、option 被丢弃、JS 不执行、CSS 不加载。
-
<img src="x">和<img src="x">在 HTML5 中语义等价，但后者是 XHTML 遗留痕迹，无实际价值 -
<img src="x">是非法写法，浏览器会忽略，后续内容可能被误包进img节点 -
<input type="text">正确；<input type="text">虽不报错，但某些模板引擎（如旧版 Vue SFC）会把type="text" />解析成type="text/"，表单控件直接失效
团队怎么统一约定才不会扯皮
靠口头约定或文档截图没用。真正起效的是工具链强制 + 编码习惯校验。
- 在
.html-validate.json或 ESLint 的html-validate插件中启用void-elements规则，对<img>报 warning，对<div></div>报 error - VS Code 禁用 Emmet 的自闭合补全：设置
"emmet.preferences": { "selfClosingTag": false }，避免敲img+ Tab 自动输出<img src=""> - CI 流程里加
html-validate --config .html-validate.json src/**/*.html，构建失败即阻断不合规提交 - 约定属性顺序：
id→class→data-*→src/href→ 其他，避免<img class="x" src="y">和<img src="y" class="x">并存
为什么 Prettier 默认不解决这个问题
Prettier 的 HTML 格式化默认不处理自闭合风格选择，因为它不介入语义判断——它只做缩进、换行、引号统一。你配置 "htmlWhitespaceSensitivity": "css"，它也不会帮你把 <img> 改成 <img>。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
要让 Prettier 强制统一，得配合插件或预处理器：
- 使用
prettier-plugin-html并开启useShortDoctype: true，但它仍不干预/存在与否 - 更可靠的做法是：Prettier 负责格式，
html-validate负责语义，两者分工明确 - 如果团队已混用
<img>和<img>，别指望一键修复——需人工 grep + 替换，并同步更新所有模板片段和组件库示例
最容易被忽略的兼容性陷阱
不是浏览器不认，而是构建工具和静态分析器会出问题。
- Django 模板在 strict mode 下，
<input type="email">会被解析为type="email/"，导致required失效 - Webpack + html-webpack-plugin 若启用了
minify.removeEmptyAttributes，可能把<img src="x">压成<img src="x">，但若原始代码含<img src="x">，压缩后可能变成<img src="x">+ 后续内容错位 - Vue 单文件组件中嵌入 SVG 时，
<input>可能被 Vue 解析器误判为 XML 元素，破坏上下文作用域 - 即使所有页面都跑通，
eslint-plugin-vue或sonarjs在扫描 HTML 字符串时，仍可能因/>触发误报
真正的统一不是“看起来一样”，而是让每个标签在 DOM 构建、工具链解析、团队协作三个层面行为一致。斜杠不是装饰，是语义信号——该有的地方没它，不该有的地方有它，都会在某个环节悄悄咬你一口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
