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，它们**不能有结束标签、不能嵌套内容、语法上禁止写 或 />（尽管后者被容错）**。这些标签是：

• 


• ---

注意：、、<script></script>、、

、

等都不是 void elements —— 它们必须显式闭合，哪怕内容为空。

void elements 的正确写法与常见错误

标准且推荐的写法是只写开始标签，不加斜杠、不加结束标签：

@@##@@
<br><input type="email" name="email"><meta charset="utf-8">

以下写法虽在浏览器中“能显示”，但属于错误或高风险用法：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• ：HTML5 不要求、不鼓励；某些模板引擎（如旧版 Vue SFC）、linter（如 eslint-plugin-html）或构建工具会按 XML 规则解析，导致属性截断或结构错乱
• ：非法，浏览器会忽略 ，后续内容可能被误包进 节点内
• 
：同 ，无必要，且暴露 XHTML 思维惯性

为什么 和 不能自闭合

这两个标签常被误认为“空元素”，但它们本质是 normal elements，依赖开始与结束标签之间的文本节点或子元素来工作：

• default text：内容作为初始值；写成 后，DOM 中值为空字符串，placeholder 也不生效
• A：选项必须在标签对之间；写成 会导致所有 被丢弃或解析失败
• 同理，<script></script> 和 若写成 <script></script>，内部 JS/CSS 将完全不执行或不生效

工具链和团队协作中的实际建议

开发中真正出问题的往往不是浏览器渲染，而是工具链对标签结构的假设：

• VS Code 的 Emmet 默认展开 img 为 —— 这是符合 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 往往只在特定环境复现，排查成本极高。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！