關於在HTML中使用的script標籤

時間 2019-11-19

標籤關於 html 使用 script 標籤欄目 HTML 简体版

原文原文鏈接

本文是《JavaScript高級程序設計》(第三版)中的第二章的我的學習的總結。javascript

在HTML中使用JavaScript

<script>標籤

　　在HTML5中script主要有如下幾個屬性：async，defer，charset，src，type，java

async（可選）：

　　　　關鍵詞：異步腳本，外部文件，當即下載；瀏覽器

　　　　當標籤中包含這個屬性時會當即下載腳本（外部文件），只對外部腳本文件有效，下載的同時能夠進行頁面的其餘操做，下載完成後中止解析並執行，執行後繼續進行解析，但不能保證執行順序。　　緩存

　　　 <script src="js/index2.js" async="async"></script> 　　安全

defer（可選）：

　　　　關鍵詞：延遲腳本，外部文件，延遲加載；異步

　　　　當標籤中包含這個屬性時，腳本能夠再等到頁面徹底被解析或顯示以後執行，只對外部文件有效，若是同時存在兩個帶有defer的腳本，因爲延遲的緣由，前者將會有限於後者執行。async

　　　　<script src="js/index1.js" defer="defer"></script> 學習

charset（可選）：

　　　　關鍵詞：字符集spa

　　　　大多數瀏覽器已經忽略它的值了，因此不多有人使用。設計

src（可選）：

　　　　關鍵詞：外部引用

　　　　表示須要引用的外部文件的地址。

type（可選）：

　　　　關鍵詞：MIME（腳本語言的內容類型）

　　　　爲保證最大限度的瀏覽器兼容，type的屬性值主要時候用的依舊是text/javascript，若是沒有寫這個屬性，其默認值仍然爲text/javascript。

　注意：在引用外部文件，標籤中不要加入其它JS代碼，瀏覽器在解析時，只會下載src引用的外部腳本文件，表中內嵌入的代碼將會被忽略。

<script>標籤的位置

　　一般，咱們會把帶有外部文件的的標籤（包括CSS文件，JavaScript文件）的引用放在相同的位置，通常是在<head>標籤裏面。

　　可是在解析過程當中一旦遇到多個JavaScript外部文件，就要等到全部的外部文件加載完成後，頁面才能徹底顯示，因此一般咱們會把它放在<body>標籤裏的底部，以下所示：

　　在上面中提到過<script>中有defer這個屬性，可是因爲在HTML5中提到過，HTML5會忽略嵌入腳本所設置defer屬性，目前只有IE4~IE7還支持defer屬性，IE8之後徹底遵循HTML5的標準，因此把<script>放在<body>標籤裏的底部依舊是最佳選擇。

引用外部文件的優勢

利於維護：把全部的JavaScript的文件放在一塊兒，不只能夠不觸及HTML代碼，並且更有利於開發者進行代碼的編寫和維護。
加速瀏覽：若是有多個HTML頁面引用了同一個JavaScript外部文件，這個文件只會加載一次（緩存），也就是說能夠加快頁面的加載速度。
安全性：引用外部文件，若是用戶查看HTML代碼，將不會看到JavaScript的代碼，比寫在標籤內安全性更高一些。

<noscript>標籤

　　字面意思，NO-script，沒有script，也就是瀏覽器不支持JavaScript時，<noscript>標籤中內容纔會被顯示，

瀏覽器不支持腳本；
瀏覽器支持腳本，可是JavaScript被禁用；

　　以上兩條符合任何一個，<noscript>標籤內的內容都會被顯示。

　　上圖頁面，給用戶了一個信息，當瀏覽器不支持或禁用JavaScript是纔會被顯示，不然用戶將永遠不會看到，而且不會影響頁面其餘元素的顯示。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。