前端打工人面试时有没有这种体验？以为准备好常见问题，结果面试官突然盯着控制台问："说说 HTML 里的空元素有哪些？和可替换元素啥关系？" 瞬间大脑卡壳？别慌！今天就用一道高频题带你啃下这个基础硬骨头，下次面试直接甩标准答案！

面试题：列举 HTML 中的空元素，并说明可替换元素和不可替换元素的区别

问题一：哪些标签属于空元素？为啥有的空元素必须闭合？

好多人背标签时会忽略 "空元素" 这个分类。面试官问这个，其实是考察你对 HTML 元素本质的理解 —— 空元素指没有内容的单标签，但不同版本规范对闭合要求不一样。

<!-- HTML5中典型的空元素，无需闭合（但允许闭合） -->
<meta charset="UTF-8"> <!-- 定义文档字符编码 -->
<link rel="stylesheet" href="style.css"> <!-- 引入外部样式表 -->
<hr> <!-- 水平分割线 -->
<br> <!-- 换行符 -->
<!-- XHTML时代要求空元素必须闭合，用/>结尾 -->
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />

划重点：空元素没有结束标签，但 HTML5 不强制加/，XHTML 才需要。记住 " 元信息三兄弟<meta><link><base>+ 结构辅助<hr><br><area>"，面试直接举这些例子，考官会觉得你基础扎实。

问题二：可替换元素和不可替换元素怎么区分？实际开发有啥用？

这个问题容易和空元素混淆。简单说，可替换元素的内容由外部资源决定，比如图片；不可替换元素的内容直接写在标签里，比如<p>文字</p>。

<!-- 可替换元素：内容由src属性指定的外部文件加载 -->
<img src="logo.png" alt="公司logo"> <!-- 图片标签 -->
<object data="video.mp4" type="video/mp4"></object> <!-- 嵌入多媒体 -->
<iframe src="https://example.com"></iframe> <!-- 嵌入网页 -->
<!-- 不可替换元素：内容直接包含在标签内 -->
<p>这段文字直接写在p标签里</p>
<h1>标题内容也是直接定义</h1>

面试回答：" 就像点外卖，可替换元素是你下单后等快递（外部资源加载），不可替换元素是你自己在家做饭（内容直接写死）。实际开发中，可替换元素要注意跨域问题和加载失败处理，比如给<img>加alt备用文本；不可替换元素则要关注语义化，比如用<strong>强调重点而不是单纯加样式。"

现代框架里写 HTML，还有必要纠结空元素闭合方式吗？

有人觉得用 React/Vue 时都是 JSX 语法，标签必须严格闭合，老规范早就过时了；但也有人认为，了解 HTML 底层规则能避免奇怪的兼容性问题，比如某些旧版浏览器对未闭合标签的解析差异。作为每天和标签打交道的前端，你觉得基础规范的学习是 "无用功" 还是 "底层护城河"？来评论区聊聊你的看法，点赞最高的观点送前端面试手册电子版！