HTML script 标签

HTML script 语法

在 HTML 中，script 标签主要有 2 个作用：一是定义页面的 JavaScript 代码，二是引入外部 JavaScript 文件。

语法：

<script>
    /* 这里写JavaScript代码 */
</script>

<script src="外部JavaScript文件路径"></script>

说明：

在最新的 HTML5 标准中，script 标签不需要加上 type="text/javascript" 属性。下面 2 种写法是等价的，推荐写法 1。

<!--写法1-->
<script>
    ……
</script>

<!--写法2-->
<script type="text/javascript">
    ……
</script>

提示: 我们可以使用 noscript 标签来定义在浏览器不支持 JavaScript 或禁用 JavaScript 的情况下要显示的备用内容。

HTML script 摘要

属于	HTML 标签
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML script 示例

接下来，我们通过几个简单的例子来讲解一下 HTML script 标签是如何使用的。

示例 1：script 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="btn">登录</button>
    <script>
        const oBtn = document.getElementById("btn");
        oBtn.addEventListener("click", function() {
            alert("欢迎来到绿叶网！");
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。单击【登录】按钮之后，会弹出一个对话框，如下图 2 所示。

HTML script标签示例效果1

HTML script标签示例效果2

分析：

在上面例子中，我们在 script 标签中来编写 JavaScript 代码。这里涉及了 JavaScript 的语法，初学 HTML 的小伙伴简单了解即可，暂时不用深究。在 JavaScript 教程中，我们会详细学习到。

示例 2：script 标签引入外部 JS 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/index.js"></script>
</head>
<body>
</body>
</html>

分析：

<script src="js/index.js"></script>

上面这句代码表示，使用 script 标签来引入路径为 “js/index.js” 这个外部 JavaScript 文件。

script 标签的 async 和 defer 属性

HTML5 为 script 标签新增了 2 个属性：async 和 defer。这 2 个属性的作用都是为了加快页面的加载速度，它们之间的区别如下。

defer：用于异步加载外部 JavaScript 文件，当异步加载完成后，该外部 JavaScript 文件先不会执行，而是等到整个 HTML 文档加载完成才会执行。
async：用于异步加载外部 JavaScript 文件，当异步加载完成后，该外部 JavaScript 文件会立即执行，即使整个 HTML 文档还没有加载完成。

defer 和 async 都是异步加载的，两者区别在于，异步加载外部 JavaScript 文件完成后何时执行。从上面也可以看出，defer 属性相对 async 属性来说，更符合大多数开发场景对脚本加载执行的要求。

示例 3：script 标签使用 defer 属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./js/defer.js" defer></script>
</head>
<body>
    <script>
        console.log("内部脚本");
    </script>
</body>
</html>

其中 defer.js 文件代码如下：

console.log("外部脚本");

控制台输出如下图所示。

HTML script标签的defer属性

分析：

正常情况，输出顺序应该是：“外部脚本→内部脚本”。但是由于 defer 属性用于异步加载外部 JavaScript 文件，当异步加载完成后，该外部 JavaScript 文件不会立即执行，而是等到整个 HTML 文档加载完成后才会去执行，因此输出顺序为：“内部脚本→外部脚本”。

ES6 模块化 (type="module")

在 Vue、React 等现代前端开发中，我们几乎都是在使用 “模块 (Modules) ” 的方式来引入.js文件。

语法：

<script type="module" src="main.js"></script>

说明：

type="module" 表示使用 “模块化” 的方式来导入.js文件。这种方式具有以下的特点：

默认延迟：type="module" 的脚本文件自动拥有 defer 特性，不会阻塞页面渲染。
严格模式：自动开启 JavaScript 的 “严格模式”，代码更加规范。
可以使用 import / export：允许你将代码拆分成多个文件进行管理。

示例 4：使用模块化方式

// utils.js
export function sayHello() {
    alert("Hello, Module!");
}

// main.js
import { sayHello } from "./utils.js";
sayHello();