将JavaScript代码存储在外部文件中，可以使得HTML页面更加清晰、易于维护，同时也能提高页面加载速度。以下是如何在外部HTML文件中调用JavaScript文件的详细步骤：
1. 创建JavaScript文件
首先，你需要创建一个JavaScript文件。这个文件可以命名为 script.js 或其他任何你喜欢的名字。将你的JavaScript代码放入这个文件中。
// script.js
console.log('Hello from external script!');
2. 将JavaScript文件保存到服务器上
确保你的JavaScript文件保存在服务器上的一个适当位置。通常，这个位置应该是在你的网站根目录下或者某个子目录中。
3. 在HTML文件中引入JavaScript文件
在HTML文件的 <head> 或 <body> 部分使用 <script> 标签引入你的JavaScript文件。这里有两种方法：
方法一：使用 <script> 标签的 src 属性
将JavaScript文件放在 <head> 或 <body> 的底部，并使用 src 属性指定文件路径。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>调用外部JavaScript文件</title>
</head>
<body>
<h1>这是标题</h1>
<script src="script.js"></script>
</body>
</html>
方法二：将JavaScript代码放在 <script> 标签内部
如果你的JavaScript代码很简单，可以直接在HTML文件中使用 <script> 标签来包含这些代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>调用外部JavaScript文件</title>
<script src="script.js"></script>
</head>
<body>
<h1>这是标题</h1>
</body>
</html>
注意事项：
- 使用
src属性引入JavaScript文件时，路径应该是相对于HTML文件的路径。例如，如果你的HTML文件位于根目录，而JavaScript文件位于同一目录下，则只需指定文件名即可。 - 如果JavaScript文件位于其他目录下，则需要指定正确的路径。例如，如果你的JavaScript文件位于名为
javascript的子目录中，则需要使用javascript/script.js作为路径。
4. 测试你的页面
现在，当你打开HTML文件时，你应该能在浏览器的控制台中看到来自外部JavaScript文件的输出：
Hello from external script!
这样，你就成功地在HTML文件中调用了外部JavaScript文件。