html标签如何正确闭合_self-closing标签注意事项【介绍】

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 规则处理，把 /> 当作结束信号，导致属性截断或结构错乱。立即学习“前端免费学习笔记（深入）”；在纯 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 />，浏览器会当作空标签处理，内部默认值、占位符、初始选项全部丢失。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西