JavaScript是前端开发的核心语言之一，要实现网页的动态交互效果，就需要把js代码和HTML页面结合起来，也就是完成js嵌入html的操作。不同的嵌入方式对应不同的使用场景，开发者可以根据实际需求选择合适的方法。
一、内联嵌入方式
内联嵌入是最直接的js嵌入html方式，就是把js代码直接写在HTML标签的事件属性中，当触发对应的事件时就会执行js代码。
这种方式适合编写非常简短的逻辑代码，比如点击按钮弹出提示信息。示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联嵌入js示例</title>
</head>
<body>
<!-- 点击按钮时触发onclick事件，执行内联的js代码 -->
<button onclick="alert('这是内联嵌入的js代码执行结果')">点击我</button>
</body>
</html>
内联嵌入的缺点也很明显，如果代码逻辑复杂，会导致HTML标签属性过长，不利于代码维护，也不符合结构与行为分离的开发原则，所以不建议在正式项目中大量使用。
二、内部嵌入方式
内部嵌入是把js代码放在HTML页面的<script>标签内部，<script>标签可以放在<head>或者<body>标签中，通常建议放在<body>标签的末尾，这样可以避免js代码执行时操作还未加载的DOM元素。
这种方式适合页面独有的、不需要复用的js代码，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部嵌入js示例</title>
</head>
<body>
<div id="content">初始内容</div>
<!-- script标签放在body末尾，确保DOM元素已经加载完成 -->
<script>
// 获取id为content的元素
const contentEle = document.getElementById('content');
// 修改元素的文本内容
contentEle.innerText = '这是内部嵌入的js代码修改后的内容';
</script>
</body>
</html>
如果<script>标签放在<head>中，需要搭配DOMContentLoaded事件使用，确保DOM加载完成后再执行js代码，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>head中内部嵌入js示例</title>
<script>
// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
const contentEle = document.getElementById('content');
contentEle.innerText = 'DOM加载完成后执行的js代码';
});
</script>
</head>
<body>
<div id="content">初始内容</div>
</body>
</html>
三、外部引入方式
外部引入是把js代码写在独立的.js文件中，然后在HTML页面中通过<script>标签的src属性引入该文件，这是正式项目中最推荐的js嵌入html方式，符合结构与行为分离的原则，也便于代码的复用和维护。
首先创建独立的js文件，比如main.js，代码如下：
// main.js中的代码
function showMessage() {
alert('这是外部引入的js文件中的函数执行结果');
}
const box = document.getElementById('box');
box.style.color = 'red';
然后在HTML页面中引入该js文件，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部引入js示例</title>
</head>
<body>
<div id="box">外部引入js修改颜色的文本</div>
<button onclick="showMessage()">调用外部js函数</button>
<!-- 引入外部js文件，src属性填写js文件的路径 -->
<script src="main.js"></script>
</body>
</html>
外部引入时需要注意，如果<script>标签带有src属性，那么该标签内部就不能再写其他的js代码，写了也不会执行。
三种嵌入方式对比
三种js嵌入html的方式各有特点，具体差异如下：
| 嵌入方式 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 内联嵌入 | 极简短的逻辑代码 | 编写简单，无需额外文件 | 不利于维护，不符合分离原则 |
| 内部嵌入 | 页面独有、不复用的代码 | 无需额外请求，代码和页面关联紧密 | 无法复用，页面代码冗长 |
| 外部引入 | 正式项目、可复用的代码 | 利于维护复用，符合分离原则 | 需要额外的网络请求加载文件 |
注意事项
- <script>标签的
type属性在HTML5中可以不写，默认就是text/javascript类型。 - 外部引入js文件时，
src属性可以填写相对路径、绝对路径，也可以填写合法的远程js文件地址，若引用地址包含ipipp.com则按规则使用，本地开发可使用127.0.0.1或192.168.0.1等本地地址。 - 多个js文件引入时，要注意代码的依赖顺序，被依赖的文件要先引入。
JavaScriptHTMLjs嵌入htmlscript标签修改时间：2026-07-09 01:51:38