跳到主要内容

HTML 脚本标签

介绍​

在HTML中，<script>标签用于嵌入或引用JavaScript代码。通过<script>标签，您可以在HTML文档中直接编写JavaScript代码，或者通过外部文件引入JavaScript代码。这使得HTML页面能够实现动态交互功能，例如表单验证、动态内容更新等。

备注

<script>标签可以放置在HTML文档的<head>或<body>部分，但通常建议将其放在<body>标签的末尾，以确保页面内容加载完成后再执行脚本。

基本语法​

<script>标签的基本语法如下：

html
<script>
  // 这里是JavaScript代码
</script>

或者通过src属性引用外部JavaScript文件：

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

示例：在HTML中嵌入JavaScript​

以下是一个简单的示例，展示了如何在HTML中嵌入JavaScript代码：

html
<!DOCTYPE html>
<html>
<head>
  <title>HTML脚本标签示例</title>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <button onclick="showMessage()">点击我</button>

  <script>
    function showMessage() {
      alert("你好，欢迎访问！");
    }
  </script>
</body>
</html>

在这个示例中，当用户点击按钮时，会弹出一个提示框显示“你好，欢迎访问！”。

脚本标签的位置​

1. 在<head>中嵌入脚本​

将<script>标签放在<head>部分时，脚本会在页面加载之前执行。这可能会导致页面加载速度变慢，因为浏览器需要先解析和执行脚本，然后再渲染页面内容。

html
<!DOCTYPE html>
<html>
<head>
  <title>脚本在head中</title>
  <script>
    alert("页面加载前执行的脚本");
  </script>
</head>
<body>
  <h1>页面内容</h1>
</body>
</html>

2. 在<body>末尾嵌入脚本​

将<script>标签放在<body>标签的末尾，可以确保页面内容加载完成后再执行脚本。这是推荐的做法，因为它可以提高页面加载速度。

html
<!DOCTYPE html>
<html>
<head>
  <title>脚本在body末尾</title>
</head>
<body>
  <h1>页面内容</h1>
  <script>
    alert("页面加载后执行的脚本");
  </script>
</body>
</html>

外部脚本文件​

当JavaScript代码较多时，通常建议将代码放在外部文件中，并通过<script>标签的src属性引入。这样做有助于保持代码的整洁和可维护性。

示例：引用外部JavaScript文件​

假设我们有一个名为script.js的外部JavaScript文件，内容如下：

javascript
function showMessage() {
  alert("这是来自外部文件的脚本！");
}

在HTML文件中引用该文件：

html
<!DOCTYPE html>
<html>
<head>
  <title>外部脚本示例</title>
</head>
<body>
  <h1>外部脚本示例</h1>
  <button onclick="showMessage()">点击我</button>

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

脚本标签的属性​

<script>标签支持多个属性，以下是一些常用的属性：

  • src：指定外部脚本文件的URL。
  • type：指定脚本的MIME类型，通常为text/javascript（默认值）。
  • async：指示脚本是否异步加载。
  • defer：指示脚本是否延迟执行，直到页面解析完成。

示例：使用async和defer属性​

html
<script src="script.js" async></script>
<script src="script.js" defer></script>
提示
  • async属性会使脚本在下载完成后立即执行，不保证执行顺序。
  • defer属性会使脚本在页面解析完成后按顺序执行。

实际应用场景​

1. 表单验证​

通过<script>标签嵌入JavaScript代码，可以实现表单验证功能。例如，检查用户输入的电子邮件格式是否正确：

html
<!DOCTYPE html>
<html>
<head>
  <title>表单验证示例</title>
</head>
<body>
  <form onsubmit="return validateForm()">
    <label for="email">电子邮件：</label>
    <input type="text" id="email" name="email">
    <input type="submit" value="提交">
  </form>

  <script>
    function validateForm() {
      const email = document.getElementById("email").value;
      if (!email.includes("@")) {
        alert("请输入有效的电子邮件地址！");
        return false;
      }
      return true;
    }
  </script>
</body>
</html>

2. 动态内容更新​

通过JavaScript，您可以动态更新页面内容。例如，点击按钮时更改页面文本：

html
<!DOCTYPE html>
<html>
<head>
  <title>动态内容更新示例</title>
</head>
<body>
  <h1 id="message">原始内容</h1>
  <button onclick="changeMessage()">更改内容</button>

  <script>
    function changeMessage() {
      document.getElementById("message").innerText = "内容已更新！";
    }
  </script>
</body>
</html>

总结​

<script>标签是HTML与JavaScript交互的核心工具。通过它，您可以在HTML页面中嵌入JavaScript代码，实现动态交互功能。无论是直接在HTML中编写脚本，还是引用外部脚本文件，<script>标签都提供了灵活的方式来增强网页的功能。

警告

在使用<script>标签时，请注意脚本的位置和加载顺序，以确保页面性能和用户体验。

附加资源与练习​

  • 练习1：尝试在您的HTML页面中嵌入一个简单的JavaScript脚本，点击按钮时显示当前日期。
  • 练习2：将JavaScript代码移到外部文件中，并通过<script>标签引用它。
  • 进一步学习：了解更多关于JavaScript的DOM操作和事件处理，以增强您的网页交互能力。

通过不断练习和探索，您将能够更好地掌握HTML与JavaScript的交互技巧！