稍微學(xué)習(xí)過一點(diǎn)網(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)驗(yàn)。 熱誠為您提供蕉城營銷型網(wǎng)站建設(shè),蕉城網(wǎng)站制作、蕉城網(wǎng)頁設(shè)計(jì)、蕉城網(wǎng)站官網(wǎng)定制、微信小程序服務(wù),打造蕉城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供蕉城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。script 標(biāo)簽最初,網(wǎng)景公司想要在瀏覽器中展示使用js的html文件,但是又不想影響這個(gè)文件在其他瀏覽器中的顯示效果,于是創(chuàng)造了 script 標(biāo)簽
我們都知道標(biāo)簽可以在里面添加屬性,script標(biāo)簽有下面的屬性:
async 表示立即下載該腳本,不應(yīng)該妨礙界面中其他操作src 表示要執(zhí)行這個(gè)腳本的外部文件,可選charset src指定的外部文件的字符集defer 腳本延遲到文檔解析顯示完成之后執(zhí)行,可選language 已經(jīng)廢棄type 重要,用于替代language屬性,默認(rèn)為text/javascript,所以這個(gè)參數(shù)一般不需要可以指定。<script type="text/javascript"> // 屬性設(shè)置 function SayHi(){ alert("Hi"); } </script>
<!-- 注意下面的寫法 /> 這么寫本身沒有問題,但是不能在html中使用這種語法,因?yàn)檫@樣會打亂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,這樣一來維護(hù)方便,js都在一個(gè)地方,而來如果兩個(gè)頁面使用了同一個(gè)js,它可以緩存script 標(biāo)簽位置本來標(biāo)簽應(yīng)該放在header里面,但是因?yàn)榉旁趆eader中,在加載js的時(shí)候,頁面還不會渲染(頁面只有加載到body才會開始渲染),導(dǎo)致頁面出現(xiàn)較長時(shí)間的白,所以現(xiàn)在我們放在body的最后
<body> ... <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> </body>
在script中加入defer屬性之后,放到header中理論上也可以達(dá)到延遲執(zhí)行的目的,但是由于不同瀏覽器對于defer的支持不同(執(zhí)行順序不確定,內(nèi)嵌的js不支持defer等),最好我們還是按照上面的寫法寫在body的最后。
async屬性也是為了解決腳本異步加載的問題,同樣也是不支持嵌入的js腳本,本來它跟defer的區(qū)別是 defer 按順序加載,async不按順序加載,但是在實(shí)際使用中,瀏覽器對于這個(gè)屬性的支持也不一樣,兩個(gè)屬性都不能保證腳本的順序執(zhí)行以及在DOMContentLoaded之前執(zhí)行,所以在瀏覽器徹底支持之前,最好還是不要用這個(gè)屬性了。
標(biāo)簽當(dāng)瀏覽器禁用js或者瀏覽器根本不支持js(當(dāng)然現(xiàn)在這種很少了),需要平穩(wěn)退化,所以需要noscript標(biāo)簽
它的作用是,當(dāng)發(fā)生上面提到的情況的時(shí)候,顯示noscript中的內(nèi)容,看下面的例子
<html> <head> <script src="2.js"></script> </head> <body> <noscript> <p>本頁面需要瀏覽器支持(啟用)JavaScript</p> </noscript> </body> </html>
注意如果瀏覽器啟用了JS,則這個(gè)標(biāo)簽里的內(nèi)容不會顯示。
推薦教程:HTML教程、JavaScript視頻教程
當(dāng)前名稱:了解一下HTML中的script標(biāo)簽
URL鏈接:http://m.rwnh.cn/article18/cjhcdp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)