1. 程式人生 > >瀏覽器頁面有哪三層構成,分別是什麼,作用是什麼?

瀏覽器頁面有哪三層構成,分別是什麼,作用是什麼?

問:瀏覽器頁面有哪三層構成,分別是什麼,作用是什麼?

構成:結構層、表示層、行為層

分別是:HTML、CSS、JavajScript

作用:HTML實現頁面結構、CSS完成頁面的表現與風格、JavaScript實現客戶端的一些功能和業務

 

1、網頁的結構層(structural layer)由HTML或XHTML之類的標記語言負責建立,標籤就是那些出現在尖括號裡的單詞,對網頁的語義含義做出了描述,但這些標籤不包含任何關於如何顯示有關的資訊,例如p標籤表達了這樣一種語義:“這是一段文字段”。之前頁面佈局都習慣採用div標籤,這是一個沒有任何語義的標籤,現在頁面製作都傾向於標籤的語義化,可以使爬蟲更容易捕獲到網頁資訊。

2、網頁的表示層(presentation layer)由CSS負責建立、CSS對“如何顯示有關內容”作了回答。

3、網頁的行為層(behavior layer)負責回答“內容應該如何對事件作出反應”這一問題。這是JavaScript語言和DOM主宰的領域。

網頁的表示層和行為層總是存在的,即使我們未明確地給出任何具體的指令也是如此。此時,Web瀏覽器將把它的預設樣式和預設事件處理函式施加在網頁的結構層上。例如,瀏覽器會在呈現“文字段”元素時留出頁邊距,有些瀏覽器會在使用者把滑鼠指標懸停在某個元素的上方時彈出一個顯示著該元素的 title 屬性值的提示框,等等。 分離在所有的產品設計活動中,選擇最適用的工具去解決問題是最基本的原則。具體到網頁設計工作。 使用 (X)HTML去搭建文件的結構。  使用 CSS 去設定文件的呈現效果。 使用DOM 指令碼去實現文件的行為。      

        不過,在這三種技術之間存在著一些潛在的重疊區域,如:DOM技術可以用來改變網頁的結構。在 CSS身上也可以找到這種技術相互重疊的例子。諸如 :hover 和 :focus 之類的預定義符號(偽class屬性)使我們可以根據使用者觸發事件來改變呈現效果。改變元素的呈現效果當然是表示層的“勢力範圍”,但對使用者觸發事件做出反應卻是行為層的領地。表示層和行為層的這種重疊形成了一個灰色地帶。偽 class 屬性是 CSS 正在深入 DOM 領地證據,但 DOM在這方面也不是毫無作為。我們完全可以利用 DOM 技術把樣式資訊施加在HTML 元素身上。分離的效果要做到即使去掉表示層和行為層,文件的內容也依然可以訪問,因為“內容才是一切”。而且網頁的行為層(javascript) 與其結構(XHTML) 是彼此互不干擾的,不能混雜在一起。還要給行為層“預留退路”,要考慮到如果你的使用者禁用了Javascript會怎樣?網頁是否還可以正常運作。這些理論的東西是基本的思想,具體的大家要在不斷的實踐過程中去慢慢體會。總之,這三種技術就像是一個凳子的三條腿,要想成為一名技能全面的全棧Web 工程師,就必須熟練掌握這三種技術,並知道每種技術最適用於哪一類問題。