HTML <script> 标签

HTML <script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言。

实例

在 HTML 页面中插入一段 JavaScript：

<!DOCTYPE html>
<html>
<body>
<h1>script 元素</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>

定义和用法

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

浏览器支持

元素
<script>	Yes	Yes	Yes	Yes	Yes

所有浏览器都支持 <script> 标签。

提示和注释：

注释：假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<frameset> 标签之后的脚本会被忽略。

提示：请参考 noscript 元素；

对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，script 元素的 "language" 属性不被建议使用。

在 XHTML 1.0 Strict DTD 中，不支持 script 元素的 "language" 属性。

HTML 4 和 XHTML 在处理脚本中的内容方面有所不同：

在 HTML 4 中，内容类型声明为 CDATA，就是说不会对实体进行解析。

在 XHTML 中，内容类型声明为 (#PCDATA)，也就是说会对实体进行解析。

这意味着，在 XHTML 中，应该编码所有特殊的字符，或者把所有内容嵌套在 CDATA 部分中。

为了确保在 XHTML 文档中脚本正确进行解析，请使用如下语法：

<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>

必选的属性

属性	值	描述
type	MIME-type	该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型;支持的MIME类型包括：text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作JavaScript。

可选的属性

属性	值	描述
async	async	规定异步执行脚本（仅适用于外部脚本）。
charset	charset	如果存在，值必须和“utf-8”不区分大小写的匹配。当然声明 charset 是没有必要的，因为页面文档必须使用UTF-8，而 script 元素会从页面文档中继承这个属性。
crossorigin	anonymous use-credentials	将请求的模式设置为HTTP CORS请求。那些没有通过标准CORS (en-US)检查的正常script 元素传递最少的信息到 window.onerror。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。
defer	defer	这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。
integrity	filehash	包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据
nomodule	True False	这个布尔属性被设置来标明这个脚本在支持 ES2015 modules 的浏览器中不执行。实际上，这可用于在不支持模块化JavaScript的旧浏览器中提供回退脚本。
language	script	和type属性类似，这个属性定义脚本使用的语言。但是与type不同的是，这个属性的可能值从未被标准化过。请用type属性代替这个属性。
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url	指定获取脚本时要发送的引用程序信息。
src	URL	这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。
text	text	和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性在节点插入到DOM之后，此属性被解析为可执行代码。
xml:space	preserve	规定是否保留代码中的空白。

其中 async 属性

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

全局属性