三位一體的網頁:
我們在瀏覽器里看到的網頁其實是由以下三層信息構成的一個共同體:
1、結構層:
結構層是由HTML和XHTML之類的標記語言所構成的。所就是哪些出現在html標簽里面的單詞,對網頁內容的語義含義作出了如下描述,例如,<p>This is a paragraph</p>標簽表達了這樣一個語意:這是一個文本段落。但這些標簽并不包含任何關于段落如何顯示的信息。
2、表示層:
表示層由CSS負責完成。CSS描述頁面內容應該如何呈現。
3、行為層:
行為層負責內容應該如何響應事件這一問題,這是JavaScript語言和DOM所主宰的領域.
?
注意:網頁的顯示層和行為層總是存在的即使創建的網頁為給定任何具體的指令也是如此。此時Web瀏覽器將應用它給出的默認樣式和默認事件處理函數,比如:瀏覽器會在呈現文本段元素時,留出默認頁邊距,當用戶把鼠標指針懸停在某個元素上方時,有時候瀏覽器會彈出一個顯示著該元素title屬性值的彈出框等等。
?
在所有的產品設計過程中,選擇最適用的工具去解決問題是最基本的原則。具體到網頁設計工作,這意味著:
我們將使用(X)HTML去搭建文檔的結構;
使用CSS去設置文檔的呈現效果;
使用DOM腳本去實現文檔的行為;
?
但是在這三種技術之間存在著一些潛在的重疊區域,相信大家都會遇到過,用DOM可以改變結構層的結構,諸如createElement()和appendChild()之類的方法允許你動態創建標記,表現層可以用:hover和:focus之類的偽類觸發事件來改變元素的展示效果。改變元素的呈現效果當然是表示層的"勢力范圍",但響應用戶觸發的事件確實行為層的領地。行為層和表示層的這種重疊形成了一種灰色地帶。確實,CSS正在利用偽類走進DOM的領地,但DOM也有反擊之道。你也可以利用DOM來給元素設置樣式。