HTML基础：脚本 script 标签

你好，我是云桃桃。

1枚程序媛，大专生，2年时间从1800到月入过万，工作5年买房。分享成长心得。

255篇原创内容-公众号

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

脚本标签是 HTML 中的一种元素，用于在网页中嵌入脚本代码，主要作用是加载和执行 JavaScript 代码。通过脚本标签，可以实现对网页的交互性、动态性和功能性的增强。

那比如，从功能性来说，我们填写一个用户名，密码的表单，直接点提交，我们可以做到校验给予提示。

在 HTML 页面上，通常有两种脚本标签用于加载和执行 JavaScript 代码：

1、<script> 标签： 这是最常见的脚本标签，用于在 HTML 页面中嵌入 JavaScript 代码。它可以放置在 <head> 或 <body> 中，用于在页面加载时或页面中的特定位置执行脚本。

2、<noscript> 标签： 这个标签用于提供在浏览器不支持 JavaScript 或用户禁用 JavaScript 时的替代内容。在没有 JavaScript 的情况下，<noscript> 中的内容将会被显示。

这两个标签在 HTML 页面中用于管理和处理 JavaScript 脚本的加载和执行。

实例

1、script 标签

当我们在 HTML 页面上插入 JavaScript 脚本时，可以使用 <script> 标签来实现。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>JavaScript 示例</h1>

    <!-- 在这里插入 JavaScript 代码 -->
    <script>
      // 使用 document.write() 在页面上打印 "Hello, World!"
      document.write('Hello, World!')
    </script>
  </body>
</html>

在这个示例中，我们将 JavaScript 代码嵌入到了 <script> 标签内部，并使用 document.write() 方法在页面上打印出 "Hello, World!"。当浏览器加载这个页面时，就会执行 <script> 标签内的 JavaScript 代码，并在页面上输出 "Hello, World!"。

2、noscript 标签

当浏览器不支持 JavaScript 或者用户禁用了 JavaScript 时，可以使用 <noscript> 标签来提供一些备用内容。下面是一个简单的示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NoScript 示例</title>
  </head>
  <body>
    <h1>JavaScript 示例</h1>

    <!-- JavaScript 代码 -->
    <script>
      // 使用 document.write() 在页面上打印 "Hello, World!"
      document.write('Hello, World!')
    </script>

    <!-- 当浏览器不支持 JavaScript 时显示的备用内容 -->
    <noscript>
      <p>您的浏览器不支持 JavaScript，无法显示页面内容，请启用 JavaScript 或使用支持 JavaScript 的浏览器访问。</p>
    </noscript>
  </body>
</html>

在这个示例中，如果浏览器不支持 JavaScript 或者用户禁用了 JavaScript，<noscript> 标签内的内容就会被显示出来，提醒用户启用 JavaScript 或者使用支持 JavaScript 的浏览器。

那我们浏览器默认没有禁用，可以怎么演示呢？按照如图设置禁用 js。