HTML中void elements（如<img>、<br>）必须不写闭合标签，否则非法；normal elements（如<div>、<p>、<script>、<textarea>、<select>）必须显式闭合，否则导致内容嵌套错乱。
哪些 HTML 标签必须写闭合，哪些能自闭合
浏览器对标签闭合的要求不是“可选”，而是由 HTML 规范明确定义的：有些标签天生不能有结束标签，写了反而可能被解析为两个标签；有些必须显式闭合，否则内容会意外嵌套或截断。
关键看 HTML Living Standard 的元素分类——不是看习惯、不是看旧教程，更不是看“看着顺眼”。比如 <img> 在 HTML5 中是 void element，它没有结束标签的语义，<img></img> 是非法的，浏览器会忽略 </img>，甚至可能把后续内容误判为 <img> 的子节点。
-
<br>、<hr>、<input>、<meta>、<link>、<source>等属于 void elements，**不允许**写</br>或<input />（XHTML 风格在 HTML 文档中无意义） -
<div>、<p>、<span>、<section>、<article>等属于 normal elements，**必须**有对应结束标签，<p>hello不会自动补全，后续内容会被包进这个未闭合的<p>里 -
<script>和<style>必须闭合，哪怕内容为空：<script></script>，不能写成<script />—— 否则 JS 不执行，CSS 不生效
为什么 <img src="a.jpg" /> 在 HTML 里是错的，但不报错
因为 HTML 解析器对错误宽容。你写 <img src="a.jpg" />，浏览器会把它当作 <img src="a.jpg"> 处理，斜杠被忽略。这不是“支持”，是“容错”。但这种写法暴露了混淆 XHTML 和 HTML 的思维惯性。
真正的问题在工具链：某些模板引擎（如早期 Vue 单文件组件）、linter（如 eslint-plugin-html）、或静态站点生成器，在解析时可能按 XML 规则处理，把 /> 当作结束信号，导致属性截断或结构错乱。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在纯 HTML 页面中，用
<img src="a.jpg">，不要加斜杠 - 如果项目强制要求 XML 兼容（极少见），应统一用 XHTML MIME type（
application/xhtml+xml），并确保整个文档严格符合 XML 规则——但这已基本退出主流实践 - VS Code 或 WebStorm 的 Emmet 默认展开
img为<img src="">，这是正确行为；若插件输出/>，建议关掉或换配置
<textarea> 和 <select> 为什么不能自闭合
这两个标签看起来像“容器”，但内容是用户输入或选项文本，它们的 DOM 行为依赖开始与结束标签之间的文本节点。写成 <textarea /> 或 <select />，浏览器会当作空标签处理，内部默认值、占位符、初始选项全部丢失。
典型错误现象：<textarea placeholder="输入..." /> 渲染出来是空白框，且无法聚焦输入；<select><option value="1">A</option></select> 如果漏写 </select>，后面所有 <div> 都可能被吞进 <select> 的 DOM 子树里，样式和事件全乱。
-
<textarea>必须成对：<textarea>默认文字</textarea>，即使为空也要写<textarea></textarea> -
<select>同理，哪怕只有一项：<select><option>选我</option></select> - 注意：
<option>本身是 normal element，但可以省略结束标签（HTML 特殊规则），不过建议始终写全，避免嵌套歧义
服务端模板或 JSX 里怎么避免闭合陷阱
问题不在 HTML 本身，而在模板语法和编译阶段的解析逻辑。比如 EJS、Nunjucks 里混写原生 HTML，或 React 中用 dangerouslySetInnerHTML 注入字符串，一旦字符串含未闭合标签，就会污染整个 DOM 结构。
更隐蔽的是 JSX：它看似 XML，但实际编译为 JS 对象，<img /> 是合法 JSX 语法（等价于 React.createElement('img')），但最终渲染出的 HTML 还是 <img>。这时候如果手写字符串拼接 HTML（比如构造邮件模板），就极易把 JSX 习惯带进去，写出 <div><img />hello</div> —— 在 HTML 环境下，“hello”会被当成 <img> 的子节点。
- 服务端拼 HTML 字符串时，一律按 HTML5 规范写：void elements 不加
/>，normal elements 必须闭合 - React/Vue/Svelte 中，直接写 JSX/模板语法即可，它们会保障输出合法 HTML；但凡要
innerHTML或v-html，先用DOMParser检查字符串是否结构完整 - CI 流程中加 HTML lint（如
html-validate），规则启用了no-self-closing-element和require-end-tags能提前暴露问题
最容易被忽略的是：动态插入的 HTML 片段（比如富文本编辑器输出、Markdown 渲染结果）根本不管你的闭合习惯，它只负责生成字符串。这时候不验证结构，上线后某个 <p> 漏闭合，整页布局就可能塌掉——不是报错，是静默错乱。
