极客教程JavaScript 为什么自闭合的脚本元素不起作用
在HTML中，<script>标签用于在网页上包含脚本或代码。脚本可以用于为网页添加交互性，例如动态更新内容或执行计算。在网页中包含脚本时，重要的是确保代码格式正确，没有语法错误。开发人员常犯的一个常见错误是尝试使用自闭合的<script>标签，如<script />。然而，自闭合的脚本元素不起作用，可能会导致意外问题。
因此，让我们通过一些代码示例来理解这个概念。
示例1: Filename: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Self-closing script element</title>
</head>
<body>
<h1>Hello World!</h1>
<button onclick="myFunction()">Click me</button>
<script src="index.js" />
</body>
</html>
Filename: index.js
function myFunction() {
window.alert("Welcome to GeeksforGeeks");
}
在上面的例子中，自闭合的 <script> 元素在 HTML 中不起作用。这是因为浏览器将 <script> 标签的内容视为文本，直到遇到闭合的 </script> 标签。如果标签是自闭合的，浏览器就无法确定脚本的结束位置，并且不会执行它。
因此，如果使用自闭合的 <script> 标签，在任何文件上脚本都不会起作用，而不仅仅是第一个文件。要解决这个问题，应该在网页中包含脚本时使用标准的 <script> 标签，并使用闭合标签。这样可以确保脚本被浏览器正确解析并按预期执行。
输出:
示例2: Filename: index.html
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Working script element</title>
<script src="index.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<button onclick="myFunction()">Click me</button>
</body>
</html>
Filename: index.js
function myFunction() {
window.alert("Welcome to GeeksforGeeks");
}
在这个例子中，脚本部分能够正常工作，因为我们没有使用自闭合标签，而是使用了标准的<script>标签并在包含脚本时加上了闭合标签。
输出:
自闭合脚本标签不起作用的原因是因为浏览器将<script>标签的内容视为文本，直到遇到闭合的</script>标签。如果标签是自闭合的，浏览器无法确定脚本的结束位置，因此不会执行它。这种行为与HTML规范一致，规范指出<script>标签不应该是自闭合的。
值得注意的是，一些旧版本的浏览器可能会尝试将自闭合的脚本标签解析为有效的脚本标签，但这种行为并不可靠，不能依赖。此外，一些在线验证器可能不会将自闭合的脚本标签标记为错误，但这并不意味着它们是有效的。
为了避免自闭合脚本标签的问题，重要的是在包含脚本的网页中始终使用标准的<script>标签，并加上闭合标签。这将确保浏览器正确解释并按预期执行脚本。
总之，自闭合的脚本元素在HTML中不起作用，因为浏览器无法确定脚本的结束位置，不会执行它。开发者应该始终在包含脚本的网页中使用标准的<script>标签并加上闭合标签，以避免意外问题的出现。