首頁技術(shù)文章正文

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搭建,四張圖片按照從上到下的次序羅列,沒有任何布局樣式。

1603362002772_1.jpg

圖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后的效果,只顯示第一張圖片,將剩余的圖片隱藏。
1603362013157_2.jpg

圖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)頁的一種行為。

1603362021093_3.jpg

圖3焦點圖行為



猜你喜歡:

什么是變量?JavaScript變量命名規(guī)范介紹

6天玩轉(zhuǎn)電子商務ECharts數(shù)據(jù)可視化項目【黑馬程序員】

傳智播客web前端培訓課程 

黑馬程序員web前端培訓課程 

分享到:
在線咨詢 我要報名
和我們在線交談!