当前位置：首页 > 文章列表 > 文章 > 前端 > HTML中script标签使用详解

HTML中script标签使用详解

2025-07-29 18:10:48 0浏览收藏

`标签之间。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的页面</h1>
    <button onclick="showAlert()">点我</button>

    <script>
        // 这是一段内联的JavaScript代码
        function showAlert() {
            alert('你点击了按钮！');
            console.log('按钮被点击了。');
        }
    </script>
</body>
</html>

这种方式适合代码量较小、特定页面独有的脚本。它的优点是请求少，但缺点也很明显：代码复用性差，维护困难，并且混合了HTML和JS，不利于内容与行为分离。

2. 外部脚本： 通过src属性链接到一个外部的JavaScript文件。这是更推荐的做法，特别是对于大型项目或需要复用的脚本。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的页面</h1>
    <button id="myButton">点我</button>

    <!-- 引用外部脚本文件 -->
    <script src="scripts/main.js"></script>
</body>
</html>

对应的scripts/main.js文件内容可能如下：

// scripts/main.js
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('myButton');
    if (button) {
        button.addEventListener('click', function() {
            alert('你点击了外部脚本控制的按钮！');
            console.log('外部脚本执行了。');
        });
    }
});

这种方式的好处是显而易见的：代码组织更清晰，易于维护和复用，而且浏览器可以缓存外部JS文件，提高加载速度。

除了src属性，