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

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

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

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

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

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

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

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

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

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

　　2. 表現(xiàn)

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

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

圖2 焦點圖樣式

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

　　3. 行為

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

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

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

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