2.1 <script> 標(biāo)簽
<script> 標(biāo)簽定義了 6 個屬性：
| 屬性 | 說明 |
|---|---|
async |
異步加載腳本团驱，即加載腳本的同時加載頁面其他內(nèi)容。只對外部腳本有效嚎花。 |
charset |
忽略 |
defer |
延遲腳本執(zhí)行贩幻，直到文檔全部被解析和顯示之后再執(zhí)行腳本 |
language |
已廢棄 |
src |
引用外部腳本 |
type |
MIME 類型两嘴，一般為 text/javascript 可以省略 |
注意：正常情況下族壳，解釋器需要將所有腳本解釋完畢后，才會加載頁面其他內(nèi)容仿荆。
三種加載腳本的方式：
- 內(nèi)嵌腳本
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
- 引用外部腳本
<script type="text/javascript" src="example.js"></script>
- 引用域外腳本拢操，但是要注意安全：
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
2.1.1 標(biāo)簽位置
按照慣例，腳本都應(yīng)該放在 <head> 元素中
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>
</head>
<body>
<!-- 這里放內(nèi)容 -->
</body>
</html>
在 <head> 元素中引入外部腳本杠园，必須要等腳本全部解析完成后才會解析頁面其他內(nèi)容舔庶，這樣會導(dǎo)致頁面出現(xiàn)卡頓和顯示空白。為了避免這個問題瞧甩，可以將腳本放在<body>的底部弥鹦。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這里放置頁面其他內(nèi)容 -->
<!-- 最后引入腳本 -->
<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>
</body>
</html>
2.1.2 延遲腳本
使用 defer 屬性后，腳本就會延遲到整個頁面加載完畢后再執(zhí)行朦促。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer src=”example1.js”></script>
<script type=”text/javascript” defer src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
正常情況下栓始，腳本是按照在頁面中出現(xiàn)的順序執(zhí)行的；如果使用多個延遲腳本，多個腳本執(zhí)行順序并不確定歹颓，因此一個頁面中最好只有一個 defer 腳本巍扛。
2.1.3 異步腳本
瀏覽器在加載異步腳本的同時也會加載文檔內(nèi)容，因此要確保腳本與頁面內(nèi)容之間撤奸、異步腳本之間不存在相互依賴喊括。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” async src=”example1.js”></script>
<script type=”text/javascript” async src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
2.1.4 在 XHTML 中的用法
HTML5 已經(jīng)成熟郑什，該小節(jié)可以跳過
2.1.5 不推薦使用的語法
瀏覽器已經(jīng)成熟蒲肋，該小節(jié)可以跳過
2.2 嵌入代碼與外部文件
盡可能使用外部腳本，使用外部腳本有更多地優(yōu)點
2.3 文檔模式
不同的文檔模式下兜粘，瀏覽器有不同的解析行為孔轴。下面是幾種文檔模式。現(xiàn)在一般都使用 HTML 5 模式
<!-- HTML 4.01 嚴(yán)格 -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<!-- HTML 4.01 過渡 -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<!-- HTML 4.01 框架集 -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
<!-- XHTML 1.0 嚴(yán)格 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!-- XHTML 1.0 過渡 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!-- XHTML 1.0 框架集 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<!-- HTML5 -->
<!DOCTYPE html>
2.4 <noscript> 元素
如果瀏覽器不支持 Javascript 贷洲，將顯示一條消息悍引；如果瀏覽器支持，則什么也不做
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer=”defer” src=”example1.js”></script>
<script type=”text/javascript” defer=”defer” src=”example2.js”></script>
</head>
<body>
<noscript>
<p>瀏覽器不支持 Javascript</p>
</noscript>
</body>
</html>
