JavaScript在HTML和XHTML中如何使用

關(guān)于如何在html中引用使用js真的是特別簡(jiǎn)單的事情磅崭,因?yàn)榇蠹叶加靡恍└吣艿那岸司庉嬈鳎热鐆ebstorm,Atom等...輸入一個(gè)"<s"就會(huì)自動(dòng)補(bǔ)全<script>標(biāo)簽透揣,但這是紅皮書(shū)的第二章內(nèi)容板乙,我覺(jué)得還是必要做一下筆記的~

首先說(shuō)一下<script>元素,這個(gè)元素由Netscape創(chuàng)造并在Netscape Navigator2中首先實(shí)現(xiàn)具篇,后來(lái)這個(gè)元素被正式被加入html規(guī)范中,HTML4.01為其定義了六個(gè)屬性:

async:可選纬霞,表示應(yīng)該立即下載腳本,但不應(yīng)該妨礙頁(yè)面中的其他操作驱显。只對(duì)外部腳本有效诗芜,也就是通過(guò)src引入的。

charset:可選埃疫。表示通過(guò)src屬性指定的代碼的字符集伏恐,但是大多數(shù)瀏覽器會(huì)忽略它的值,所以很少有用栓霜。

defer:可選翠桦。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。也只對(duì)外部腳步有效胳蛮。

language:已廢棄销凑。原來(lái)用于表示編寫(xiě)代碼使用的腳本語(yǔ)言,比如JavaScript,或VBScript.

src:可選仅炊。表示包含要執(zhí)行代碼的外部文件斗幼。

type:可選。表示編寫(xiě)代碼使用的腳本語(yǔ)言的內(nèi)容類(lèi)型(也稱(chēng)為MIME類(lèi)型)抚垄。實(shí)際上服務(wù)器在傳送JavaScript文件時(shí)使用的MIME類(lèi)型通常是application/x-javascript蜕窿,但在type中設(shè)置這個(gè)值可能導(dǎo)致腳本被忽略谋逻。另外,在非IE瀏覽器還可以使用application/javascript和application/ecmascript桐经』僬祝考慮到約定俗稱(chēng)的和最大限度的瀏覽器兼容,其值還是text/javascript!

以上是HTML4為<script>定義的6個(gè)屬性阴挣,接下來(lái)我們看看HTML5又有做了什么樣的改動(dòng)气堕。

W3C官網(wǎng)<script>屬性定義

可以看到‘language’已經(jīng)廢棄了,多了一個(gè)crossorigin屬性屯吊。雖然還沒(méi)有完全被標(biāo)準(zhǔn)化送巡,但是一些瀏覽器支持crossorigin屬性『行叮基本的想法是骗爆,瀏覽器會(huì)限制對(duì)非同源資源的使用(同源資源是指相同的協(xié)議、hostname 以及端口)蔽介。crossorgin不是一個(gè)神奇的安全手段摘投,它所做的只是讓瀏覽器啟用正常的 CORS 訪問(wèn)檢查,發(fā)起一個(gè)OPTIONS請(qǐng)求并檢查Access-Controlheader虹蓄。它有兩個(gè)值:anonymoususe-credentials犀呼。這個(gè)屬性通用可以用在<video>和<img>。

關(guān)于屬性補(bǔ)充兩個(gè)地方

defer(延遲下載) vs asyn(異步腳本)

雖然兩個(gè)屬性都是告訴瀏覽器立即下載但是腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢再運(yùn)行薇组。但是眾所周知外臂,多個(gè)腳本執(zhí)行順序是按照<script>標(biāo)簽在html中順序,但是async則無(wú)法保證先后執(zhí)行順序律胀。因此建議異步腳本不要在加載期間修改DOM宋光。

src vs href

src用于替換當(dāng)前元素,href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系炭菌。

src是source的縮寫(xiě)罪佳,指向外部資源的位置,指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置黑低;在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)赘艳,例如js腳本,img圖片和frame等元素克握。

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

當(dāng)瀏覽器解析到該元素時(shí)蕾管,會(huì)暫停其他資源的下載和處理,直到將該資源加載菩暗、編譯娇掏、執(zhí)行完畢,圖片和框架等元素也如此勋眯,類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)婴梧。這也是為什么將js腳本放在底部而不是頭部。

href是Hypertext Reference的縮寫(xiě)客蹋,指向網(wǎng)絡(luò)資源所在位置塞蹭,建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接,如果我們?cè)谖臋n中添加

<link href="css.css" rel="styesheet">

那么瀏覽器會(huì)識(shí)別該文檔為css文件讶坯,就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理番电。這也是為什么建議使用link方式來(lái)加載css,而不是使用@import方式辆琅。

引用JS

使用<script>元素的方式有兩種:直接在頁(yè)面嵌入JavaScript代碼和包含外部JavaScript文件

在使用<script>元素嵌入JavaScript代碼時(shí)漱办,只須為<script>指定type屬性,即text/javascript婉烟。通過(guò)<script>來(lái)包含外部js文件娩井,src則是必須的,另外擴(kuò)展名不是必需的似袁,如果不適用.js擴(kuò)展名洞辣,請(qǐng)確保服務(wù)器能返回正確的MIME類(lèi)型。另外當(dāng)瀏覽器遇到字符串"</script>"時(shí)昙衅,就會(huì)認(rèn)為那是結(jié)束的</script>標(biāo)簽扬霜,而通過(guò)轉(zhuǎn)義字符"\"解決這個(gè)問(wèn)題。關(guān)于<script>位置應(yīng)該頁(yè)面后面而涉,防止出現(xiàn)由于等待js代碼被全部下載而導(dǎo)致瀏覽窗口一片空白著瓶。

另外在XHTML可以寫(xiě)成<script src="js.js" /> 但是在html是不可以這樣,這樣書(shū)寫(xiě)不符合HTML規(guī)范啼县。而且也得不到某些瀏覽器材原,尤其是IE的正確解析。

在XHTML中

在HTML中谭羔,有特殊規(guī)則用以確定<script>元素中的那些元素可以被解析华糖,但這些特殊的規(guī)則在xhtml中不適用,比如在html中可以用"<" 來(lái)判斷a是否小于b瘟裸,可是xhtml需要將所有小于號(hào)替換成html實(shí)體(&lt;)客叉。保證相同代碼在xhtml中正常運(yùn)行的方法就是使用一個(gè)CData片段來(lái)包含JS代碼,在xhtml中话告,CData是文檔中的一個(gè)特殊區(qū)域兼搏。

<script><![CData[

?//正常js的代碼

]]></script>

最后,要說(shuō)的是現(xiàn)在很少有瀏覽器不支持js沙郭,可以使用<noscript>標(biāo)簽佛呻,這個(gè)標(biāo)簽的內(nèi)容會(huì)在不支持js的瀏覽器中顯示出來(lái)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市病线,隨后出現(xiàn)的幾起案子吓著,更是在濱河造成了極大的恐慌鲤嫡,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绑莺,死亡現(xiàn)場(chǎng)離奇詭異暖眼,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)纺裁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)诫肠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人欺缘,你說(shuō)我怎么就攤上這事栋豫。” “怎么了谚殊?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵丧鸯,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我络凿,道長(zhǎng)骡送,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任絮记,我火速辦了婚禮摔踱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘怨愤。我一直安慰自己派敷,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布撰洗。 她就那樣靜靜地躺著篮愉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪差导。 梳的紋絲不亂的頭發(fā)上试躏,一...
    開(kāi)封第一講書(shū)人閱讀 51,631評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音设褐,去河邊找鬼颠蕴。 笑死,一個(gè)胖子當(dāng)著我的面吹牛助析,可吹牛的內(nèi)容都是我干的犀被。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼外冀,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼寡键!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起雪隧,我...
    開(kāi)封第一講書(shū)人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤西轩,失蹤者是張志新(化名)和其女友劉穎员舵,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體遭商,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡固灵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了劫流。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡丛忆,死狀恐怖祠汇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情熄诡,我是刑警寧澤可很,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站凰浮,受9級(jí)特大地震影響我抠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜袜茧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一菜拓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧笛厦,春花似錦纳鼎、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至姨谷,卻和暖如春逗宁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背梦湘。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工瞎颗, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人践叠。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓言缤,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親禁灼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子管挟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過(guò)程中弄捕,你是如何考慮他的UI僻孝、安全性导帝、高性能、SEO穿铆、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,166評(píng)論 0 1
  • 源自SeeYouBug博客 地址為:http://www.cnblogs.com/SeeYouBug 一您单、HTML...
    欲淚成雪閱讀 1,227評(píng)論 0 15
  • 投射:1投射去香港買(mǎi)到好多平價(jià)衣服褲心頭好!2投射去香港一切幸福順利回來(lái)財(cái)源滾滾荞雏! 3投射去香港回來(lái)就有真正女朋友...
    謝奕鋒閱讀 164評(píng)論 0 0
  • 一虐秦、安裝配置 1、從官網(wǎng)下載并安裝 http://www.telerik.com/fiddler[http://w...
    木沐__閱讀 7,438評(píng)論 0 10