在HTML中，引用JavaScript（JS）文件是一种常见的做法，它使我们能够将JavaScript代码与HTML文档分离，提高代码的可维护性和可重用性。
在HTML中引用JS文件的方法有两种：内部引用和外部引用。
## 1. 内部引用JS文件
内部引用JS文件是指将JS代码直接写在HTML文件中的<script>标签内。这种方法适合于简单的JS代码或者项目较小的情况。
我们可以在<head>标签或者<body>标签中添加<script>标签，来引用JS文件。以下是内部引用JS文件的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>内部引用JS文件示例</title>
<script>
// 在这里写JS代码
function showGreeting() {
var greeting = "Hello, world!";
document.getElementById("greeting")[xss_clean] = "" + greeting + "";
}
</script>
</head>
<body>
<h2>内部引用JS文件示例</h2>
点击按钮显示问候语：
<button onclick=showGreeting()">显示问候语</button>
<p id="greeting"></p>
</body>
</html>
上述代码中，我们在<script>标签内定义了一个名为`showGreeting`的函数，用于在点击按钮时显示问候语。在HTML文档中，我们使用`onclick`属性将该函数与按钮的点击事件绑定在一起，当按钮被点击时，`showGreeting`函数被执行。
## 2. 外部引用JS文件
外部引用JS文件是将JS代码存放在独立的.js文件中，然后通过<script>标签的`src`属性引入文件。这种方法适合于复杂的JS代码或者需要在多个HTML文件中共享的情况。
为了外部引用JS文件，我们需要先创建一个.js文件，将JS代码保存在其中。假设我们的JS文件名为`script.js`，并且与HTML文件处于同级目录中。以下是外部引用JS文件的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>外部引用JS文件示例</title>
<script src="script.js"></script>
</head>
<body>
<h2>外部引用JS文件示例</h2>
点击按钮显示问候语：
<button onclick=showGreeting()">显示问候语</button>
<p id="greeting"></p>
</body>
</html>
上述代码中，我们使用<script>标签的`src`属性将`script.js`文件引入到HTML文档中。这样，在浏览器解析HTML文件时，会自动下载并执行`script.js`文件中的JS代码。
下面是`script.js`文件中的代码：
javascript
// script.js
function showGreeting() {
var greeting = "Hello, world!";
document.getElementById("greeting")[xss_clean] = "" + greeting + "";
}
与内部引用JS文件相比，外部引用JS文件具有更好的可重用性和可维护性。我们可以在多个HTML文档中共享同一个.js文件，减少了代码的冗余，同时也方便了后期的维护和调试。
总结：在HTML中引用JS文件的方法有内部引用和外部引用两种。根据具体的需求和项目规模，选择适合的引用方法。内部引用适用于简单的JS代码或者项目较小的情况，外部引用适用于复杂的JS代码或者需要在多个HTML文件中共享的情况。无论是哪种方法，通过将JS代码与HTML文档分离，可以提高代码的可维护性和可重用性。