企业官网建设流程全解析

点此查看所有教程、项目、源码导航

1. 前言

前面我们已经认识了<script>标签，知道网页可以运行 JavaScript 代码。在实际开发中，JS 一共有三种引入方式，分别是内嵌式、行内式、外部文件引入。
本篇就把这三种方式一次性讲清楚，同时说明各自特点与适用场景。

2. 内嵌式 JS

内嵌式，就是直接把 JS 代码写在<script>开始和结束标签中间。<script>标签可以放在页面<head>或者<body>中。

本段为 head 内内嵌 JS 完整示例代码。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>内嵌JS示例</title> <script> // 内嵌JS，写在script标签内部 alert("head里面的内嵌JS"); </script> </head> <body> <p>页面文字内容</p> </body> </html>

代码解释：浏览器从上往下解析 HTML，读到 head 中的 script 标签，会立刻执行里面 JS 代码。此时 body 还没有加载，页面文字要等弹窗关闭之后才会显示。

推荐写法：把内嵌 script 放到 body 标签末尾。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>body底部内嵌JS</title> </head> <body> <p>页面文字内容</p> <script> alert("写在body末尾的JS"); </script> </body> </html>

代码解释：浏览器会先渲染页面所有 HTML 内容，再执行 JS。开发中内嵌 JS 优先使用这种写法。

3. 行内式 JS

行内式 JS，直接写在 HTML 标签的事件属性里面，点击、鼠标悬浮这类场景可以使用。

本段为行内式完整示例代码。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>行内JS示例</title> </head> <body> <!-- onclick 点击事件，引号内就是JS代码 --> <button onclick="alert('你点击了按钮')">点我测试</button> </body> </html>

代码解释：onclick 是点击事件，当鼠标点击按钮时，才会执行引号中的 JS 代码。
重点说明：行内式不推荐大量使用，会把 HTML 结构和 JS 逻辑混在一起，后期维护不方便，只适合简单的测试场景。

4. 外部 JS 文件引入

外部引入，将 JS 代码单独放到.js后缀的文件，HTML 页面使用 script 标签的 src 属性引入文件，和 link 引入外部 CSS 思路一致。

先新建 demo.js 文件，写入下面代码：

alert("外部JS文件加载成功");

下面是 HTML 页面完整代码。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>外部引入JS</title> <!-- src填写js文件路径，引入外部JS --> <script src="demo.js"></script> </head> <body> <p>测试页面</p> </body> </html>

代码解释：通过 src 属性指定 js 文件地址，浏览器会读取外部文件并执行里面代码。
重点说明：script 标签一旦添加 src 属性，标签内部写的 JS 代码不会生效，不要混用。

5. 三种引入方式对比

1. 内嵌式：写在 script 标签内，适合少量简单代码，测试演示常用。
2. 行内式：写在标签事件属性中，结构与 JS 耦合，不推荐项目大量使用。
3. 外部文件引入：JS 独立成文件，多个页面可以复用，方便维护，正式项目首选。

6. 小结

本篇我们学习 JS 三种引入方式：内嵌式、行内式、外部文件引入。
需要记住：

1. script 标签位置会改变 JS 执行时机；
2. 带 src 的 script 标签，内部代码无效；
3. 企业开发项目，优先选择外部 JS 文件引入。