關(guān)于如何在html中引用使用js真的是特別簡單的事情,因為大家都用一些高能的前端編輯器,比如webstorm,Atom等...輸入一個"<s"就會自動補全<script>標(biāo)簽,但這是紅皮書的第二章內(nèi)容,我覺得還是必要做一下筆記的~
首先說一下<script>元素,這個元素由Netscape創(chuàng)造并在Netscape Navigator2中首先實現(xiàn),后來這個元素被正式被加入html規(guī)范中,HTML4.01為其定義了六個屬性:
async:可選,表示應(yīng)該立即下載腳本,但不應(yīng)該妨礙頁面中的其他操作。只對外部腳本有效,也就是通過src引入的。
charset:可選。表示通過src屬性指定的代碼的字符集,但是大多數(shù)瀏覽器會忽略它的值,所以很少有用。
defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。也只對外部腳步有效。
language:已廢棄。原來用于表示編寫代碼使用的腳本語言,比如JavaScript,或VBScript.src:可選。表示包含要執(zhí)行代碼的外部文件。
type:可選。表示編寫代碼使用的腳本語言的內(nèi)容類型(也稱為MIME類型)。實際上服務(wù)器在傳送JavaScript文件時使用的MIME類型通常是application/x-javascript,但在type中設(shè)置這個值可能導(dǎo)致腳本被忽略。另外,在非IE瀏覽器還可以使用application/javascript和application/ecmascript??紤]到約定俗稱的和最大限度的瀏覽器兼容,其值還是text/javascript!
以上是HTML4為<script>定義的6個屬性,接下來我們看看HTML5又有做了什么樣的改動。

可以看到‘language’已經(jīng)廢棄了,多了一個crossorigin屬性。雖然還沒有完全被標(biāo)準(zhǔn)化,但是一些瀏覽器支持crossorigin屬性?;镜南敕ㄊ?,瀏覽器會限制對非同源資源的使用(同源資源是指相同的協(xié)議、hostname 以及端口)。crossorgin不是一個神奇的安全手段,它所做的只是讓瀏覽器啟用正常的 CORS 訪問檢查,發(fā)起一個OPTIONS請求并檢查Access-Controlheader。它有兩個值:anonymous和use-credentials。這個屬性通用可以用在<video>和<img>。
關(guān)于屬性補充兩個地方
defer(延遲下載) vs asyn(異步腳本)
雖然兩個屬性都是告訴瀏覽器立即下載但是腳本會被延遲到整個頁面都解析完畢再運行。但是眾所周知,多個腳本執(zhí)行順序是按照<script>標(biāo)簽在html中順序,但是async則無法保證先后執(zhí)行順序。因此建議異步腳本不要在加載期間修改DOM。
src vs href
src用于替換當(dāng)前元素,href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫,指向外部資源的位置,指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置;在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi),例如js腳本,img圖片和frame等元素。
<script src="js.js"></script>
當(dāng)瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢,圖片和框架等元素也如此,類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫,指向網(wǎng)絡(luò)資源所在位置,建立和當(dāng)前元素(錨點)或當(dāng)前文檔(鏈接)之間的鏈接,如果我們在文檔中添加
<link href="css.css" rel="styesheet">
那么瀏覽器會識別該文檔為css文件,就會并行下載資源并且不會停止對當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css,而不是使用@import方式。
引用JS
使用<script>元素的方式有兩種:直接在頁面嵌入JavaScript代碼和包含外部JavaScript文件
在使用<script>元素嵌入JavaScript代碼時,只須為<script>指定type屬性,即text/javascript。通過<script>來包含外部js文件,src則是必須的,另外擴展名不是必需的,如果不適用.js擴展名,請確保服務(wù)器能返回正確的MIME類型。另外當(dāng)瀏覽器遇到字符串"</script>"時,就會認(rèn)為那是結(jié)束的</script>標(biāo)簽,而通過轉(zhuǎn)義字符"\"解決這個問題。關(guān)于<script>位置應(yīng)該頁面后面,防止出現(xiàn)由于等待js代碼被全部下載而導(dǎo)致瀏覽窗口一片空白。
另外在XHTML可以寫成<script src="js.js" /> 但是在html是不可以這樣,這樣書寫不符合HTML規(guī)范。而且也得不到某些瀏覽器,尤其是IE的正確解析。
在XHTML中
在HTML中,有特殊規(guī)則用以確定<script>元素中的那些元素可以被解析,但這些特殊的規(guī)則在xhtml中不適用,比如在html中可以用"<" 來判斷a是否小于b,可是xhtml需要將所有小于號替換成html實體(<)。保證相同代碼在xhtml中正常運行的方法就是使用一個CData片段來包含JS代碼,在xhtml中,CData是文檔中的一個特殊區(qū)域。
<script><![CData[
?//正常js的代碼
]]></script>
最后,要說的是現(xiàn)在很少有瀏覽器不支持js,可以使用<noscript>標(biāo)簽,這個標(biāo)簽的內(nèi)容會在不支持js的瀏覽器中顯示出來