HTML script - 绿叶网

在 HTML 中，script 标签主要有 2 个作用：一是定义页面的 JavaScript 代码，二是引入外部 JavaScript 文件。

语法：

<script>
    /* 这里写JavaScript代码 */
</script>

<script src="外部JavaScript文件路径"></script>

说明：

需要注意的是，在最新的 HTML5 标准中，script 标签不需要加上 type="text/javascript" 属性。下面 2 种写法是等价的，推荐写法 1。

<!--写法1-->
<script>
    ……
</script>

<!--写法2-->
<script type="text/javascript">
    ……
</script>

示例：在 script 中编写 JavaScript 代码

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function() {
                alert("欢迎来到绿叶网！");
            }
        }
    </script>
</head>
<body>
    <button id="btn">登录</button>
</body>
</html>

默认情况下，页面效果如下图 1 所示。单击【登录】按钮之后，会弹出一个对话框，如下图 2 所示。

HTML script标签示例

HTML script实现的对话框效果

分析：

这里涉及了 JavaScript 的语法，初学 HTML 的小伙伴简单了解即可，暂时不用深究。在 JavaScript 教程中，我们会详细学习到。