在网页开发过程中，很多功能需要通过JavaScript实现，而JavaScript代码需要连接到HTML文件中才能生效，掌握html连接js的方法是前端开发的基础技能。
html连接js的核心方式
html连接js主要通过<script>标签实现，根据js代码的位置不同，可以分为内部引入和外部引入两种主流方式，下面分别介绍具体的操作步骤。
1. 内部引入js
内部引入是指将JavaScript代码直接写在HTML文件的<script>标签内部，适合少量js代码的场景，操作步骤非常简单。
首先在HTML文件中需要插入js代码的位置添加<script>标签，然后将js代码写在标签内部即可。<script>标签可以放在<head>标签内，也可以放在<body>标签的底部，不同位置会影响js代码的执行时机。
以下是内部引入js的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部引入js示例</title>
<!-- 放在head内的script标签 -->
<script>
// 定义函数
function showMessage() {
alert('这是内部引入的js代码');
}
</script>
</head>
<body>
<button onclick="showMessage()">点击触发js</button>
<!-- 放在body底部的script标签 -->
<script>
console.log('body底部的js代码执行了');
</script>
</body>
</html>
2. 外部引入js
外部引入是指将JavaScript代码写在独立的.js文件中，然后通过<script>标签的src属性引入到HTML文件中，这种方式适合js代码较多、需要复用的场景，也是实际开发中最常用的方式。
外部引入js的具体步骤如下：
- 第一步：创建独立的.js文件，比如命名为main.js，将需要使用的js代码写入该文件。
- 第二步：在HTML文件中需要引入js的位置添加
<script>标签，设置src属性为.js文件的路径。 - 第三步：确保.js文件路径正确，浏览器加载HTML时会自动请求对应的js文件并执行其中的代码。
以下是外部引入js的示例代码：
首先是独立的main.js文件内容：
// main.js文件内容
function calculateSum(a, b) {
return a + b;
}
// 页面加载完成后执行
window.onload = function() {
let result = calculateSum(10, 20);
console.log('计算结果：' + result);
};
然后是引入该js文件的HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部引入js示例</title>
<!-- 引入外部js文件，路径为相对路径 -->
<script src="./main.js"></script>
</head>
<body>
<p>查看控制台可以看到js执行的结果</p>
</body>
</html>
两种引入方式的注意事项
在使用<script>标签连接js时，有一些细节需要注意，避免出现问题。
script标签的位置影响
如果<script>标签放在<head>中，浏览器会先加载并执行js代码，再渲染页面内容，如果js代码需要操作DOM元素，可能会出现找不到元素的问题。因此如果js需要操作DOM，建议将<script>标签放在<body>标签的底部，或者使用DOMContentLoaded事件等待DOM加载完成后再执行js代码。
外部引入的src属性
当<script>标签设置了src属性引入外部js文件时，标签内部不能再写其他的js代码，浏览器只会加载src指定的文件，忽略标签内部的内容。如果需要同时引入外部js和写内部js，需要分开使用两个<script>标签。
路径问题
外部引入js时，src属性的路径需要正确，相对路径是相对于当前HTML文件的位置，绝对路径可以是完整的网址，比如引入公共cdn的js库时可以使用绝对路径。如果路径错误，浏览器会无法加载js文件，导致相关功能失效。
不同场景的选择建议
如果是简单的测试或者只有几行js代码，使用内部引入的方式更方便，不需要额外创建文件。如果是正式的项目开发，js代码较多，或者多个页面需要共用同一份js代码，优先选择外部引入的方式，这样便于代码的维护和复用，也符合前端工程化的规范。
另外，如果引入的是第三方js库，比如jQuery等，通常使用外部引入的方式，直接使用官方提供的cdn地址或者下载到本地后引入即可。
HTMLJavaScriptjs引入方式script标签修改时间：2026-06-13 03:12:31