双标签必须有结束标签，单标签禁止写结束标签；html5明确禁止为、等空元素添加闭合标签，如非法，而缺结束标签会导致dom错乱。
双标签必须有结束标签，单标签不能写结束标签
HTML5 规范明确禁止给 <img>、<input>、<meta>、<link>、<br> 这类元素加闭合标签。比如 <img src="a.jpg"> 是非法的，浏览器会忽略 ，甚至可能破坏后续 DOM 结构；而 <p>hello</p> 缺少
常见错误现象：
- 页面渲染异常，比如后面的内容突然缩进或换行失效
- 开发者工具里 DOM 树出现意外的父级包裹（浏览器纠错行为）
- W3C 验证器报错：
Element img is not closed或Stray end tag img
双标签能嵌套内容，单标签只能靠属性定义行为
双标签如 <div>、<code><p></p>、<section></section> 的存在意义是“包裹”，它们的语义和样式效果依赖内部内容或子元素。而单标签如 <hr>、<input> 本身不承载文本内容，所有功能都靠属性驱动 —— src 决定图片加载，type 决定输入框类型，href 决定链接目标。
使用场景差异：
-
<img src="x.png" alt="描述">：没有内容区域，alt 不是子文本，而是属性值 -
<button>点击我</button>：文字“点击我”是真实子节点，可被 JS 读取、CSS 选中 - 试图在
<input>里写文字（如<input>xxx）完全无效，会被浏览器丢弃
HTML5 允许省略单标签斜杠，但 JSX/XHTML 要求必须闭合
在纯 HTML5 页面中，<img src="a.jpg"> 和 <img src="a.jpg"> 效果完全一致。但如果你用的是 React（JSX）、Vue 模板或旧版 XHTML，就必须写成后者 —— 因为 JSX 解析器把 <img> 当作未闭合标签报语法错误，XHTML 则直接拒绝渲染。
容易踩的坑：
- 复制粘贴模板时混用风格：从 Vue 项目拷代码到纯 HTML 页，保留
/>没问题；反过来删掉它，在 JSX 里就炸了 - 服务端模板引擎（如 Thymeleaf、Handlebars）对标签闭合更敏感，未闭合的
<meta>可能导致整个页面解析失败 -
<br>在 HTML5 中写成<br>最稳妥，<br>也可，但<br>是典型错误
块级/行内特性与单双标签无直接关系
很多人误以为“单标签都是行内元素”，其实不是。<hr> 是单标签，但默认是块级；<img> 是单标签，默认是行内块；而双标签里的 <span></span> 是行内，<div> 是块级。决定显示行为的是 CSS 的 <code>display 属性，不是标签是否成对。
真正影响布局的其实是默认样式和浏览器 UA stylesheet，不是语法结构。比如：
-
<input type="text">默认display: inline-block，所以能设宽高 -
<p></p>默认display: block，哪怕里面没内容也占一行 - 强行给
<img>加display: block就能取消默认基线对齐带来的底部空白
