關於在HTML中使用的script標籤

來源:互聯網
上載者:User

標籤:支援   osc   內容類型   使用者   charset   程式設計   第三版   lock   ges   

本文是《JavaScript進階程式設計》(第三版)中的第二章的個人學習的總結。

在HTML中使用JavaScript<script>標籤

  在HTML5中script主要有以下幾個屬性:async,defer,charset,src,type,

  • async(可選):

    關鍵詞:非同步指令碼,外部檔案,立即下載;

    當標籤中包含這個屬性時會立即下載指令碼(外部檔案),只對外部指令檔有效,下載的同時可以進行頁面的其他動作,下載完成後停止解析並執行,執行後繼續進行解析,但不能保證執行順序。  

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

  • defer(可選):

    關鍵詞:延遲指令碼,外部檔案,消極式載入;

    當標籤中包含這個屬性時,指令碼可以再等到頁面完全被解析或顯示之後執行,只對外部檔案有效,如果同時存在兩個帶有defer的指令碼,由於延遲的原因,前者將會有限於後者執行。

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

  • charset(可選):

    關鍵詞:字元集

    大多數瀏覽器已經忽略它的值了,所以很少有人使用。

  • 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是才會被顯示,否則使用者將永遠不會看到,並且不會影響頁面其他元素的顯示。

 

關於在HTML中使用的script標籤

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.