教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

Web開發(fā)兼顧多個(gè)版本瀏覽器的通用方法?

更新時(shí)間:2020年10月22日18時(shí)16分 來源:傳智播客 瀏覽次數(shù):

通常在web開發(fā)中,由于不同的瀏覽器對同一個(gè)網(wǎng)頁文件解析出來的效果可能不一致,為了讓用戶能夠看到正常顯示的網(wǎng)頁,web開發(fā)者常常需要為兼容多個(gè)版本的瀏覽器而苦惱,當(dāng)使用新的硬件(如移動電話)和軟件(如微瀏覽器)開始瀏覽網(wǎng)頁時(shí),這種情況會變得更加嚴(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)用于對網(wǎng)頁中用到的信息進(jìn)行分類與整理。在結(jié)構(gòu)中用到的技術(shù)主要包括HTML、XML和XHTML。
  l HTML 是超文本標(biāo)記語言(關(guān)于該語言會在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ī)則對其進(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對文字和圖片以及模塊的背景和布局進(jìn)行相應(yīng)的設(shè)置。后期如果需要更改樣式只需要調(diào)整CSS代碼即可。
  3. 行為
  行為是指網(wǎng)頁模型的定義及交互的編寫,主要包括DOM(對象模型)和ECMAScript兩個(gè)部分,具體解釋如下。
  l DOM(英文Document Object Model的縮寫)指的是W3C中的文檔對象模型。W3C文檔對象模型(DOM)是中立于平臺和語言的接口,它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。
  l ECMAScript是ECMA(英文European Computer Manufacturers Association的縮寫)國際以JavaScript為基礎(chǔ)制定的標(biāo)準(zhǔn)腳本語言。JavaScript是一種基于對象和事件驅(qū)動,并具有相對安全性的客戶端腳本語言,廣泛用于Web開發(fā),常用來給HTML網(wǎng)頁添加動態(tài)功能,例如響應(yīng)用戶的各種操作。
  如圖3所示,是焦點(diǎn)圖模塊加入Javascript后的效果。每隔一段時(shí)間,焦點(diǎn)圖就會自動切換,并且當(dāng)用戶的鼠標(biāo)移上選擇按鈕時(shí),會顯示對應(yīng)的圖片,鼠標(biāo)移開后又會按照默認(rèn)的設(shè)置自動輪播,這就是網(wǎng)頁的一種行為。


圖3焦點(diǎn)圖行為
0 分享到:
和我們在線交談!