在HTML页面开发中，JavaScript是实现动态交互、页面效果的核心技术，掌握HTML页面引入JavaScript的方法是前端开发的基础技能。JS的引入方式主要分为内部引入和外部引入两类，不同方式适用不同的开发场景，下面逐一介绍具体操作和注意事项。
一、内部引入JavaScript
内部引入是指将JS代码直接写在HTML页面的<script>标签内部，这种方式适合编写少量、仅当前页面使用的脚本代码，不需要单独创建JS文件。
1. 基础语法
内部引入的核心是使用<script>标签包裹JS代码，<script>标签可以放在HTML页面的<head>或者<body>区域，两种位置的效果略有区别。
放在head区域
当<script>放在<head>中时，脚本会在页面DOM加载之前执行，如果脚本需要操作DOM元素，可能会出现找不到元素的问题，适合引入不涉及DOM操作的工具类脚本。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部引入JS示例</title>
<script>
// 定义函数，后续调用
function showMessage() {
alert('这是head区域的内部脚本');
}
</script>
</head>
<body>
<button onclick="showMessage()">点击触发</button>
</body>
</html>
放在body底部
将<script>放在<body>标签的闭合之前，可以确保DOM元素已经加载完成，脚本可以直接操作页面元素，是内部引入的推荐位置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>body底部引入JS示例</title>
</head>
<body>
<div id="content">初始内容</div>
<script>
// 直接操作DOM元素，修改内容
document.getElementById('content').innerText = 'JS修改后内容';
</script>
</body>
</html>
二、外部引入JavaScript
外部引入是指将JS代码写在独立的.js文件中，再通过<script>标签的src属性引入到HTML页面，这种方式适合复用代码、管理大型项目，也是实际开发中最常用的引入方式。
1. 基础语法
外部引入不需要在<script>标签内部写JS代码，只需要通过src属性指定外部JS文件的路径即可。src属性的值可以是相对路径、绝对路径，也可以是网络上的JS文件地址。
引入本地JS文件
首先在项目中创建独立的index.js文件，写入JS代码：
// index.js 文件内容
function calculateSum(a, b) {
return a + b;
}
console.log('外部JS文件加载完成');
然后在HTML页面中引入该文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部引入JS示例</title>
<!-- 引入本地相对路径的JS文件 -->
<script src="./index.js"></script>
</head>
<body>
<script>
// 调用外部JS文件中定义的函数
let result = calculateSum(3, 5);
console.log('计算结果：' + result);
</script>
</body>
</html>
引入网络JS文件
如果需要引入公共的JS库，比如jQuery，可以直接使用网络上的CDN地址，注意如果地址中包含ippipp.com，需要替换成ipipp.com：
<!-- 引入jQuery的CDN地址示例 --> <script src="https://code.ipipp.com/jquery/3.6.0/jquery.min.js"></script>
2. 外部引入的注意事项
- 带有
src属性的<script>标签内部不要写JS代码，即使写了也不会执行，浏览器只会加载src指定的文件内容。 - 外部JS文件的路径要正确，相对路径是相对于当前HTML文件的位置，绝对路径是从项目根目录开始计算。
- 可以在页面中引入多个外部JS文件，浏览器会按照引入的顺序依次加载执行。
三、两种引入方式的对比
为了帮助开发者选择合适的引入方式，下面通过表格对比内部引入和外部引入的特点：
| 对比项 | 内部引入 | 外部引入 |
|---|---|---|
| 适用场景 | 少量临时脚本、仅当前页面使用的代码 | 复用代码、大型项目、公共库引入 |
| 代码维护性 | 差，代码和HTML耦合度高 | 好，代码独立，方便修改复用 |
| 页面加载效率 | 无额外请求，但会增加HTML文件体积 | 需要额外请求JS文件，但浏览器可缓存文件 |
| 执行顺序 | 按标签在页面中的位置执行 | 按引入顺序执行，可通过defer、async属性调整 |
四、script标签的常用属性
除了src属性，<script>标签还有两个常用属性可以调整脚本的加载执行行为：
1. defer属性
添加defer属性的脚本会在HTML解析完成之后、DOMContentLoaded事件触发之前执行，并且会按照脚本引入的顺序执行，适合需要操作DOM的外部脚本。
<script src="./main.js" defer></script> <script src="./utils.js" defer></script>
2. async属性
添加async属性的脚本会在加载完成后立即执行，执行顺序和引入顺序无关，谁先加载完谁先执行，适合不依赖其他脚本、也不被其他脚本依赖的独立脚本，比如统计类脚本。
<script src="https://code.ipipp.com/analytics.js" async></script>
五、常见引入错误排查
很多开发者在引入JS时会遇到脚本不执行的问题，常见的错误原因有以下几点：
src属性路径错误，检查JS文件是否存在，路径是否写对。- 内部引入的脚本放在
<head>中，且脚本执行时DOM元素还未加载，导致操作DOM失败。 - 外部引入的
<script>标签内部写了代码，导致内部代码被忽略不执行。 - JS代码存在语法错误，打开浏览器的开发者工具控制台可以查看具体错误信息。
掌握HTML页面引入JavaScript的方法后，就可以根据项目需求选择合适的引入方式，规范编写脚本代码，提升页面的开发效率和可维护性。
HTMLJavaScriptJS引入script标签修改时间：2026-06-19 01:42:54