#第一章 基礎知識
XHTML,指的是Extendsible Hypertext Marker Language , 當使用(X)HTML這個術語時指的是XHTML和HTML;html
1.1 設計代碼的結構web
1.1.1 使用有意義的標記瀏覽器
1.1.2 文檔類型、DOCTYPE切換和瀏覽器模式
DTD(文檔類型定義)是一組機器可讀的規則,他們定義XML或(X)HTML的特定版本中容許有什麼,不容許有什麼。 在解析網頁時,瀏覽器將使用這些規則檢查頁面的有效性而且採起相應的措施。瀏覽器經過分析頁面的DOCTYPE聲明來了解 使用哪一個DTD,所以知道要使用(X)HTML的哪一個版本。
DOCTYPE聲明是(X)HTML文檔開頭處的一行或兩行代碼,它描述哪一個DTD。在下面的示例中,要使用的DTD是XML
1.0 Strict的DTD:dom
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOCTYPE一般(但不老是)包含指定的DTD文件的URL。瀏覽器通常不讀取這些文件,而是隻識別常見的DOCTYPE聲明。設計
1 有效性檢驗code
2 瀏覽器模式htm
3 DOCTYPE切換
瀏覽器根據DOCTYPE是否存在以及使用的DTD來選擇要使用的表現方法。若是XHTML文檔包含形式完整的DOCTYPE,那麼它通常以標準模式表現。 對於HTML4.01文檔,包含嚴格DTD的DOCTYPE經常致使頁面以標準模式表現。包含過分DTD和URI的DOCTYPE也致使頁面以標準模式表現, 可是有過分DTD而沒有URI會致使頁面以怪異模式表現。DOCTYPE不存在或形式不正確會致使HTML和XHTML文檔以怪異模式表現。 根據DOCTYPE是否存在選擇表現方法的效果被稱爲DOCTYPE切換(DOCTYPE switching)或DOCTYPE偵測(DOCTYPE sniffing)。 並不是全部瀏覽器都採用這些規則,可是這些規則很好地說明了DOCTYPE切換的工做方式。Eric Meyer什麼研究了這個主題,而且製做了 一張圖表(http://meyerweb.com/dom/dtype/dtype-grid.html)來講明不一樣的瀏覽器如何根據DOCTYPE聲明選擇表現方法。
DOCTYPE切換是瀏覽器用例區分遺留文檔和符合標準的文檔的手段。不管是否編寫了有效的CSS,若是選擇了錯誤的DOCTYPE,那麼頁面就將以 怪異模式表現,其表現就可能會有錯誤或不可預測。所以,必定要在站點的每一個頁面上包含形式完整的DOCTYPE聲明,而且在 使用HTML時嚴格選擇DTD。文檔
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/DTD/xhtml1-transitional.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1.2 爲樣式找到目標get
1.2.1 經常使用的選擇器
最經常使用的選擇器類型是類型選擇器和後代選擇器。類型選擇器用來尋找特定類型的元素,好比段落、錨或標題元素,只須要指定但願應用樣式的元素的名稱, 類型選擇器有時候也成爲元素選擇器或簡單選擇器。it
p{color:balck;} a{text-decoration: underline;} h1{font-weight:bold;}
後代選擇器可用來尋找特定元素或元素組的後代。後代選擇器由其餘兩個選擇器之間的空格表示。在下面的示例中,只在做爲列表項的後代的錨元素上應用樣式, 而段落中的錨不受影響。
li a{text-decoration:none;}
這兩種選擇器適合於應用那些應用範圍廣的通常性樣式。要想尋找更特定的元素,可使用ID選擇器和類選擇器。ID選擇器由一個#字符表示,類選擇器由一個 點號表示。
#intro{font-weight:bold;} .datePosted{color:green;} <p id="intro">Some Text</p> <p class="datePosted">24/3/2006</p>