小码哥的IT人生

HTML <script> 标签 详解

HTML基础 2022-06-02 09:42:47小码哥的IT人生shichen

HTML <script> 标签

实例

在 HTML 页面中插入一段 JavaScript:

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

 

完整实例【亲自试一试】:

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

(在本页底部可以找到更多实例)

定义和用法

<script> 标签用于定义客户端脚本,比如 JavaScript。

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

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

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

浏览器支持

元素 Chrome IE Firefox Safari Opera
<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 文档中脚本正确进行解析,请使用如下语法:

<script type="text/javascript"><![CDATA[
  document.write("Hello World!")
//]]></script>

属性

属性 描述
async async 规定异步执行脚本(仅适用于外部脚本)。
charset charset 规定在外部脚本文件中使用的字符编码。
crossorigin
  1. anonymous
  2. use-credentials
将请求模式设置为 HTTP CORS 请求。
defer defer 规定是否对脚本执行进行延迟,直到页面加载为止。
language script 不赞成使用。规定脚本语言。请使用 type 属性代替它。
referrepolicy
  1. no-referrer
  2. no-referrer-when-downgrade
  3. origin
  4. origin-when-cross-origin
  5. same-origin
  6. strict-origin
  7. strict-origin-when-cross-origin
  8. unsafe-url
规定外部脚本文件的 URL。
src URL 规定外部脚本文件的 URL。
xml:space preserve 规定是否保留代码中的空白。
type MIME-type 指示脚本的 MIME 类型。

全局属性

<script> 标签支持 HTML 中的全局属性

TIY 实例

完整实例【插入一段脚本】:

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例演示如何将脚本插入 HTML 文档。

完整实例【运行于不支持脚本的浏览器】:

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例演示如何对付不支持脚本的浏览器。

相关页面

教程:JavaScript 教程

相关页面

HTML DOM 参考手册:Script 对象

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024