<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      詳談HTML中script標簽（附代碼）
                
                  發表時間：2023-09-01             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]本篇文章給大家帶來的內容是關于詳談HTML中script標簽（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。script 元素在 HTML 頁面中使用「Javascript」語言主要的方法就是使用 script 元素，script 元素內部的代碼從上而下依次執行。在引入多...
      本篇文章給大家帶來的內容是關于詳談HTML中script標簽（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
      script 元素
      在 HTML 頁面中使用「Javascript」語言主要的方法就是使用 script 元素，script 元素內部的代碼從上而下依次執行。
      在引入多個 script 元素的時候，瀏覽器會按照 script 元素在頁面的中的先后順序進行解析，當上一個解析完成時，才會進行下一個 script 元素中的內容
      在 HTML 中使用 Javascript 的兩種方法
      //第一種方法：直接在標簽內使用 javascript 即可
<script>
    console.log('第一種使用方法');
</script>

//第二種方法：引用外部文件
<script src="example.js"></script>
      script 元素的屬性
      script 元素比較常用的幾個屬性
      • src：可選，用于引用外部 javascript 文件
      • type：可選，編寫代碼使用的腳本語言的類型（也成MIME類型），默認值為 text/javascript
      • async：可選，異步加載腳本，只對外部腳本文件有效
      • defer：可選，延遲腳本加載，在文檔完全被解析后在執行，只對外部腳本文件有效
      script 元素在 HTML 中的位置
      由于「Javascript」語言是一門單線程語言，在同一時間內，只能執行一個任務，所以只有當上一個任務完成之后才能進行下一個任務，因此會導致 script 元素在 HTML 中的位置不同，會表現出不同效果。
      所有 script 元素都放在 <head> 元素中
      這種做法意味著，我們必須等待所有的 Javascript 代碼必須執行完成之后才能開始展示頁面的內容，如果頁面的 Javascript 代碼非常多，這種方法就會導致我們看到頁面的加載會非常慢，用戶體驗非常差，那么這么樣去優化呢？其實很簡單。
      <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </head>
    <body>
        <div>頁面的內容區域</div>
    </body>
</html>
      所有 script 元素都放在頁面內容的后面
      優化上面所說的頁面加載慢的問題，只需要把我們使用的 Javascript 代碼放到頁面的內容之后即可，這樣頁面會首先加載內容然后現實出來，再去執行 Javascript 代碼，這樣用戶就不會等待很久頁面才會顯示內容。
      <!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>頁面的內容區域</div>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </body>
</html>
      腳本的延時加載
      腳本如何進行延時加載，這個就要利用 script 元素的 defer 屬性，在元素使用 defer 屬性時，腳本會被延遲到整個頁面解析完成后在執行。
      //example1.js 中的代碼
//console.log('example1');
//console.log(document.getElementById('content'));

//example2.js 中的代碼
//console.log('example2');
//console.log(document.getElementById('content'));

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script defer src="example1.js"></script>
    <script defer src="example2.js"></script>
</head>
<body>
    <div id="content">這里頁面的內容</div>
</body>
</html>
      你會發在沒有加入 defer 屬性時控制臺會打印出如下結果
      example1
null
example2
null
      當給元素加上 defer 屬性時，結果會發生變化，可以發現在 p 元素的內容加載完成之后 Javascript 代碼才會執行。
      example1
<div id="content">這里頁面的內容</div>
example2
<div id="content">這里頁面的內容</div>
      腳本的異步加載
      腳本的異步加載，要用到 script 元素到 async 屬性，它與 defer 屬性類似，都是修改 script 元素的加載行為，不過 async 屬性不會影響頁面的其他加載，不會阻塞文檔呈現，而且帶有 async 屬性的腳本不能保證它們執行的前后順序，這一點與 defer 屬性有著不同之處。
      換句話說 example2.js 的代碼可能會先于 example1.js 中的代碼執行，所以在使用 async 屬性時，要避免兩個  js 相互依賴。
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <div id="content">這里頁面的內容</div>
</body>
</html>
      noscript 元素
      早期的瀏覽器都會又一個問題，那就是當瀏覽器不支持 Javascript 語言時如何顯示頁面內容，為此的解決方案就是創建了一個 noscript 元素，它可以在不支持 Javascript 的瀏覽器中顯示內容，而且只會在不支持 Javascript 的瀏覽器中才會顯示其中的內容。
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <noscript>
        當前瀏覽器不支持 Javascript 請更換瀏覽器
    </noscript>
</body>
</html>
      相關推薦：
      script標簽在HTML中的作用是什么？script標簽中type屬性的用法是什么？
      HTML中的script標簽研究_html/css_WEB-ITnose
      html中的<script>標簽還能鏈接非js文件啊_html/css_WEB-ITnose
      以上就是詳談HTML中script標簽（附代碼）的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清