HTML空元素共14个,是W3C HTML5标准明确定义的无内容、无闭合标签元素:area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr。

HTML 空元素只有 14 个,是 W3C 标准明确定义的,不是“写了没有闭合标签就算空元素”——像 div 或 p 即使内容为空(<p></p>),也仍是非空元素。
哪些标签属于标准空元素(W3C HTML5 官方列表)
HTML5 规范中明确列出的空元素共 14 个,它们**不能有结束标签、不能包含任何子节点(包括文本)**,浏览器解析时会直接忽略后续闭合写法(如 <img></img> 中的 </img> 被丢弃)。
-
area:必须嵌套在map内,定义图像映射区域 -
base:只允许出现在head中,设置页面相对 URL 基准 -
br:强制换行,语义上表示换行点,不是段落分隔 -
col:用于colgroup内定义表格列属性 -
embed:嵌入外部资源(如 Flash、PDF),不支持fallback内容 -
hr:语义为“主题分隔”,是块级空元素 -
img:必须含src和alt(后者不可为空字符串,除非有正当理由) -
input:表单控件,type决定行为,无默认值时需显式设value -
link:仅在head中有效,rel和href通常必填 -
meta:元数据,charset、name+content、http-equiv三者选一 -
param:配合object使用,传参给插件 -
source:为picture、audio、video提供候选资源 -
track:为媒体元素提供字幕、章节等文本轨道 -
wbr:指示浏览器“此处可断行”,不影响渲染,仅影响换行策略
为什么 hr 和 br 是空元素但表现不同
二者都无内容、无闭合标签,但语义和默认 CSS 表现差异大:
-
br是行内元素,只影响当前文本流,连续多个<br>会产生多行空白,但不会触发新 BFC -
hr是块级元素,自带上下 margin,且现代浏览器默认加 border,它代表一次“主题中断”,不是视觉装饰 - 误用
br替代段落(比如用<p>第一段</p><br><br><p>第二段</p>)会导致语义混乱,屏幕阅读器可能跳过或误读
自闭合写法 <img /> 在 HTML 中是否必要
不必要,且容易引发误解:
立即学习“前端免费学习笔记(深入)”;
- HTML5 解析器完全忽略斜杠,
<img src="x">和<img src="x" />行为完全一致 - IDE 自动补全或 Prettier 默认加
/,只是为了兼容 XHTML 风格或提升可读性,不是规范要求 - 混淆点:有人以为加了
/就“更标准”,其实反而可能误导初学者认为这是“闭合动作”——而空元素根本不存在“闭合”概念 - 唯一要注意的是:XHTML 或 XML 模式下(如 SVG in HTML),必须用自闭合形式,否则解析失败
真正容易被忽略的是 meta 的 charset 必须出现在 head 最前面(甚至早于 title),否则可能导致乱码;还有 source 必须作为 picture/video 的**首个子元素**,否则会被忽略——这些不是空元素本身的限制,而是上下文规则。



















