HTML和JS是Web开发的两大核心。HTML是网页的“身体”，而JS则是网页的“大脑”，它们的合作可以让网页实现更复杂的功能。本文将重点介绍HTML引用JS的相关内容，帮助大家更好地理解和使用它们。
一、内联式引用JS
内联式引用JS需要在HTML标签内部添加JS代码。这种方式常用于处理一些简单逻辑，对于复杂的代码则不太适用。
<html>
<head>
<title>内联式引用JS</title>
</head>
<body>
<p onclick="alert('Hello world!')">点击这里</p>
</body>
</html>
上面这个例子，当你在网页中点击“点击这里”这个段落时，就会跳出一个包含“Hello world！”的对话框。
内联式引用JS的优势在于，代码简单易懂，使用方便快捷。不过，随着代码的逐渐复杂，内联式的实用性就会降低。
二、通过<script>标签引用JS
<script>标签是HTML中引用JS的主要方式，它将JS代码包含在HTML文档中，使得网页在加载时能够同时加载JS代码。通过<script>标签引用JS可以通过以下两种方式实现：
1、将JS代码放在<script>标签内部
<html>
<head>
<title>通过<script>标签引用JS</title>
<script>
function sayHello() {
alert('Hello world!');
}
</script>
</head>
<body>
<p onclick="sayHello()">点击这里</p>
</body>
</html>
在以上代码中，我们定义了一个名为“sayHello”的函数，并在网页中的段落中引用它。当你在网页中点击“点击这里”这个段落时，就会跳出一个包含“Hello world！”的对话框。
<script>标签的内部实现方式简单直接，但是缺乏代码的复用性。如果我们引用的JS代码比较大，这种方式会让我们的HTML文档变得十分臃肿。
2、通过<script>标签引用外部JS文件
为了解决上述问题，我们可以将JS代码单独保存为一个.js文件，然后通过<script>标签引用它。这样做有以下优点：
- 可以使HTML代码更加简洁，易于维护；
- 可以通过缓存提高网页的加载速度；
- 可以通过多个HTML文件共享同一份JS代码，提高代码的复用性。
下面是一个具体的例子：
在与HTML文件同级的目录下，新建一个名为“test.js”的文件。在该文件中编写以下代码：
function sayHello() {
alert('Hello world!');
}
接下来，我们在HTML中引用这个JS文件：
<html>
<head>
<title>通过<script>标签引用JS</title>
<script src="test.js"></script>
</head>
<body>
<p onclick="sayHello()">点击这里</p>
</body>
</html>
这种方式使得我们可以更好地管理JS代码，提高代码的复用性，也更容易进行协作开发。
三、<script>标签的位置和属性
以上我们已经知道了如何通过<script>标签引用JS。但是，<script>标签的位置和属性也非常重要。下面我们来详细解释一下：
1、<script>标签的位置
在HTML文档中，<script>标签应该放在<head>或<body>标签中。通常情况下，我们将JS代码放在<head>标签中，以便在网页加载时一并加载JS代码。但是，这种做法会影响网页的加载速度。
为了避免这种情况，我们可以将<script>标签放在<body>标签中，这样可以让网页更快地加载。然而，这种方法也会产生一些问题，比如可能会延迟JS代码的执行时间。
综合考虑，我们需要根据具体情况来选择<script>标签的位置。
2、<script>标签的属性
除了src属性之外，<script>标签还有很多其他可用的属性，例如async和defer。下面我们来一一解释一下：
（1）async属性
async属性用于异步加载外部JS脚本。它的作用是告诉浏览器，“在下载JS脚本的同时，不必等待它的加载和执行”，这样可以避免JS文件对网页加载速度的影响。同时，由于JS文件的加载和执行在异步加载过程中具有一定的随机性，所以可能会对网页产生一定的负面影响。
（2）defer属性
defer属性也用于异步加载外部JS脚本。它的作用与async类似，但有一些不同的地方。defer属性不会对网页加载速度产生影响，因为它会等到页面加载完毕之后再执行JS脚本。在较早的浏览器中，defer属性只支持外部JS文件；在现代浏览器中，它也适用于内联式JS脚本。
综上所述，<script>标签的位置和属性十分重要。在实际开发中，我们需要根据网页的具体情况来选择最合适的位置和属性。
四、结尾
本文主要介绍了HTML引用JS相关内容，包括内联式引用JS、通过<script>标签引用JS、<script>标签的位置和属性等。这些内容对于Web开发和前端工程师来说非常重要，在实践中需要深入理解和掌握。
