了解一下HTML中的script標(biāo)簽

稍微學(xué)習(xí)過一點網(wǎng)頁編寫的同學(xué)都知道，網(wǎng)頁中的js代碼應(yīng)該寫在 script 標(biāo)簽中，但是為什么要這么做呢？本文就介紹一下script標(biāo)簽。

創(chuàng)新互聯(lián)專注于蕉城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供蕉城營銷型網(wǎng)站建設(shè)，蕉城網(wǎng)站制作、蕉城網(wǎng)頁設(shè)計、蕉城網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造蕉城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供蕉城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。script 標(biāo)簽

最初，網(wǎng)景公司想要在瀏覽器中展示使用js的html文件，但是又不想影響這個文件在其他瀏覽器中的顯示效果，于是創(chuàng)造了 script 標(biāo)簽

我們都知道標(biāo)簽可以在里面添加屬性，script標(biāo)簽有下面的屬性：

async 表示立即下載該腳本，不應(yīng)該妨礙界面中其他操作src 表示要執(zhí)行這個腳本的外部文件，可選charset src指定的外部文件的字符集defer 腳本延遲到文檔解析顯示完成之后執(zhí)行，可選language 已經(jīng)廢棄type 重要，用于替代language屬性，默認(rèn)為text/javascript,所以這個參數(shù)一般不需要可以指定。

<script type="text/javascript">
    // 屬性設(shè)置
    function SayHi(){
        alert("Hi");
    }
</script>

<!-- 注意下面的寫法    /> 這么寫本身沒有問題，但是不能在html中使用這種語法，因為這樣會打亂html的解析 -->
<script type="text/javascript" src="2.js"/>
// 必須寫成下面的樣子
<script type="text/javascript" src="2.js"></script>

注意：

在解釋器對script標(biāo)簽中的代碼求值完畢之前，頁面中的其余內(nèi)容都不會被瀏覽器加載或者顯示帶有src的標(biāo)簽中如果還有js代碼將被忽略，所以寫了src就不該在其中再寫代碼了盡量使用外部文件寫js，盡量少的使用內(nèi)嵌js，這樣一來維護方便，js都在一個地方，而來如果兩個頁面使用了同一個js，它可以緩存script 標(biāo)簽位置

本來標(biāo)簽應(yīng)該放在header里面，但是因為放在header中，在加載js的時候，頁面還不會渲染（頁面只有加載到body才會開始渲染），導(dǎo)致頁面出現(xiàn)較長時間的白，所以現(xiàn)在我們放在body的最后

<body>
...

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
</body>

在script中加入defer屬性之后，放到header中理論上也可以達到延遲執(zhí)行的目的，但是由于不同瀏覽器對于defer的支持不同（執(zhí)行順序不確定，內(nèi)嵌的js不支持defer等），最好我們還是按照上面的寫法寫在body的最后。

async屬性也是為了解決腳本異步加載的問題，同樣也是不支持嵌入的js腳本，本來它跟defer的區(qū)別是 defer 按順序加載，async不按順序加載，但是在實際使用中，瀏覽器對于這個屬性的支持也不一樣，兩個屬性都不能保證腳本的順序執(zhí)行以及在DOMContentLoaded之前執(zhí)行，所以在瀏覽器徹底支持之前，最好還是不要用這個屬性了。

標(biāo)簽

當(dāng)瀏覽器禁用js或者瀏覽器根本不支持js（當(dāng)然現(xiàn)在這種很少了），需要平穩(wěn)退化，所以需要noscript標(biāo)簽

它的作用是，當(dāng)發(fā)生上面提到的情況的時候，顯示noscript中的內(nèi)容，看下面的例子

<html>
    <head>
        <script src="2.js"></script>
    </head>
    <body>
        <noscript>
            <p>本頁面需要瀏覽器支持（啟用）JavaScript</p>
        </noscript>
    </body>
</html>

注意如果瀏覽器啟用了JS，則這個標(biāo)簽里的內(nèi)容不會顯示。

推薦教程：HTML教程、JavaScript視頻教程

當(dāng)前名稱：了解一下HTML中的script標(biāo)簽
URL鏈接：http://muchs.cn/article18/cjhcdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容