html5中area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr这14个空元素必须不写闭合斜杠且不能有结束标签，标准写法仅为开始标签如。

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">：非法，被完全忽略，后续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>、<code><p></p>、<script></script>绝不能自闭合

这些是normal elements，依赖显式结束标签来界定内容范围。写成<div></div>或<p></p>不是“省略”，而是破坏结构语义：

• <div class="card"> <p>Hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>：第二个<code><div>没闭合，浏览器会自动补全，但JS用<code>document.querySelector('.card').children拿到的可能是意外嵌套的节点
• <script>console.log(1)</script>若写成<script></script>，内部代码完全不执行——因为解析器认为标签已结束，后续文本被当作文本节点丢弃
• <p>第一段</p> <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">这类标签：不加/是标准写法，加了反而暴露对规范理解模糊