Html 如何正确关闭 <img> 标签?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14860492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close <img> tag properly?
提问by insertusernamehere
<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
Which one(s) of them is correct?
其中哪一个是正确的?
采纳答案by Ed Heal
<img src='stackoverflow.png' />
Works fine and closes the tag properly. Best to add the alt
attribute for people that are visually impaired.
工作正常并正确关闭标签。最好为alt
视障人士添加该属性。
回答by Marvin Rabe
This one is valid HTML5and it is absolutely fine without closing it. It is a so-called void element:
这是有效的 HTML5,无需关闭它绝对没问题。它是一个所谓的空元素:
<img src='stackoverflow.png'>
The following are valid XHTML tags. They have to be closed. The later one is also fine in HTML 5:
以下是有效的 XHTML 标记。他们必须关闭。后者在 HTML 5 中也很好:
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
回答by SherylHohman
Actually, only the first one is validin HTML5
实际上,只有第一个在 HTML5 中 有效
<img src='stackoverflow.png'>
Only the last two are valid in XHTML
只有最后两个在 XHTML 中有效
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
(Though not stricly required, an alt
attribute _usually_ should also be included).
(虽然不是严格要求,alt
但还应该包括一个_usually_ 属性)。
That said, your HTML5 page will probably display as intended because browsers will rewrite or interpret your html to what it thinks you meant. That maymean it turns a tag, for example, from<div />
into <div></div>
. Or maybe it just ignores the final slash on <img ... />
.
see 2016: Serve HTML5 as XHTML 5.0 for legacy validation.
see: 2011 discussion and additional links here, though over time some bits may have changed
也就是说,您的 HTML5 页面可能会按预期显示,因为浏览器会将您的 html 重写或解释为它认为您的意思。这可能意味着它会将一个标签,例如,从<div />
变成<div></div>
。或者它可能只是忽略了<img ... />
.
请参阅 2016:将 HTML5 作为 XHTML 5.0 提供用于旧版验证。
参见:2011 年的讨论和其他链接,尽管随着时间的推移,有些位可能已经改变
Partly this is because browsers try very hard to error correct. Also, because there has much confusion about self-closing tags, and void tags. Finally, The spec has changed, or hasn't always been clear, and browsers try to be backwards compatible.
部分原因是浏览器非常努力地纠正错误。另外,因为自闭合标签和无效标签有很多混淆。最后,规范已经改变,或者并不总是很清楚,浏览器试图向后兼容。
So, while you can probably get away with any of the three options,
only the first adheres to the HTML5 standard, and is guaranteed to pass a HTML5 validator.
因此,虽然您可以使用这三个选项中的任何一个,但
只有第一个符合 HTML5 标准,并保证通过 HTML5 验证器。
A sound strategy might be to:
一个合理的策略可能是:
- Write new code without the closing slash.
- When re-factoring code, update nearby image tags, as you run across them.
- Not overly worry about tags in legacy files that you do not touch, unless a particular need arises.
- 编写没有结束斜杠的新代码。
- 重构代码时,在运行时更新附近的图像标签。
- 除非有特殊需要,否则不要过度担心您不会触及的旧文件中的标签。
Here is a list of tags that should not be closed in HTML5:
以下是不应在 HTML5 中关闭的标签列表:
<br> <hr> <input>
<img> <link> <source>
<col> <area> <base>
<meta> <embed> <param>
<track> <wbr> <keygen> (HTML 5.2 Draft removed)
回答by Md. A. Barik
The best use of tags you should use:
您应该使用的标签的最佳用途:
<img src="" alt=""/>
Also you can use in HTML5:
您也可以在 HTML5 中使用:
<img src="" alt="">
These two are completely valid in HTML5 Pick one of them and stick with that.
这两个在 HTML5 中完全有效 选择其中一个并坚持下去。
回答by PLB
Both the right answer. HTML5 follows strict rules and in HTML5 we can close all the tags. So, it depends on you to use HTML5 or HTML and follow an appropriate answer.
两者都是正确的答案。HTML5 遵循严格的规则,在 HTML5 中我们可以关闭所有标签。因此,这取决于您使用 HTML5 或 HTML 并遵循适当的答案。
<img src='stackoverflow.png'>
<img src='stackoverflow.png' />
The second property is more appropriate.
第二个属性更合适。
回答by PLB
-The tag is Empty and it contains Attribute only. -The tag does not have 'Closing' tag.
- 标签为空,仅包含属性。- 标签没有“结束”标签。
So,
所以,
<img src='stackoverflow.png'>
<img src='stackoverflow.png' />
both are correct in HTML5 also.
两者在 HTML5 中也是正确的。
回答by AmateurD
It's helpful to have the closing tag if you will ever try to read it with an XHTML parser. Might be an edge case but I do it all the time. It does no harm having it, and means I know we can use an array of XML readers which won't keel over when they hit an unclosed tag.
如果您曾经尝试使用 XHTML 解析器阅读它,那么拥有结束标记会很有帮助。可能是边缘情况,但我一直这样做。拥有它并没有什么坏处,这意味着我知道我们可以使用一组 XML 阅读器,它们在遇到未关闭的标签时不会倒塌。
If you are never going to try to parse the content, then ignore the closing.
如果您永远不会尝试解析内容,请忽略结尾。