<script> 标签是 HTML 中用于嵌入或引用 JavaScript 代码的标签。它允许在网页中嵌入 JavaScript 代码，或引用外部的 JavaScript 文件。以下是对 <script> 标签的详细解释：
1. 基本用法
内嵌 JavaScript 代码： 你可以将 JavaScript 代码直接放在 <script> 标签内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Tag Example</title>
</head>
<body>
<script>
// JavaScript code here
console.log("Hello, World!");
</script>
</body>
</html>
引用外部 JavaScript 文件： 你可以使用 src 属性引用外部的 JavaScript 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External Script Example</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
2. 属性
src： 指定要引入的外部 JavaScript 文件的 URL。
<script src="path/to/your/script.js"></script>
type： 指定脚本的 MIME 类型。HTML5 中，type 属性是可选的，JavaScript 默认 MIME 类型是 text/javascript。
<script type="text/javascript" src="path/to/your/script.js"></script>
async： 表示脚本会异步加载。在脚本加载时，页面会继续渲染。
<script src="path/to/your/script.js" async></script>
defer： 表示脚本会延迟加载。在文档解析完成后执行脚本，保证脚本在 DOMContentLoaded 事件之前执行。
<script src="path/to/your/script.js" defer></script>
integrity： 用于确保脚本文件的完整性，防止被篡改。结合 crossorigin 属性使用。
<script src="path/to/your/script.js" integrity="sha384-..." crossorigin="anonymous"></script>
crossorigin： 指定跨源请求的策略，用于处理跨域资源共享（CORS）。可以是 anonymous 或 use-credentials。
<script src="path/to/your/script.js" crossorigin="anonymous"></script>
3. 加载顺序和执行时机
内嵌 <script> 标签的执行顺序：
- 默认情况下，脚本会按顺序执行，阻塞后续 HTML 的解析。
- 可以将
<script>标签放在</body>标签前，以确保在 DOM 完全加载后执行。
外部脚本的执行顺序：
- 默认情况下，外部脚本会在下载完成后立即执行，阻塞 HTML 解析。
- 使用
async或defer属性来改变默认的行为：async：脚本会异步加载，并在加载完成后立即执行，不保证执行顺序。defer：脚本会在文档解析完成后执行，保持顺序。
4. JavaScript 和 HTML 事件处理
可以在 <script> 标签内编写 JavaScript 代码来处理 HTML 事件，例如点击事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Handling Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
document.getElementById('myButton').addEventListener('click', () => {
alert('Button clicked!');
});
</script>
</body>
</html>
5. 脚本类型
HTML5 默认支持 text/javascript 类型，但你还可以使用其他 MIME 类型，例如：
- module：表示这是一个 JavaScript 模块（支持 ES6 模块化）。
<script type="module"> import { myFunction } from './myModule.js'; myFunction(); </script> - text/babel：用于 Babel 转换的脚本（如果你使用 Babel 转译器）。
<script type="text/babel"> // JSX code </script>
6. 内容安全策略 (CSP)
如果你在使用内容安全策略 (CSP)，可能需要特别注意 <script> 标签的设置。CSP 可以限制哪些源的脚本可以被加载。
示例 CSP 规则：
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
总结
<script> 标签是 HTML 中用于嵌入或引用 JavaScript 代码的关键元素。你可以使用它来嵌入脚本、引用外部脚本文件，并通过属性来控制脚本的加载和执行行为。理解这些用法可以帮助你更好地控制网页的脚本执行和资源管理。