在HTML中，脚本通常是通过<script>标签来嵌入或链接的。这些脚本通常使用JavaScript编写，但也可以是其他脚本语言。以下是一个HTML脚本的实例，演示了如何在HTML文档中嵌入和链接JavaScript脚本。
嵌入JavaScript脚本
你可以直接在HTML文档的<head>或<body>部分中嵌入JavaScript代码。这是通过<script>标签实现的，该标签可以包含直接在HTML文档中的JavaScript代码。
html复制代码
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>嵌入JavaScript脚本示例</title> |
|
</head> |
|
<body> |
|
|
|
<h1>欢迎来到我的网页！</h1> |
|
|
|
<!-- 嵌入JavaScript脚本 --> |
|
<script> |
|
// 当页面加载完成时执行的JavaScript代码 |
|
function onPageLoad() { |
|
alert("页面已加载完成！"); |
|
} |
|
</script> |
|
|
|
<!-- 在页面加载完成时调用onPageLoad函数 --> |
|
<body onload="onPageLoad()"> |
|
|
|
<p>这是一个嵌入JavaScript脚本的示例页面。</p> |
|
|
|
</body> |
|
</html> |
在这个例子中，<script>标签内定义了一个名为onPageLoad的函数，该函数会在页面加载完成时显示一个警告框。然后，通过body元素的onload属性，我们指定在页面加载完成后执行onPageLoad函数。
链接外部JavaScript文件
更常见的做法是将JavaScript代码保存在一个单独的文件中，然后通过<script>标签的src属性来链接这个文件。
html复制代码
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>链接外部JavaScript文件示例</title> |
|
</head> |
|
<body> |
|
|
|
<h1>欢迎来到我的网页！</h1> |
|
|
|
<!-- 链接外部JavaScript文件 --> |
|
<script src="script.js"></script> |
|
|
|
<p>这是一个链接外部JavaScript文件的示例页面。</p> |
|
|
|
</body> |
|
</html> |
假设你有一个名为script.js的JavaScript文件，它位于与HTML文件相同的目录中。这个文件可能包含以下代码：
javascript复制代码
|
// script.js 文件内容 |
|
function onPageLoad() { |
|
alert("页面已加载完成！"); |
|
} |
当浏览器加载HTML页面时，它会下载并执行script.js文件中的JavaScript代码。同样，你可以通过body元素的onload属性来指定在页面加载完成后执行onPageLoad函数。
异步和延迟脚本
你还可以使用async和defer属性来控制脚本的加载和执行时间。
·
async：脚本将异步加载并执行，这意味着脚本会在页面解析的同时加载，加载完成后立即执行，不保证脚本的执行顺序。
·
·
defer：脚本将延迟到文档解析完成之后，按照它们出现的顺序执行。这确保了脚本的执行顺序，但脚本的加载可能会与页面的解析同时进行。
·
html复制代码
|
<!-- 异步脚本 --> |
|
<script src="script1.js" async></script> |
|
|
|
<!-- 延迟脚本 --> |
|
<script src="script2.js" defer></script> |
这些属性允许你更好地控制脚本在页面加载和渲染过程中的行为。
