JS的两种引入方式——内部形式，外部形式

最新推荐文章于 2025-07-02 11:56:04 发布

百无一用。

最新推荐文章于 2025-07-02 11:56:04 发布

阅读量2.9k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_50680475/article/details/121734847

本文介绍了JavaScript在HTML中的两种引入方式：内部形式和外部形式。内部形式是直接在HTML文件中使用script标签包裹JS代码；外部形式则是将JS代码写入单独的.js文件，然后通过script标签的src属性引用。注意，当script标签使用src属性时，其内部的代码将被忽略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript程序不能独立运行，他需要被嵌入HTML中，然后浏览器才能执行js代码。通过script标签将js代码引入到HTML中，有两种方式：

1，内部形式

通过script标签包裹JavaScript代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript 内部引入方式</title>
  </head>
  <body>
    <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
    <script>
      alert('hello world')
    </script>
  </body>
</html>

2，外部形式

一般将JavaScript代码写在独立的以 .js 结尾的文件中，然后通过script标签的src属性引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript 外部引入方式</title>
  </head>
  <body>
    <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
    <script src="./xxx.js"></script>
  </body>
</html>

***注意点：

如果script标签使用了src属性引入了某.js文件，那么标签的代码会被忽略！！！如下代码所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript 引入方式</title>
  </head>
  <body>
    <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
    <script src="./xxx.js">
       // 此处的代码会被忽略掉！！！！
      alert('hello world');
    </script>
  </body>
</html>