HTML脚本标签[编辑 | 编辑源代码]

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

基本语法[编辑 | 编辑源代码]

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

内联脚本[编辑 | 编辑源代码]

直接在HTML文件中编写JavaScript代码：

<script>
    // JavaScript代码
    alert("Hello World!");
</script>

外部脚本[编辑 | 编辑源代码]

通过src属性引用外部.js文件：

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

关键属性[编辑 | 编辑源代码]

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

加载行为控制[编辑 | 编辑源代码]

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

实际应用示例[编辑 | 编辑源代码]

表单验证[编辑 | 编辑源代码]

<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>

动态内容加载[编辑 | 编辑源代码]

<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>

模块化脚本[编辑 | 编辑源代码]

ES6模块的使用示例：

<script type="module">
    import { calculate } from './math.js';
    console.log(calculate(10, 20));
</script>

性能优化建议[编辑 | 编辑源代码]

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

数学公式示例[编辑 | 编辑源代码]

当需要在脚本中实现数学计算时： $f (x) = \int_{- \infty}^{\infty} \hat{f} (ξ) e^{2 π i ξ x} d ξ$

浏览器兼容性[编辑 | 编辑源代码]

所有现代浏览器都完全支持<script>标签，但需要注意：

IE8及以下版本不支持async
模块系统(type="module")需要现代浏览器支持

安全注意事项[编辑 | 编辑源代码]

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

参见[编辑 | 编辑源代码]