偶然看到这个 Tag omission Must have a start tag and must not have an end tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#technical_summary
同类的还有 input
F12 查看渲染出来的 img 也是没有关闭的,所以我就去看了看几个常用的 UI 框架文档
https://ant.design/components/card-cn/ (关闭)
https://quasar.dev/vue-components/avatar (未关闭)
https://mui.com/zh/material-ui/react-image-list/ (关闭)
那么问题来了,既然都能正常渲染,到底谁才是对的?
1
wunonglin 2022-06-23 11:52:46 +08:00
不需要
|
2
kyuuseiryuu 2022-06-23 12:19:41 +08:00 via iPhone
应该
|
3
estk 2022-06-23 12:37:32 +08:00 via Android
vscode ,img 标签没有 alt 属性都给我 warning
|
4
marcong95 2022-06-23 14:17:55 +08:00
img 、input 这类的叫 Void Elements ,对于 HTML 不应闭合,但是 XHTML 、JSX 里必须闭合(所以你看的 UI 框架闭合的应该都是 React 的),Vue 的 Style Guide 没有特别强调,但是看 Style Guide 提及 <img> 的地方似乎都没有闭合
https://html.spec.whatwg.org/multipage/syntax.html#void-elements Void elements only have a start tag; end tags must not be specified for void elements. |
5
westoy 2022-06-23 14:24:04 +08:00
|
6
zsxeee 2022-06-23 15:20:31 +08:00 1
是 must not have "an end tag",指的是</img>这种。你说的是闭合标记,这个在 html 中是可选的。
|
7
dcsuibian 2022-06-23 15:36:35 +08:00
赞同#6 。
单标签都建议写成<br/>而不是<br>,养成习惯。 HTML 处理比较宽松,但不报错并不是说你就应该这么写。隔壁严谨的 XML 要气疯了,这样以后用上 JSX ( JavaScript XML )的时候也比较舒服。 而且,配合 IDE ,按 shift+. 你才能打出>,而按 /不是更方便么。 |
8
dcsuibian 2022-06-23 15:40:19 +08:00
顺便说一下,<script src="main.js"></script>这种标签,就算标签体里没有任何内容的,也绝不要写成单标签,会出错的。(原生 HTML 来说)
只有<img/>、<br/>这种标签体里永远没有内容的才写。 |
9
thunderw 2022-06-23 15:54:48 +08:00
HTML4 年代大家都是不关闭的。
关闭 img 应该是 XHTML 时代提出来的,参见 https://www.w3.org/TR/xhtml2/mod-image.html <img alt="W3C Logo" src="W3C.png">W3C</img> 到 HTML5 了就又不提倡关闭了 <img> <img /> 都无所谓了 |