小編給大家分享一下HTML中script標(biāo)簽的使用示例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在做網(wǎng)站、網(wǎng)站建設(shè)中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無(wú)錫營(yíng)銷推廣。創(chuàng)新互聯(lián)建站專業(yè)成都網(wǎng)站建設(shè)10多年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

script 元素

在 HTML 頁(yè)面中使用「Javascript」語(yǔ)言主要的方法就是使用 script 元素，script 元素內(nèi)部的代碼從上而下依次執(zhí)行。

在引入多個(gè) script 元素的時(shí)候，瀏覽器會(huì)按照 script 元素在頁(yè)面的中的先后順序進(jìn)行解析，當(dāng)上一個(gè)解析完成時(shí)，才會(huì)進(jìn)行下一個(gè) script 元素中的內(nèi)容

在 HTML 中使用 Javascript 的兩種方法

//第一種方法：直接在標(biāo)簽內(nèi)使用 javascript 即可


//第二種方法：引用外部文件

script 元素的屬性

script 元素比較常用的幾個(gè)屬性

• src：可選，用于引用外部 javascript 文件

• type：可選，編寫代碼使用的腳本語(yǔ)言的類型（也成MIME類型），默認(rèn)值為 text/javascript

• async：可選，異步加載腳本，只對(duì)外部腳本文件有效

• defer：可選，延遲腳本加載，在文檔完全被解析后在執(zhí)行，只對(duì)外部腳本文件有效

script 元素在 HTML 中的位置

由于「Javascript」語(yǔ)言是一門單線程語(yǔ)言，在同一時(shí)間內(nèi)，只能執(zhí)行一個(gè)任務(wù)，所以只有當(dāng)上一個(gè)任務(wù)完成之后才能進(jìn)行下一個(gè)任務(wù)，因此會(huì)導(dǎo)致 script 元素在 HTML 中的位置不同，會(huì)表現(xiàn)出不同效果。

所有 script 元素都放在 元素中

這種做法意味著，我們必須等待所有的 Javascript 代碼必須執(zhí)行完成之后才能開始展示頁(yè)面的內(nèi)容，如果頁(yè)面的 Javascript 代碼非常多，這種方法就會(huì)導(dǎo)致我們看到頁(yè)面的加載會(huì)非常慢，用戶體驗(yàn)非常差，那么這么樣去優(yōu)化呢？其實(shí)很簡(jiǎn)單。

    
        
        
        
    
    
        
頁(yè)面的內(nèi)容區(qū)域
    

所有 script 元素都放在頁(yè)面內(nèi)容的后面

優(yōu)化上面所說的頁(yè)面加載慢的問題，只需要把我們使用的 Javascript 代碼放到頁(yè)面的內(nèi)容之后即可，這樣頁(yè)面會(huì)首先加載內(nèi)容然后現(xiàn)實(shí)出來(lái)，再去執(zhí)行 Javascript 代碼，這樣用戶就不會(huì)等待很久頁(yè)面才會(huì)顯示內(nèi)容。

    
        
    
    
        
頁(yè)面的內(nèi)容區(qū)域
        
        
    

腳本的延時(shí)加載

腳本如何進(jìn)行延時(shí)加載，這個(gè)就要利用 script 元素的 defer 屬性，在元素使用 defer 屬性時(shí)，腳本會(huì)被延遲到整個(gè)頁(yè)面解析完成后在執(zhí)行。

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

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




    
    
    
    


    
這里頁(yè)面的內(nèi)容

你會(huì)發(fā)在沒有加入 defer 屬性時(shí)控制臺(tái)會(huì)打印出如下結(jié)果

example1
null
example2
null

當(dāng)給元素加上 defer 屬性時(shí)，結(jié)果會(huì)發(fā)生變化，可以發(fā)現(xiàn)在 p 元素的內(nèi)容加載完成之后 Javascript 代碼才會(huì)執(zhí)行。

example1
這里頁(yè)面的內(nèi)容
example2
這里頁(yè)面的內(nèi)容

腳本的異步加載

腳本的異步加載，要用到 script 元素到 async 屬性，它與 defer 屬性類似，都是修改 script 元素的加載行為，不過 async 屬性不會(huì)影響頁(yè)面的其他加載，不會(huì)阻塞文檔呈現(xiàn)，而且?guī)в?async 屬性的腳本不能保證它們執(zhí)行的前后順序，這一點(diǎn)與 defer 屬性有著不同之處。

換句話說 example2.js 的代碼可能會(huì)先于 example1.js 中的代碼執(zhí)行，所以在使用 async 屬性時(shí)，要避免兩個(gè)  js 相互依賴。

    
    
    
    


    
這里頁(yè)面的內(nèi)容

noscript 元素

早期的瀏覽器都會(huì)又一個(gè)問題，那就是當(dāng)瀏覽器不支持 Javascript 語(yǔ)言時(shí)如何顯示頁(yè)面內(nèi)容，為此的解決方案就是創(chuàng)建了一個(gè) noscript 元素，它可以在不支持 Javascript 的瀏覽器中顯示內(nèi)容，而且只會(huì)在不支持 Javascript 的瀏覽器中才會(huì)顯示其中的內(nèi)容。

看完了這篇文章，相信你對(duì)HTML中script標(biāo)簽的使用示例有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！