点此查看所有教程、项目、源码导航文章目录1. 前言2. 内嵌式 JS3. 行内式 JS4. 外部 JS 文件引入5. 三种引入方式对比6. 小结1. 前言前面我们已经认识了script标签知道网页可以运行 JavaScript 代码。在实际开发中JS 一共有三种引入方式分别是内嵌式、行内式、外部文件引入。本篇就把这三种方式一次性讲清楚同时说明各自特点与适用场景。2. 内嵌式 JS内嵌式就是直接把 JS 代码写在script开始和结束标签中间。script标签可以放在页面head或者body中。本段为 head 内内嵌 JS 完整示例代码。!DOCTYPE html html langzh-CN head meta charsetutf-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 langzh-CN head meta charsetutf-8 titlebody底部内嵌JS/title /head body p页面文字内容/p script alert(写在body末尾的JS); /script /body /html代码解释浏览器会先渲染页面所有 HTML 内容再执行 JS。开发中内嵌 JS 优先使用这种写法。3. 行内式 JS行内式 JS直接写在 HTML 标签的事件属性里面点击、鼠标悬浮这类场景可以使用。本段为行内式完整示例代码。!DOCTYPE html html langzh-CN head meta charsetutf-8 title行内JS示例/title /head body !-- onclick 点击事件引号内就是JS代码 -- button onclickalert(你点击了按钮)点我测试/button /body /html代码解释onclick 是点击事件当鼠标点击按钮时才会执行引号中的 JS 代码。重点说明行内式不推荐大量使用会把 HTML 结构和 JS 逻辑混在一起后期维护不方便只适合简单的测试场景。4. 外部 JS 文件引入外部引入将 JS 代码单独放到.js后缀的文件HTML 页面使用 script 标签的 src 属性引入文件和 link 引入外部 CSS 思路一致。先新建 demo.js 文件写入下面代码alert(外部JS文件加载成功);下面是 HTML 页面完整代码。!DOCTYPE html html langzh-CN head meta charsetutf-8 title外部引入JS/title !-- src填写js文件路径引入外部JS -- script srcdemo.js/script /head body p测试页面/p /body /html代码解释通过 src 属性指定 js 文件地址浏览器会读取外部文件并执行里面代码。重点说明script 标签一旦添加 src 属性标签内部写的 JS 代码不会生效不要混用。5. 三种引入方式对比内嵌式写在 script 标签内适合少量简单代码测试演示常用。行内式写在标签事件属性中结构与 JS 耦合不推荐项目大量使用。外部文件引入JS 独立成文件多个页面可以复用方便维护正式项目首选。6. 小结本篇我们学习 JS 三种引入方式内嵌式、行内式、外部文件引入。需要记住script 标签位置会改变 JS 执行时机带 src 的 script 标签内部代码无效企业开发项目优先选择外部 JS 文件引入。