免费AI编程助手
HTML 脚本
HTML脚本
script元素可以包括您的页面中的脚本，在文档中内联定义或引用外部文件。
最常用的脚本类型是JavaScript。
对每个脚本使用一个script元素。
script元素具有局部属性: type，src，defer，async，charset 。
script 元素的开始和结束标记是必需的；即使引用外部JavaScript库时，也不允许使用自关闭标记。
在HTML5中， type 属性是可选的。在HTML5中添加了 async 和 defer 属性。
- type - 指定引用或定义的脚本的类型。对于JavaScript脚本，可以省略此属性。
- src - 指定外部脚本文件的URL。
- defer - 指定如何执行脚本。这些属性只能与
src属性结合使用。 - async - 指定如何执行脚本。这些属性只能与
src属性结合使用。 - charset - 指定外部脚本文件的字符编码。此属性只能与
src属性结合使用。
内联脚本
HTML页面中的JavaScript语句包含内联脚本。
<!DOCTYPE HTML>
<html>
<head>
<script>
document.write("This is from the script");
</script>
</head>
<body>
<p>This is a test.</p>
<a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
</body>
</html>
默认情况下，脚本在页面中遇到时立即执行。您通常使用 head 元素中的 script 元素，但您可以在HTML文档中的任何位置使用它。
外部脚本
您可以将脚本分成单独的文件，并使用script元素加载它们。
假设我们有一个名为 simple.js 的文件，其内容如下面代码所示。
document.write("This is from the external script");
该文件包含单个语句。然后，我们可以使用script元素中的 src 属性来引用此文件。
如果使用 src 属性，则脚本元素必须为空。您不能使用相同的脚本元素来定义内联脚本和外部脚本。
以下代码显示如何使用外部脚本。
<!DOCTYPE HTML>
<html>
<head>
<script src="simple.js"></script>
</head>
<body>
<p>This is a test.</p>
<a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
</body>
</html>
src 属性的值是要加载的脚本文件的URL。 simple.js 文件与HTML文件位于同一目录中。
需要脚本元素的结束标记，即使元素没有内容。如果在引用外部脚本时使用自动关闭标记，浏览器将忽略该元素，而不加载文件。
延迟脚本
你可以通过使用 async 和 defer 属性来控制脚本的执行。
defer 属性指示浏览器在页面加载和解析之前不执行脚本。
要了解defer属性的好处，让我们看看它解决的问题。
假设 simple2.js 脚本文件具有如下所列的单个语句。
document.getElementById("myID").innerText = "myValue";
当此脚本运行时，它将找到一个 id 属性值为 myID 的元素，并将该元素的内部文本更改为 myValue 。
以下HTML文档使用script元素引用脚本文件。
<!DOCTYPE HTML> <html> <head> <script src="simple2.js"></script> </head> <body> <p id="myID">This is a test.</p> </body> </html>
浏览器遇到script元素时的默认行为是停止处理HTML文档时，加载脚本文件并执行其内容。
这意味着浏览器在解析其余HTML之前加载并执行simple2.js中的语句，并发现了 p 元素。
脚本找不到所需的元素，因此不应用任何更改。
脚本完成后，浏览器继续解析HTML，并找到 p 元素。
要解决这个问题，请将script元素放在文档的末尾。
<!DOCTYPE HTML> <html> <body> <p id="myID">This is a test.</p> <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a> <script src="simple2.js"></script> </body> </html>
defer属性
在HTML5中，您可以通过使用 defer 属性来实现相同的效果。当浏览器遇到具有defer属性的脚本时，它会阻止加载和执行脚本，直到HTML文档中的所有元素都已解析为止。
<!DOCTYPE HTML> <html> <head> <script defer src="simple2.js"></script> </head> <body> <p id="myID">This is a test.</p> <a href="http://www.w3cschool.cn">www.w3cschool.cn</a> </body> </html>
您可以仅对外部脚本文件使用 defer 属性。它不工作的内联脚本。
异步脚本
遇到script元素时的默认浏览器行为是在加载和执行脚本时停止处理页面。
每个script元素按照它们定义的顺序同步执行，当脚本加载和运行时，不会发生其他事情。
您可以使用async 属性来提高性能。例如，可以异步地执行不与HTML文档中的元素交互的自包含脚本。
当您使用 async 属性时，浏览器会异步加载和执行脚本，同时继续解析HTML中的其他元素，包括其他脚本元素。
以下代码显示了应用于脚本元素的 async 属性。
<!DOCTYPE HTML>
<html>
<head>
<script async src="simple2.js"></script>
</head>
<body>
<p>This is a test.</p>
<a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>
注意
具有async 属性的脚本可能不会按照它们的定义顺序执行。
这使得async特性不适用于依赖于由其他脚本定义的函数或值的脚本。
noscript元素
noscript 元素允许您向其显示内容已禁用JavaScript或正在使用浏览器的用户不支持它。
noscript 元素显示内容和说明，除非他们启用JavaScript，否则他们不能使用您的网站或网页。
以下代码显示了设置为显示简单消息的noscript 元素。
<!DOCTYPE HTML>
<html>
<head>
<script defer src="simple2.js"></script>
<noscript>
<h1>Javascript is required!</h1>
<p>You cannot use this page without Javascript</p>
</noscript>
</head>
<body>
<p>This is a test.</p>
<a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
</body>
</html>
页面的其余部分正常处理，内容元素仍然显示。
您可以向页面添加多个noscript元素。
如果不支持JavaScript，您还可以将用户的浏览器重定向到其他网址，方法是将meta元素放在noscript元素中。
<!DOCTYPE HTML> <html> <head> <script defer src="simple2.js"></script> <noscript> <meta http-equiv="refresh" content="0; http://www.www.w3cschool.cn"/> </noscript> </head> <body> <p>This is a test.</p> <a href="http://www.w3cschool.cn">www.w3cschool.cn</a> </body> </html>
当不支持JavaScript或禁用JavaScript的浏览器时，这会将用户重定向到www.w3cschool.cn网站。
更多建议：