Web開發(fā)者怎樣兼顧多個(gè)版本的瀏覽器？

更新時(shí)間:2020-10-22 來源:黑馬程序員瀏覽量:

　通常在web開發(fā)中，不同的瀏覽器對(duì)同一個(gè)網(wǎng)頁文件解析出來的效果可能不一致，為了讓用戶能夠看到正常顯示的網(wǎng)頁，web開發(fā)者常常需要為兼容多個(gè)版本的瀏覽器而苦惱，當(dāng)使用新的硬件(如移動(dòng)電話)和軟件(如微瀏覽器)開始瀏覽網(wǎng)頁時(shí)，這種情況會(huì)變得更加嚴(yán)重。為了web更好地發(fā)展，在開發(fā)新的應(yīng)用程序時(shí)，瀏覽器開發(fā)商和站點(diǎn)開發(fā)商共同遵守標(biāo)準(zhǔn)，就顯得很重要，為此W3C與其他標(biāo)準(zhǔn)化組織共同制定了一系列的Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)并不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合，主要包括結(jié)構(gòu)、表現(xiàn)和行為三個(gè)方面，具體解釋如下。

　　1. 結(jié)構(gòu)

　　結(jié)構(gòu)用于對(duì)網(wǎng)頁中用到的信息進(jìn)行分類與整理。在結(jié)構(gòu)中用到的技術(shù)主要包括HTML、XML和XHTML。

　　l HTML 是超文本標(biāo)記語言(關(guān)于該語言會(huì)在1.2小節(jié)介紹)，設(shè)計(jì)HTML的目的是創(chuàng)建結(jié)構(gòu)化的文檔以及提供文檔的語義。目前最新版本的超文本標(biāo)記語言是HTML5。

　　l XML是一種可擴(kuò)展標(biāo)簽語言。XML最初的目的是為了彌補(bǔ)HTML的不足，具有強(qiáng)大的擴(kuò)展性(例如定義標(biāo)簽)，可用于數(shù)據(jù)的轉(zhuǎn)換和描述。

　　l XHTML是可擴(kuò)展超文本標(biāo)記語言。XHTML是基于XML的標(biāo)記語言，是在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展建立起來的，用以實(shí)現(xiàn)HTML向XML的過渡，目前已逐漸被HTML5所取代。

如圖1所示，是網(wǎng)頁焦點(diǎn)輪播圖的結(jié)構(gòu)，該結(jié)構(gòu)使用HTML5搭建，四張圖片按照從上到下的次序羅列，沒有任何布局樣式。

圖1焦點(diǎn)圖結(jié)構(gòu)

　　2. 表現(xiàn)

　　表現(xiàn)是指網(wǎng)頁展示給訪問者的外在樣式，一般包括網(wǎng)頁的版式、顏色、字體大小等。在網(wǎng)頁制作中，通常使用CSS來設(shè)置網(wǎng)頁的樣式。

　　CSS(是Cascading Style Sheet的縮寫)中文譯為層疊樣式表。CSS標(biāo)準(zhǔn)建立的目的是以CSS為基礎(chǔ)進(jìn)行網(wǎng)頁布局，控制網(wǎng)頁的樣式。如圖2所示，是焦點(diǎn)圖模塊加入CSS后的效果，只顯示第一張圖片，將剩余的圖片隱藏。

圖2 焦點(diǎn)圖樣式

　　在網(wǎng)頁中可以使用CSS對(duì)文字和圖片以及模塊的背景和布局進(jìn)行相應(yīng)的設(shè)置。后期如果需要更改樣式只需要調(diào)整CSS代碼即可。

　　3. 行為

　　行為是指網(wǎng)頁模型的定義及交互的編寫，主要包括DOM(對(duì)象模型)和ECMAScript兩個(gè)部分，具體解釋如下。

　　l DOM(英文Document Object Model的縮寫)指的是W3C中的文檔對(duì)象模型。W3C文檔對(duì)象模型(DOM)是中立于平臺(tái)和語言的接口，它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。

　　l ECMAScript是ECMA(英文European Computer Manufacturers Association的縮寫)國際以JavaScript為基礎(chǔ)制定的標(biāo)準(zhǔn)腳本語言。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)，并具有相對(duì)安全性的客戶端腳本語言，廣泛用于Web開發(fā)，常用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能，例如響應(yīng)用戶的各種操作。

　　如圖3所示，是焦點(diǎn)圖模塊加入Javascript后的效果。每隔一段時(shí)間，焦點(diǎn)圖就會(huì)自動(dòng)切換，并且當(dāng)用戶的鼠標(biāo)移上選擇按鈕時(shí)，會(huì)顯示對(duì)應(yīng)的圖片，鼠標(biāo)移開后又會(huì)按照默認(rèn)的設(shè)置自動(dòng)輪播，這就是網(wǎng)頁的一種行為。