首页 » 编程语言 » html » 正文

HTML元素script标签的作用及用法

HTML 元素中<script> 标签的作用是用来在HTML文档中支持javascript脚本语言,有了JS脚本的支持,可以使得网页文档具有图像操作,表单验证以及其他动态交互作用!

<script> 标签的定义

<script> 标签用于定义当前网页文档的脚本语言,比如:JavaScript(简称JS);

<script> 标签引入脚本语言,可实现图像操作、表单验证以及更多其他动态交互作用;

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

一个html文档中,可以包含多个<script> 标签。

浏览器支持情况

<script> 标签现已被所有主流浏览器支持;

不同浏览器开始支持<script>标签的最低版本如下:

IE6.0、火狐Firefox9.0、Chrome4.0、Safari5.0、Opera11.1

<script> 标签的用法

用script标签引入JavaScript脚本(简称JS)有内联方式和外联方式两种,分别详述如下:

 1、内联方式

这种方式指的是在html文档中,将 JavaScript代码直接写在<script>和</scritp>标签之间。

内联语法:

<script type="text/javascript"> JS代码 </script>

type="text/javascript",在html5中是可选属性,可以省略不写,而在html4中,type是必选属性,不可省略!

内联演示

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>刘代码(liudaima.com)
</title> 
</head>
<body>
<script>document.write("刘代码博客欢迎您!")</script>
</body>
</html>

2、外联方式

外联方式是在html文档中,通过<script> 标签的src属性引入一个外部的JS文件

外联语法:

 <script type="text/javascript" src="外部js文件"></script>

使用了src属性引入外部JS文件,那么,<script> 元素内容就必须为空,即开始标签<script>和结束标签</scritp>之间不能有任何内容,即已经引入了外部JS文件,就不能再包括JS代码本身!

外联演示:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>刘代码(liudaima.com)
</title> 
</head>
<body>
 <script type="text/javascript" src="example.js"></script>
 </body>
</html>

<script>加载顺序

▶凡是不使用async或defer属性的<script> 标签,引用的 JS 都会按照引入的先后顺序依次被浏览器解析。

如果 <script> 标签放 HTML文档的头部head标签内,就会先解析完<script>元素内的JS代码后,才会继续解析后面其他内容!这样就会延迟body正文内容显示时间,甚至造成浏览器窗口一片空白,不利于用户阅读体验!

为了避免延时导致网页显示滞后的问题,可以将引入外部文件的<script> 标签从head头部区域移动到网页最后面,这样浏览器就会先解析完前面的html代码内容,然后才解析<script> 标签内的外部js文件!

▶如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)

▶如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行

提示:请参阅 <noscript> 元素,对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说,该元素非常有用。

HTML 与 XHTML 之间的差异

有些文本,比如 JavaScript 代码中包含大量 "<" 或 "&" 字符时,为了避免出现错误,可以将这些内容定义在 CDATA标记内,因为在CDATA 标记内的所有内容都会被解析器忽略。

<script type="text/javascript">
<![CDATA[
js代码
]]>
</script>

从上面的代码中,可以看出CDATA 部分由 <![CDATA开始到 ]]> 结束。

<script>标签内的注释代码

我们所说的注释代码是指html注释代码<!--......-->

不支持JavaScript的浏览器会把<script>元素的内容直接输出到页面中,因此会破坏页面的布局和外观。

让JavaScript代码包含在一个HTML注释代码中,如下所示

<script>
<!--js脚本代码-->
</script>

除了比较老旧的浏览器不支持JavaScript代码外,现在的浏览器都已经支持了,所以,这种用法基本上可以不需要使用了!

<script>标签属性

HTML5 中不再支持 HTML 4.01 中的某些属性:"xml:space"。

type属性,在HTML4中是必选属性,但在HTML5中是可选的,所以,在html5中的<script>标签内可省略该属性。

属性描述
asyncasynchtml5新增属性,规定异步执行脚本(仅适用于外部脚本)。
charsetcharset规定在脚本中使用的字符编码(仅适用于外部脚本)。
deferdefer规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。
srcURL规定外部脚本的 URL。
typeMIME-type在html5中可省略该属性,该属性规定脚本的MIME类型。
language
已废弃。
xml:spacepreserveHTML5 不支持。规定是否保留代码中的空白。



欢迎您发表评论或留言