最準(zhǔn)確的網(wǎng)頁(yè)設(shè)計(jì)思路是把網(wǎng)頁(yè)分成三個(gè)層次，即：結(jié)構(gòu)層、表示層、行為層。

網(wǎng)頁(yè)的結(jié)構(gòu)層（structural layer）由 HTML 或 XHTML 之類(lèi)的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段。”

網(wǎng)頁(yè)的表示層（presentation layer） 由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。

網(wǎng)頁(yè)的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題。這是 Javascript 語(yǔ)言和 DOM 主宰的領(lǐng)域。

網(wǎng)頁(yè)的表示層和行為層總是存在的，即使我們未明確地給出任何具體的指令也是如此。此時(shí)， Web 瀏覽器將把它的默認(rèn)樣式和默認(rèn)事件處理函數(shù)施加在網(wǎng)頁(yè)的結(jié)構(gòu)層上。例如，瀏覽器會(huì)在呈現(xiàn)“文本段”元素時(shí)留出頁(yè)邊距，有些瀏覽器會(huì)在用戶(hù)把鼠標(biāo)指針懸停在 某個(gè)元素的上方時(shí)彈出一個(gè)顯示著該元素的 title 屬性值的提示框，等等。

分離

在所有的產(chǎn)品設(shè)計(jì)活動(dòng)中，選擇最適用的工具去解決問(wèn)題是最基本的原則。具體到網(wǎng)頁(yè)設(shè)計(jì)工作，這意味著：

使用 (X)HTML 去搭建文檔的結(jié)構(gòu)。
使用 CSS 去設(shè)置文檔的呈現(xiàn)效果。
使用 DOM 腳本去實(shí)現(xiàn)文檔的行為。

不過(guò)，在這三種技術(shù)之間存在著一些潛在的重疊區(qū)域，如：DOM 技術(shù)可以用來(lái)改變網(wǎng)頁(yè)的結(jié)構(gòu)。在 CSS 身上也可以找到這種技術(shù)相互重疊的例子。諸如 :hover 和 :focus 之類(lèi)的預(yù)定義符號(hào)（偽 class 屬性） 使我們可以根據(jù)用戶(hù)觸發(fā)事件來(lái)改變呈現(xiàn)效果。改變?cè)氐某尸F(xiàn)效果當(dāng)然是表示層的“勢(shì)力范圍”，但對(duì)用戶(hù)觸發(fā)事件做出反應(yīng)卻是行為層的領(lǐng)地。表示層和行為層 的這種重疊形成了一個(gè)灰色地帶。

偽 class 屬性是 CSS 正在深入 DOM 領(lǐng)地證據(jù)，但 DOM 在這方面也不是毫無(wú)作為。我們完全可以利用 DOM 技術(shù)把樣式信息施加在 HTML 元素身上。

分離的效果要做到即使去掉表示層和行為層，文檔的內(nèi)容也依然可以訪問(wèn)，因?yàn)椤皟?nèi)容才是一切”。而且網(wǎng)頁(yè)的行為層 (javascript) 與其結(jié)構(gòu) (XHTML) 是彼此互不干擾的，不能混雜在一起。還要給行為層“預(yù)留退路”，要考慮到如果你的用戶(hù)禁用了 Javascript 會(huì)怎樣？是不可網(wǎng)頁(yè)還可以正常運(yùn)作。

總之，這三種技術(shù)就像是一個(gè)凳子的三條腿，要想成為一名技能全面的 Web 技術(shù)師，就必須熟練掌握這三種技術(shù)，并知道每種技術(shù)最適用于哪一類(lèi)問(wèn)題。

本面試題為前端常考面試題，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。