最準確的網頁設計思路是把網頁分成三個層次，即：結構層、表示層、行為層。

網頁的結構層（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 技術師，就必須熟練掌握這三種技術，并知道每種技術最適用于哪一類問題。

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第四十七篇之前端页面的组成（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。