空元素
空元素是 HTML 中的一种元素,它不能包含任何子节点(即嵌套元素或文本节点)。空元素只有开始标签;结束标签必须不能为空元素指定。
在 HTML 中,空元素不能有结束标签。例如,<input type="text"></input>
是无效的 HTML。相反,SVG 或 MathML 元素,如果不能包含任何子节点,则可以使用结束标签而不是 XML 自闭合标签语法在其开始标签中。
HTML、SVG 和 MathML 规范非常精确地定义了每个元素可以包含的内容。因此,某些标签组合没有语义意义。
虽然无法将空元素标记为具有任何子节点,但可以使用 JavaScript 以编程方式将子节点添加到 DOM 中的元素。但这并不是一个好的做法,因为结果将不可靠。
HTML 中的空元素如下所示
自闭合标签
自闭合标签 (<tag />
) 在 HTML 中不存在。
如果 HTML 元素的开始标签中存在尾部 /
(斜杠)字符,则 HTML 解析器会忽略该斜杠字符。这一点尤其重要,因为诸如 <script>
或 <ul>
之类的元素确实需要结束标签。在这些情况下,在开始标签中添加尾部斜杠不会关闭元素。相反,尾部斜杠将被忽略,并且元素将被视为打开,直到遇到明确的结束标签,或者直到解析器根据 HTML 结构和解析规则隐式关闭元素为止。例如,在 <div/>Some text
的情况下,浏览器将其解释为 <div>Some text</div>
,将斜杠视为忽略,并将 div 元素视为封装后面的文本。
但是,某些代码格式化程序会在空元素的开始标签中添加尾部斜杠字符,以使其与 XHTML 兼容并更易读。例如,某些代码格式化程序会将 <input type="text">
转换为 <input type="text" />
。
自闭合标签在 XML、XHTML 和 SVG 中的空元素中是必需的(例如,<circle cx="50" cy="50" r="50" />
)。
在 SVG 和 MathML 中,不允许包含任何子节点的元素可以标记为自闭合。在这种情况下,如果元素的开始标签标记为自闭合,则该元素不能有结束标签。
注意: 如果开始标签中的尾部 /
(斜杠)字符直接在未加引号的属性值之前(两者之间没有空格),则斜杠将成为属性值的一部分,而不是被解析器丢弃。例如,标记 <img src=http://www.example.com/logo.svg/>
会导致 src
属性的值为 http://www.example.com/logo.svg/
- 这会使 URL 错误。