<script src="foo.js"></script> 和 <script src="foo.js"/> 的区别?

IT技术 javascript html conventions
2021-01-14 02:42:21

这两种将 javascript 拉入页面的方式有什么区别?

<script src="foo.js"></script>

对比:

<script src="foo.js"/>

script 标签不会有子标签,所以没有必要将开始和结束标签分开,对吗?就像如果表中有一个空行,你可以<tr/>代替<tr></tr>? 还是我离基地很远?

2个回答

简而言之,第一个是正确的,第二个不是,并且会导致您的页面无法正确呈现。

script元素不允许自终止。它必须有一个明确的结束标签。如果省略,浏览器会认为它后面的一切仍然是JavaScript而不会正确处理。

通过这个简单的例子你自己看看。这是 的第二种方法<script src="foo.js"/>

<!doctype html>
<html>
 <head>
   <script src="doesntmatter.js" />
   <title>Hello</title>
 </head>
 <body>
   <h1>Do you see me?</h1>
 </body>
</html>

现在是正确的版本<script src="foo.js"></script>

<!doctype html>
<html>
 <head>
   <script src="doesntmatter.js"></script>
   <title>Hello</title>
 </head>
 <body>
   <h1>Do you see me?</h1>
 </body>
</html>

的自终止 (XHTML) 语法<element />只能用于元素(禁止内容模型的元素- 即没有为它们定义结束标记,不是可以有内容的元素但您刚刚决定不给它任何)。

您可能不会将此语法用于为它们定义了结束标签的标签的便利。

允许自终止语法的标签示例是(来自MDN):

  • <area>
  • <base>
  • <br>
  • <col>
  • <colgroup> 当存在跨度时
  • <command>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <keygen>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <track>
  • <wbr>

就个人而言,这些年来,我与 Stack Overflow 的其他成员就有关使用自终止元素的最佳实践进行了几次激烈的辩论(事实上就在今天)。

我经常听到的论点是使用它们可以使代码更清晰。但是,这怎么可能,因为为了使用它们,您必须知道在何处使用它们是可以接受的。而且,如果您知道这一点,那么当您看到类似 的内容时<br>代码也同样清晰,因为您已经知道<br>它不会被关闭!

然后争论就变成了,“好吧,这不是为了让代码对我更清晰,而是为了其他人,他们可能不知道代码<br>不应该被关闭。” 这里的反驳是,如果他们不知道哪些标签应该关闭,哪些不应该关闭,他们将在错误的地方使用这种语法(这一事实毫无疑问,正如你的问题和许多其他问题所证明的那样)喜欢它)!

最后一个论点是,使用这种语法使代码成为有效的 XML,这是构建所有 HTML 的好方法,以防万一您的 HTML 需要被解析为 XML。嗯,这是一个有效的观点。但是,对于如今的大多数用例,我们真的在使用 XHTML 吗?当然,可能在某些环境中这仍然有意义,但由于 JSON,它肯定不在主流中。因此,推荐这种语法作为最佳实践是没有必要的。

我强烈反对在非 XML 应用程序中使用自终止元素。使用它们不会给您带来任何好处,而且如您所见,可能会导致代码中出现错误。

第二个无效,你需要一个结束标签

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script