HTML中script标签常见属性介绍

<script> 标签用于在 HTML 文档中嵌入或引用 JavaScript 代码。以下是 <script> 标签的常见属性及其作用：

1. src:

   • 作用: 指定外部 JavaScript 文件的 URL。
   • 示例: <script src="script.js"></script>
   • 说明: 当使用 src 属性时，<script> 标签内的内容会被忽略，浏览器会从指定的 URL 加载并执行 JavaScript 文件。

2. type:

   • 作用: 指定脚本的 MIME 类型。
   • 示例: <script type="text/javascript"></script>
   • 说明: 在现代浏览器中，type="text/javascript" 是默认值，通常可以省略。对于模块脚本，可以使用 type="module"。

3. async:

   • 作用: 指示浏览器异步加载并执行脚本。
   • 示例: <script src="script.js" async></script>
   • 说明: 使用 async 属性时，脚本会在下载完成后立即执行，不会阻塞 HTML 解析。多个 async 脚本的执行顺序不确定。

4. defer:

   • 作用: 指示浏览器延迟执行脚本，直到文档解析完成。
   • 示例: <script src="script.js" defer></script>
   • 说明: 使用 defer 属性时，脚本会在 HTML 解析完成后按顺序执行。多个 defer 脚本的执行顺序与它们在文档中的顺序一致。

5. crossorigin:

   • 作用: 控制跨域请求的 CORS 设置。
   • 示例: <script src="https://example.com/script.js" crossorigin="anonymous"></script>
   • 说明: 可以设置为 anonymous 或 use-credentials。anonymous 表示跨域请求不发送用户凭证（如 cookies），use-credentials 表示发送用户凭证。

6. integrity:

   • 作用: 提供脚本的完整性校验，确保脚本内容未被篡改。
   • 示例: <script src="script.js" integrity="sha256-..."></script>
   • 说明: 该属性值是一个基于内容的哈希值（如 SHA-256），浏览器会验证脚本内容的哈希值是否匹配，如果不匹配则不会执行脚本。

7. nomodule:

   • 作用: 指示脚本在不支持 ES 模块的浏览器中执行。
   • 示例: <script nomodule src="fallback.js"></script>
   • 说明: 该属性用于为不支持 type="module" 的旧浏览器提供回退脚本。

8. nonce:

   • 作用: 用于内容安全策略（CSP），指定脚本的唯一标识符。
   • 示例: <script nonce="random-value"></script>
   • 说明: 该属性值是一个随机生成的字符串，用于防止跨站脚本攻击（XSS）。

9. charset:

   • 作用: 指定脚本的字符编码。
   • 示例: <script charset="UTF-8"></script>
   • 说明: 该属性在现代开发中较少使用，因为大多数情况下字符编码由 HTTP 头或文档的 <meta> 标签指定。

10. language:

    • 作用: 指定脚本的语言（已废弃）。
    • 示例: <script language="JavaScript"></script>
    • 说明: 该属性在 HTML5 中已废弃，建议使用 type 属性。

这些属性可以帮助开发者更好地控制脚本的加载和执行行为，优化页面性能，并增强安全性。