HTML 脚本标签

2025 年 3 月 25 日 | 阅读 6 分钟

标签是关键字的等价物，它描述了网页浏览器如何生成和呈现内容。像 JavaScript 这样的脚本可以使用 <script> 元素来包含。 <script> 标签的特性决定了该标签将如何执行。src 元素指定了外部脚本文件的路径，是 <script> 属性的一个例子。

语法

<script>  
  //code to be executed  
</script>

凭借这种强大的标签功能，开发人员可以轻松地将流行的库、插件和脚本添加到他们的 HTML 页面中以提高速度。这加快了开发速度，并促进了与其他程序员更好的调试和更有效的团队合作。

借助 <script> 标签，您可以将 JavaScript 文件或任何其他脚本语言添加到 HTML 文本中。为了避免重复编码并优化速度，请直接在此标签内插入代码，或使用外部文件并通过 src 属性引用它。

当 HTML 文件加载时，浏览器会解析脚本，从而使页面具有动态行为和交互性。例如，JavaScript 可以更新内容、响应用户输入并提供动画。

此外，高度灵活的 src 元素允许您为脚本代码使用外部资源。

现在让我们来看几个著名的脚本标签属性。

1. 脚本标签信息： 您可以使用脚本标签的多个特性来控制代码的加载和执行方式。这些特性包括：

HTML 脚本元素的放置位置。
它的操作（异步、稍后加载等）。浏览器在检索时应给予它何种优先级？
验证过程中应使用哪种加密哈希？
以及在启用阻塞或 nonce 的情况下。

所有这些特性都具有不同的功能，并能保持您网站的速度和安全性。下面展示了一些最受欢迎的脚本标签特性。

2. Async (异步)： 如果存在此属性，则布尔值为 true。async 属性指示浏览器异步下载此脚本，从而在不中断页面渲染的情况下下载。因此，您可以享受快速的性能。

3. Crossorigin (跨域)： 在从多个域加载脚本时，crossorigin 属性非常有用。对于来自外部域的脚本，浏览器默认不会在发送到 window.onerror 的错误消息中传递特定信息。但是，通过使用此功能，您可以启用对这些类型请求引起的任何问题的跟踪，从而提高您网站所有页面的用户体验和性能。

4. Defer (延迟)： 当此属性存在时，浏览器将推迟执行任何脚本，直到整个页面处理完毕。如果您在一个页面上有多个脚本，这尤其有用，因为它确保它们按照在 HTML 代码中出现的顺序执行。如果您不打算使用 src 属性，则不要使用此属性，因为内联脚本将不起作用。

5. Fetch Priority (获取优先级)： 为了提高效率，此功能使您能够在 Web 浏览器获取脚本源时为其设置优先级。请求的优先级可以根据多种因素进行更改，包括同时请求的资源的大小和数量，以及网络状态。

High (高)： 此信号指示对外部脚本的高优先级调用，应优先于其他获取请求。
Low (低)： 与其他外部脚本相比，信号的获取优先级不高。
Auto (自动)： 信号在发送时会自动确定外部脚本相对于其他脚本的获取优先级。

6. Integrity (完整性)： 通过使用此功能，您可以向浏览器提供脚本资源的加密哈希，以验证其在下载过程中未被篡改。这确保了您的脚本得到适当的保护，并且可以安全使用。

7. Nomodule (非模块)： 脚本的 nomodule 属性允许开发人员告诉现代浏览器不要运行其脚本。它最近被包含在 HTML5 中。如果您编写的代码只需要在旧式 Web 浏览器中运行，并且不符合 ECMAScript 模块规范，那么这一点尤其有用。

8. Nonce (一次性随机数)： Nonce 表示一个数字的一次性使用。使用此功能，您可以生成一个随机的一次性字符串（通常称为“nonce”），该字符串可验证脚本在下载过程中未被修改。然后，此唯一标识符将包含在您响应的 Content Security Policy 标头中，任何 Web 浏览器都会对其进行验证。有了这种安全保护，您可以确信在传输过程中没有发生任何有害的更改。

Referrer Policy (引用者策略)

使用此功能，您可以修改 Referrer-Policy 响应标头，该标头决定在请求脚本时如何传递任何引用数据。

No-referrer (无引用者)： 不会传递任何引用者标头。
No-referrer-when-downgrade (降级时不传递引用者)： 如果源未使用传输层安全协议 (TLS，通常称为 HTTPS)，则不会传递 Referer 标头。
Origin (来源)： 只有其来源（包括协议、主机名和端口）将被允许包含在发送到服务器的引用者中。
Origin-when-cross-origin (跨域时传递来源)： 作为一项安全措施，仅将方案、主机名和端口号包含在发送到外部源的引用者中。但是，它还将包含来自同一源页面的路径。
Same-origin (同源)： 引用者将包含在来自同一域的请求中。但是，不会将任何引用者信息与跨不同域的查询相关联。
Strict-origin (严格来源)： 在从 HTTPS 切换到另一个安全目标时，将文档的来源作为引用者的一部分进行传递。如果您切换到 HTTP，则不发送引用者。
Strict-origin-when-cross-origin (跨域时严格传递来源)： 在发送同源请求时，提供完整的 URL。仅当两个目标使用相同级别的安全性（例如，HTTPS 和 HTTPS）时，才发送来源。最后，在访问安全性较低的网站时，避免包含标头（例如，HTTPS）。
Unsafe-URL (不安全 URL)： 引用者包含路径和来源，但不包含用户名、密码或片段。此值将安全的 TLS 源的来源和路径暴露给不安全的位置，因此很危险。
Src (源)： 此属性指定了必需的外部脚本资源的精确位置。这是嵌入脚本直接在您的文本中一个很好的替代方法。
Type (类型)： 该属性明确定义了脚本的类型，通常是 text/javascript。type 属性必须向浏览器提供有关如何处理您的脚本的明确指令。
如果您省略此属性、将其设置为空字符串或使用 JavaScript MIME 类型，浏览器将知道您的脚本包含传统的 JavaScript 代码。这使得您的脚本更易于解释和处理。
Blocking (阻塞)：此参数用于描述脚本的加载和执行方法。在脚本获取期间，某些操作会被阻塞。

现在我们了解了脚本标签的特性，让我们来看一些示例。

使用脚本标签

HTML 脚本标签可以通过两种方式应用：

连接脚本文件
嵌入脚本代码
脚本代码嵌入
脚本标签可以在 body 或 head 标签中包含脚本代码。

让我们看一个包含脚本元素的 HTML body 的示例。