BUT！

Question

<element></element>和<element />之间有什么区别？我一直在阅读一些HTML教程，有些则使用

<img src="foo.png" alt="foo" />

而其他人使用

<img src="bar.png" alt="bar"></img>

有什么区别？当我尝试两者时，它似乎不会影响任何事情。现在，我只是疯狂地猜测并说：

<img src="bar.png" alt="bar"> is if you want to put something in between? </img>

任何人都可以确认我的猜测和/或告诉我有什么区别吗？

Answer 1

首先，

<img src="bar.png" alt="bar"> is if you want to put something in between? </img>

不正确，但我明白你的意思。

<element />形式的标记称为自动关闭标记。

Answer 2

void 标记不需要结束标记，事实上，不得指定结束标记（因此，不能包含任何内容），如{{ 3}}。 <img>标记是其中一个空标记。因此，如果您通过spec运行以下代码，则会在第10行收到错误：Stray end tag img.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <p>
            <img src="#" alt="">
            <img src="#" alt="" />
            <img src="#" alt=""></img>
        </p>
    </body>
</html>

Answer 3

HTML中有三种标签。每个标准标记都记录为它应该是哪种类型（我说应该，因为大多数浏览器都允许使用错误类型的标记）。

无效标记：仅由开始标记组成，没有关闭。 <x>示例：
```
<br>
<hr>
```
自闭标签：结尾部分的开始标记。 <x />示例：
```
<script />
<style />
<img />
```
结束标记：是常见的start-content-end标记。 <x> ... </x>示例：
```
<div> ... </div>
<a> ... </a>
<em> ... </em>
```

如果您希望在HTML上获得最大的理论效果，这非常重要，但在实践中，大多数浏览器会将没有内容的结束标记视为与自动关闭和void标记等效。这意味着虽然无效，但这样的事情会起作用：

<img src="a.png"></img>
<br />

BUT！

你永远不应该这样做：

<div> blablabla

关闭标签必须有相应的关闭，否则你可能会大大搞砸标记。

如果你坚持标准，就不会有任何意外。

html - 这两个标签之间的区别？

3 个答案:

BUT！