HTML <script> 标签 详解
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 |
|
将请求模式设置为 HTTP CORS 请求。 |
defer | defer | 规定是否对脚本执行进行延迟,直到页面加载为止。 |
language | script | 不赞成使用。规定脚本语言。请使用 type 属性代替它。 |
referrepolicy |
|
规定外部脚本文件的 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
本例演示如何对付不支持脚本的浏览器。