HTML 文档中的自闭合标签语法错误

Question

使用W3c.org HTML 验证器，今天我开始收到一个新错误，指示所有自关闭 HTML 标签存在问题。 错误是：

警告：广泛不鼓励文本/html 文档中的自闭合标记语法； 它是不必要的，并且与其他 HTML 功能（例如，未加引号的属性值）交互不良。 如果您使用的工具将自闭合标记语法注入所有 void 元素，但没有任何选项可以阻止它这样做，那么请考虑切换到其他工具。

有问题的 HTML 的示例之一是：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这是最近的变化吗？ 根据此更改关闭标签的最佳做法是什么？

Answer 1

今天早上也发生在我身上。 但是，解决方案很简单。 您所要做的就是从您的代码中删除/ 。 例如，而不是

<meta charset="UTF-8" />

写这个

<meta charset="UTF-8" >

要在您的文档中轻松解决此问题，请输入 select />并按Crtl+D 。

这将 select 所有引起警告的标签。 您可以通过这种方式轻松删除/ 。

Answer 2

在这种情况下，警告是误报。

它应该只适用于最后一个属性没有用引号括起来的情况。

这就是 W3c 所指的：考虑以下两种情况，为位于http://www.example.com/logo.svg的图像标记 img 元素：

• 没有尾部斜杠的 img 元素：

  <img alt=SVG src=http://www.example.com/logo.svg>

• 带有尾部斜杠的 img 元素：

  <img alt=SVG src=http://www.example.com/logo.svg/>

在第一种情况下（没有尾部斜杠），DOM 中的 src 属性的值变为http://www.example.com/logo.svg ，正如预期的那样。

然而，在第二种情况下（带有尾部斜线），DOM 中 src 属性的值意外地变为http://www.example.com/logo.svg/——这会中断图像的显示。

例子：

 <ul> <li>img element with trailing slash: <img alt=SVG src=https://www.w3.org/Icons/SVG/svg-logo.svg/> <li>img element without trailing slash: <img alt=SVG src=https://www.w3.org/Icons/SVG/svg-logo.svg> </ul>

资源

Answer 3

错误是

…警告，而不是错误。

这是最近的变化吗？

这不是我以前遇到过的警告，并且正在积极开发中，有一个与之相关的未解决问题，因此它可能是相当新的。

鉴于此更改，关闭标签的最佳做法是什么？

见仁见智。 警告给出了验证者作者的意见以及他们的理由。