HTML - <script> 标签



HTML <script> 标签用于声明客户端脚本(JavaScript)。该标签可以包含指向包含脚本的外部文件的链接,也可以包含脚本本身。

脚本标签用于定义客户端脚本,用于图像处理、表单验证和动态内容更新。src 属性允许您指定外部文件的位置。HTML <script> 标签可以放置在<head><body> 元素中。虽然脚本在 HTML 文档中的位置不会影响其执行方式,但必须首先运行的脚本必须放置在文档的头部。一个 HTML 文档可以包含多个 <script> 标签。

语法

<script> .... </script>

属性

HTML 脚本标签支持全局属性,并接受一些特定的属性,如下所示。

属性 描述
async async 指定脚本异步执行。
crossorigin anonymous
use-credentials
定义对 HTTP CORS 请求的请求模式。
defer 声明脚本不会生成任何内容。因此,浏览器/用户代理可以继续解析和呈现页面其余部分。
nomodule true
false
指定在支持 ES6 模块的浏览器中不应执行脚本
integrity filehash 允许浏览器检查获取的脚本以确保代码在源代码被篡改的情况下永远不会加载。
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin
strict-origin-when-cross-origin
unsafe-url
指定在获取脚本时发送哪些推荐者信息
src 指定外部脚本的 URI/URL 路径。
type 将脚本语言指定为内容类型(MIME 类型)。

HTML 脚本标签示例

下面的示例将说明脚本标签的使用。在哪里、何时以及如何使用脚本标签。

使用脚本标签的内部 JavaScript

让我们看一下 <script> 标签的基本用法示例。在这里,我们通过脚本标签在内部使用了 javascript 代码。

<!DOCTYPE html>
<html>
<head>
   <title>HTML script Tag</title>
</head>
   <body style="background-color:#EAFAF1 ">
   <script type = "text/JavaScript">
      document.write("You're visiting tutorialspoint!")
   </script>
</body>
</html>

使用脚本标签的外部 JavaScript

考虑另一种情况,我们将要提及 <script> 标签在 <body> 标签之外。

<!DOCTYPE html>
<html>
<head>
   <script src="index.js" type="text/script"></script>
</head>
   <body>
   <h1>TutorialsPoint</h1>
</body>
</html>
// File Name- index.js 
document.write("You're visiting tutorialspoint!")

使用多个脚本标签

以下是一个示例,我们将为每个 JavaScript 代码使用多个 <script> 标签。此代码将生成输出,使脚本标签触发,显示两次警报,并在网页上显示文本。

<!DOCTYPE html>
<html>
<head>
   <script>
      alert('WELCOME TO')
   </script>
</head>
<body>
   <h2>The Best E-Way Learning.!</h2>
   <script>
      alert('TUTORIALSPOINT')
   </script>
</body>
</html>

支持的浏览器

标签 Chrome Edge Firefox Safari Opera
script
html_tags_reference.htm
广告