编辑“︁HTML脚本标签”︁（章节）

= HTML脚本标签 =

'''HTML脚本标签'''（<code>&lt;script&gt;</code>）是HTML中用于嵌入或引用客户端脚本（如JavaScript）的核心元素。它允许开发者直接在HTML文档中编写脚本代码或链接外部脚本文件，从而实现动态交互、数据处理和页面行为控制。

== 基本语法 ==

脚本标签有两种主要使用方式：

=== 内联脚本 ===
直接在HTML文件中编写JavaScript代码：
<syntaxhighlight lang="html">
<script>
    // JavaScript代码
    alert("Hello World!");
</script>
</syntaxhighlight>

=== 外部脚本 ===
通过<code>src</code>属性引用外部.js文件：
<syntaxhighlight lang="html">
<script src="script.js"></script>
</syntaxhighlight>

== 关键属性 ==

{| class="wikitable"
|+ 主要属性说明
! 属性 !! 描述 !! 示例
|-
| <code>src</code> || 指定外部脚本URL || <code>&lt;script src="app.js"&gt;&lt;/script&gt;</code>
|-
| <code>type</code> || 定义脚本MIME类型（默认text/javascript） || <code>&lt;script type="module"&gt;</code>
|-
| <code>async</code> || 异步加载脚本（仅外部脚本） || <code>&lt;script async&gt;</code>
|-
| <code>defer</code> || 延迟执行直到文档解析完成 || <code>&lt;script defer&gt;</code>
|}

== 加载行为控制 ==

<mermaid>
graph TD
    A[开始解析HTML] --> B{遇到script标签}
    B -->|无async/defer| C[停止解析<br>下载并执行脚本]
    B -->|有async| D[异步下载<br>下载完成后立即执行]
    B -->|有defer| E[异步下载<br>DOM解析后顺序执行]
</mermaid>

* '''阻塞行为'''：默认情况下，脚本会阻塞HTML解析
* '''async'''：下载不阻塞，执行会阻塞
* '''defer'''：既不阻塞下载也不阻塞解析

== 实际应用示例 ==

=== 表单验证 ===
<syntaxhighlight lang="html">
<form id="loginForm">
    <input type="email" id="email" required>
    <button type="submit">登录</button>
</form>

<script>
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        const email = document.getElementById('email').value;
        if (!email.includes('@')) {
            e.preventDefault();
            alert('请输入有效的电子邮件地址');
        }
    });
</script>
</syntaxhighlight>

=== 动态内容加载 ===
<syntaxhighlight lang="html">
<div id="news-feed"></div>

<script>
    fetch('https://api.example.com/news')
        .then(response => response.json())
        .then(data => {
            document.getElementById('news-feed').innerHTML = 
                data.map(item => `<article><h3>${item.title}</h3></article>`).join('');
        });
</script>
</syntaxhighlight>

== 模块化脚本 ==

ES6模块的使用示例：
<syntaxhighlight lang="html">
<script type="module">
    import { calculate } from './math.js';
    console.log(calculate(10, 20));
</script>
</syntaxhighlight>

== 性能优化建议 ==

* 将脚本放在<code>&lt;body&gt;</code>底部，除非需要提前执行
* 对非关键脚本使用<code>async</code>或<code>defer</code>
* 合并多个脚本文件减少HTTP请求
* 使用模块化组织代码结构

== 数学公式示例 ==

当需要在脚本中实现数学计算时：
<math>
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi
</math>

== 浏览器兼容性 ==

所有现代浏览器都完全支持<code>&lt;script&gt;</code>标签，但需要注意：
* IE8及以下版本不支持<code>async</code>
* 模块系统(<code>type="module"</code>)需要现代浏览器支持

== 安全注意事项 ==

* 避免使用<code>document.write()</code>在已加载的文档中
* 对动态插入的脚本内容进行消毒处理
* 使用内容安全策略(CSP)限制脚本来源

== 参见 ==

* [[JavaScript基础]]
* [[DOM操作]]
* [[异步JavaScript]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML与JavaScript交互]]