引入JS文件是网页开发中重要的一环，HTML通过引入JS文件来实现网页交互效果、动态数据加载等功能。本文将详细介绍HTML如何引入JS文件。
一、什么是JS文件
JS文件是JavaScript文件的简称，是一种网页编程语言。在HTML中，我们可以使用JS来操作网页对象，比如表单验证，事件触发，动态改变页面内容等等。JS文件通常是以.js为文件格式后缀名，也可放置在HTML文件内的<script>标签中。
二、JS文件的引入方式
在HTML中引入JS文件有以下几种方式：
1.使用<script>标签引入JS文件
在HTML文件中通过<script>标签来引入JS文件，通常在HTML文件的<head>标签或<body>标签内部添加<script>标签。<script>标签有两种方式引入JS文件，分别为内部引入和外部引入。
内部引入：
在HTML文件中通过<script>标签内部编写JS代码，代码与HTML标签共同放置在同一个文件中。当HTML文件加载时，JS代码也会随之加载。
<!-- 内部引入JS文件 -->
<script>
console.log("Hello, World!"); // JS代码
</script>
外部引入：
在HTML文件中通过<script>标签的src属性来引入外部JS文件。当HTML文件加载时会根据src属性的值把JS文件加载到当前HTML文件中。
<!-- 外部引入JS文件 -->
<script src="example.js"></script>
example.js为外部的JS文件，需在同级目录下，HTML文件就可以通过src属性进行连接。
2.使用link标签引入JS文件
除了通过<script>标签来引入JS文件，还可以使用<link>标签来引入JS文件。<link>标签通常用来引入CSS文件，但同样也可以用于JS文件的引入。
<link rel="stylesheet" type="text/js" href="example.js">通过rel属性来指定文件类型，href属性指向 JS 文件路径位置。
三、JS文件引入的位置
<script>标签可以放在HTML文件的两个位置：<head>标签中或<body>标签中。<head>标签中的<script>标签会在页面渲染前首先加载。而<body>标签中的<script>标签则会在页面渲染后加载。
通常为了提高页面加载速度，建议把JS文件放在<body>标签内的代码后面。接下来的代码将以这种方式进行演示。
四、JS文件引入的完整代码
以下是一个完整的HTML文件示例，其中引入了一个example.js文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML引入JS文件</title>
</head>
<body>
<h1>JS文件的引入方式</h1>
<script src="example.js"></script> <!-- 引入example.js文件 -->
<p>以上就是JS文件在HTML中的引入方式，非常简单是不是？</p>
</body>
</html>
总结
本文详细介绍了HTML如何引入JS文件。通过<script>标签或<link>标签来引入JS文件或放在HTML文件中内部的<script>标签中，还详细讲述了<script>标签与<link>标签的区别，以及JS文件的调用时机。了解HTML引入JS文件的方式及其相关知识，对于网页开发人员来说具有十分重要的意义。