HTML5中14个void elements是：area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr；它们不能有结束标签、不可嵌套内容，标准写法仅用开始标签，如。
HTML5 中哪些标签属于 void elements
HTML Living Standard 明确定义了 14 个 void elements，它们**不能有结束标签、不能嵌套内容、语法上禁止写 或 />（尽管后者被容错）**。这些标签是：
<area><base><br><col><embed></embed><hr><img alt="HTML中void元素（自闭合标签）的完整列表与书写规范" ><input><link><meta><param><source></source><track></track><wbr></wbr>
注意：<textarea></textarea>、<select></select>、<script></script>、<style></style>、<div>、<code><p></p> 等都不是 void elements —— 它们必须显式闭合，哪怕内容为空。
void elements 的正确写法与常见错误
标准且推荐的写法是只写开始标签，不加斜杠、不加结束标签：
<img src="logo.png" alt="Logo"> <br> <input type="email" name="email"> <meta charset="utf-8">
以下写法虽在浏览器中“能显示”，但属于错误或高风险用法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<img src="logo.png" alt="HTML中void元素（自闭合标签）的完整列表与书写规范" >：HTML5 不要求、不鼓励；某些模板引擎（如旧版 Vue SFC）、linter（如eslint-plugin-html）或构建工具会按 XML 规则解析，导致属性截断或结构错乱 -
<img src="logo.png" alt="HTML中void元素（自闭合标签）的完整列表与书写规范" >：非法，浏览器会忽略，后续内容可能被误包进<img alt="HTML中void元素（自闭合标签）的完整列表与书写规范" >节点内 -
<br>：同<img alt="HTML中void元素（自闭合标签）的完整列表与书写规范" >，无必要，且暴露 XHTML 思维惯性
为什么 <textarea></textarea> 和 <select></select> 不能自闭合
这两个标签常被误认为“空元素”，但它们本质是 normal elements，依赖开始与结束标签之间的文本节点或子元素来工作：
-
<textarea>default text</textarea>：内容作为初始值；写成<textarea></textarea>后，DOM 中值为空字符串，placeholder 也不生效 -
<select><option value="a">A</option></select>：选项必须在标签对之间；写成<select></select>会导致所有<option></option>被丢弃或解析失败 - 同理，
<script></script>和<style></style>若写成<script></script>，内部 JS/CSS 将完全不执行或不生效
工具链和团队协作中的实际建议
开发中真正出问题的往往不是浏览器渲染，而是工具链对标签结构的假设：
- VS Code 的 Emmet 默认展开
img为<img src="" alt="HTML中void元素（自闭合标签）的完整列表与书写规范" >—— 这是符合 HTML5 规范的，保留即可 - 若项目使用 Prettier，确认配置中
htmlWhitespaceSensitivity和xmlWhitespaceSensitivity区分清楚，避免把 HTML 当 XML 处理 - CI 流程中若集成
html-validate或axe-core，它们会严格检查 void element 是否误带结束标签 - 多人协作时，统一禁用编辑器自动补全
/>的插件行为（例如关闭 VS Code 的 “Auto Closing Tag” 对 void 元素的干预）
最易被忽略的一点：服务端模板（如 Jinja2、Nunjucks）在 strict mode 下，/> 可能被当作属性分隔符，导致生成的 HTML 实际缺失属性值 —— 这类 bug 往往只在特定环境复现，排查成本极高。
