HTML5中area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr这14个空元素必须不写闭合斜杠且不能有结束标签，标准写法仅为开始标签如<img src="a.jpg" alt="描述">。
HTML5中哪些标签必须不写/且不能有结束标签
HTML5明确将14个元素定义为void elements（空元素），它们语法上禁止写/、禁止带结束标签、禁止嵌套任何内容。这14个是：area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr。
这些标签的标准写法就是只写开始标签，比如<img src="a.jpg" alt="描述">。加/>不是错误，但属于XHTML遗留风格，在纯HTML5文档里无必要，还可能在某些工具链中引发问题。
-
<img src="a.jpg" />：浏览器能渲染，但/被忽略；旧版Jinja2 strict mode或eslint-plugin-html可能把/>误判为属性值截断点 -
<img src="a.jpg"></img>：非法，</img>被完全忽略，后续HTML节点可能被错误包裹进<img>的DOM树中 - 像
<textarea></textarea>这种看似“空”的标签，根本不是void element，必须成对出现，否则value永远为空、placeholder失效
<input>写成<input />会出什么实际问题
表面上<input type="text" name="q">和<input type="text" name="q" />都能渲染，但这只是浏览器容错的结果。真实风险藏在构建和集成环节：
- 某些服务端模板引擎（如Django 4.0+的
DEBUG=True模式）会把/>当作未闭合的属性值处理，生成name="q />"这类错误HTML - 内联SVG中混用HTML与XML解析规则时，
<input />可能被XML parser识别为自闭合，导致父容器上下文提前终止 - Webpack + html-webpack-plugin在strict模式下可能报warning，提示“void element with closing tag”
- VS Code的Emmet默认输出
<input>而非<input />，说明主流编辑器已倾向HTML5原生写法
为什么<div>、<p>、<script>绝不能自闭合
这些是normal elements，依赖显式结束标签来界定内容范围。写成<div />或<p />不是“省略”，而是破坏结构语义：
立即学习“前端免费学习笔记（深入）”；
-
<div class="card"><p>Hello</p><div>：第二个<div>没闭合，浏览器会自动补全，但JS用document.querySelector('.card').children拿到的可能是意外嵌套的节点 -
<script>console.log(1)</script>若写成<script />，内部代码完全不执行——因为解析器认为标签已结束，后续文本被当作文本节点丢弃 -
<p>第一段<p>第二段</p>：第一个<p>被自动闭合，但开发者意图是两个独立段落，DOM结构却变成<p>第一段</p><p>第二段</p>，样式和脚本逻辑可能错位
团队协作中该统一用<img>还是<img />
推荐统一用无斜杠写法：<img src="x.png" alt="x">。这不是教条，而是规避工具链差异的实际选择：
- HTML Linter（如html-validate）默认警告
/>为冗余，除非显式配置xmlMode: true - React JSX中
<img src="x" />是合法JSX语法，但这是JSX规范，不是HTML；输出到HTML文件时仍应遵循HTML5原生规则 - 部分CI流程（如Netlify Build）在HTML压缩阶段会主动移除所有
/>，统一用无斜杠可避免dev/prod行为不一致 - 真正容易被忽略的是
<meta charset="utf-8">这类标签：不加/是标准写法，加了反而暴露对规范理解模糊
