<script> 元素
HTML 4.01 为 <script>
定义了以下6个属性:
async
:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作。只对外部脚本文件有效;charset
:可选。表示通过src
属性指定的代码的字符集。很少有人用这个属性;defer
:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行;language
:已废弃;src
:可选。表示包含要执行代码的外部文件;type
:可选。表示编写代码使用的脚本语言的内容类型;目前type
属性的值依旧还是text/javascript
。不过这个属性并不是必须的,因为没有指定时默认值也是text/javascript
;
在使用 <script>
元素嵌入 JavaScript
代码时,不要在代码中的任何地方出现 "</script>"
字符串。按照接卸嵌入式代码的规则,当浏览器遇到字符串 "</script>"
时,就会认为是结束的 </script>
标签。而通过转义字符 “\”
可解决这个问题:"<\/script>"
。例如:
<script>
function sayScript(){
alert("<\/script>");
}
</script>
`</pre>
在引入外部文件时,只能像下面这样写:
<pre>`<script type="application/javascript" src="example.js"></script>
`</pre>
而不能使用如下形式:
<pre>`<script type="application/javascript" src="example.js"/>
`</pre>
引入了外部文件的 `<script>` 元素不能再嵌入代码,嵌入的代码将会被忽略,只外部文件起作用。
无论如何包含代码,只要不存在 `defer` 和 `async` 属性,浏览器都会按照 `<script>` 元素在页面中出现的先后顺序对它们依次进行解析。
## 标签的位置
现代 Web 应用程序一般都把全部的 JavaScript 引用放在 <body> 元素中页面内容的后面。如下:
<pre>`<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script src="example.js"></script>
</body>
</html>
`</pre>
### 延迟脚本
使用 `defer` 属性,相当于告诉浏览器立即下载,但延迟执行。IE4/Firefox3.5/Safari5/Chrome 是最早支持此属性的浏览器,其他浏览器会忽略此属性,因此把延迟脚本放在页面底部仍然是最佳选择。使用例子:
<pre>`<script defer src="example.js"></script>
`</pre>
### 异步脚本
HTML 5 为 `<script>` 元素定义了 `async` 属性。这个属性与 `defer` 属性类似,都用来改变处理脚本的行为;但与 `defer` 属性不同的是,标记为 `async` 脚本并不保证按照指定它们的先后顺序执行。指定 `async` 属性的目的不是让页面等待两个脚本下载和执行,从而异步加载页面其他内容。因此,建议异步脚本不要在加载期间修改 `DOM`。异步脚本一定会在页面的 `load` 事件前执行。
<pre>`<script async src="example.js"></script>
`</pre>
## 文档模式
IE 5.5 引入了文档模式的概念,而这个概念是通过使用文档类型(doctype)切换实现的。最初的两种文档模式是:混杂模式(quirks mode)和标准模式(standards mode)。这两种模式主要影响 CSS 内容的呈现,但在某些情况下也会影响 JavaScript 的解释执行。在此之后,IE 又提出一种所谓的准标准模式(almost standards mode)。
如果文档开始处没有发现文档类型声明,则所有的浏览器都会默认开启混杂模式;对于标准模式可以通过使用下面任何一种文档类型来开启:
<pre>`<!-- HTML 4.0.1 严格型 html:4s -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
`</pre>
<pre>`<!-- HTML 5 !-->
<!DOCTYPE html>
`</pre>
而对于准标准模式,则可以使用过渡型(transitional)或框架集型(frameset)文档类型来触发:
<pre>`<!-- HTML 4.0.1 过渡型 html:4t -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
`</pre>
<pre>`<!-- HTML 4.0.1 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<noscript> 元素
在 <body>
中使用此元素。