隨著互聯網的普及和技術的不斷發展,企業對于web前端開發工程師的需求量越來越大,可見web前端開發工程師在市場上有著廣泛的就業空間,web前端開發作為一個快速發展的領域,為了提高開發效率和質量,web前端開發工程師需要掌握各種前端開發技術,那么web前端開發頁面有哪三層構成呢,今天八維職業學校和大家一起來看看,希望有助于大家學習。

有許多web設計師都有為紙質印刷品設計版面的經驗。事實上,設計網站時,把網頁當做紙質印刷品來對待是最容易想到的思想,除了把白紙換成了屏幕,其他做法沒什么兩 樣。這種做法注定會失敗。 Web 是一種不同的媒體。在設計紙質印刷品是時,必須把原始內容和版面設計交織在一起才能看到最終的印刷效果,但在設計網頁時,只有將其分離開來才能獲得最佳的 結果。
最準確的網頁設計思路是把網頁分成三個層次,即:結構層、表示層、行為層。
網頁的結構層(structural layer)由 HTML 或 XHTML 之類的標記語言負責創建。標簽,也就是那些出現在尖括號里的單詞,對網頁內容的語義含義做出了描述,但這些標簽不包含任何關于如何顯示有關內容的信息。例如,P 標簽表達了這樣一種語義:"這是一個文本段。"
網頁的表示層(presentation layer) 由 CSS 負責創建。 CSS 對"如何顯示有關內容"的問題做出了回答。
網頁的行為層(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技術師,就必須熟練掌握這三種技術,并知道每種技術最適用于哪一類問題。


學制學費
學習時間
近期活動
開班信息
課程內容
就業情況
津公網安備12011302141430
如何成為IT行業中有競爭力的人工智能工程師?
在當今數字化浪潮洶涌澎湃的時代,人工智能作為 IT 行業最具爆發力的領域之一,正重塑著世界的方方面面,從醫療保健到金融服務,從智能交通到娛樂產業,其影響力無處不在。若想成為這一充滿魅力與挑戰領域中的佼佼者 —— 極具競爭力的人工智能工程師,需要在多個維度精心打磨自己。