■ 預備知識
　　閱讀本書之前要先具備一些HTML知識。你可能開發(fā)過一兩個網站（或者至少寫過一兩個網頁），因此熟悉超文本標記語言（Hypertext Markup Language，簡稱HTML）眾多標簽中的一部分，例如、和.Hey,.I.am.the.title.of.this.web.page...Hey,.I.am.a.paragraph.on.this.web.page.
　　.
　　這段代碼沒有什么讓人興奮的地方，不過卻包含一個網頁所需的全部基本元素。你可能注意到了，上述代碼的開頭是文檔類型聲明，隨后是 標簽（注意，兩側有尖括號）、頭部和主體，主體部分是網頁要顯示的內容，最后是。
　　■ 文檔類型
　　網頁的開頭都是文檔類型，指明網頁是使用哪種HTML編寫的。HTML 4.01 和XHTML 1.0 這兩種類型使用好多年了，而且各自都有兩種風格：嚴格和過渡。例如，下述代碼表示過渡的HTML 4.01 文檔類型（嚴格的HTML 4.01 文檔類型和XHTML 1.0的兩種文檔類型聲明與此類似）：
　　仔細看前一節(jié)的示例代碼，你會發(fā)現(xiàn)那里使用的文檔類型聲明更簡潔：
　　這行代碼聲明的是 HTML5 文檔類型。與之前的版本相比，HTML5 更簡單，更易于使用。本書都使用HTML5 文檔類型，所有主流瀏覽器都支持這種文檔類型（連古老的 Internet Explorer 6 都支持），因此沒有任何理由不使用。
　　雖然舊版瀏覽器支持HTML5 文檔類型，但是并不是所有瀏覽器都支持全部的HTML5 標簽和功能。例如，Internet Explorer 8 及之前的版本就不能識別 HTML5 新添加的標簽。若想在這些 IE 版本中使用CSS為新添加的標簽編寫樣式，要借助一些JavaScript 代碼。后文的“讓IE8支持 HTML5”旁注會告訴你怎么做。
　　其實，關于文檔類型最重要的一點是，記住始終要聲明文檔類型。如果不聲明文檔類型，網頁在不同的瀏覽器中會有不同的表現(xiàn)，因為不知道文檔類型的話，瀏覽器不知道如何解析CSS。
　　不同的文檔類型對 HTML 的編寫方式有不同的要求。例如，在HTML 4.01 中，表示換行的標簽寫成：
　　而在 XHTML 中，要寫成：
　　在這方面，HTML5的優(yōu)勢又體現(xiàn)出來了，兩種寫法都可以。
　　■HTML標簽的工作原理
　　所有網頁的HTML代碼都與前面的示例一樣，大多數標簽都成對出現(xiàn)，一對標簽中可以直接寫入內容，也可以包含其他標簽。標簽放在一對尖括號中，告訴Web 瀏覽器如何顯示網頁。標簽是超文本標記語言中的“標記”部分。
　　標簽對的起始標簽告訴瀏覽器標記從哪里開始，結束標簽告訴瀏覽器標記到哪里結束。結束標簽在左尖括號（<）之后都有一個斜線（/）。
　　網頁一般至少包含下述四個部分：
　　.前一節(jié)說過，網頁的第一行是文檔類型聲明。
　　. 標簽在網頁開頭出現(xiàn)一次，在網頁末尾還會出現(xiàn)一次，不過這一次要加上斜線，寫成 。這個標簽的作用是告訴Web 瀏覽器，這個文檔的內容是使用HTML編寫的，而不是其他語言。網頁中的所有內容，包括其他標簽，都寫在 標簽對之間。
　　如果把網頁視作樹， 標簽就是樹的根。這棵樹有兩個枝杈，分別表示組成網頁的兩個主要部分：頭部和主體。
　　.網頁的頭部包含網頁的標題（例如“Izzie’s Mail-Order Pencils”），以及其他不可見的信息，例如瀏覽器和搜索引擎使用的網頁內容描述。頭部放在標簽對中。
　　此外，頭部區(qū)域還有其他信息，指明瀏覽器如何格式化頁面的HTML，還可以添加交互。讀到后文你會看到， 區(qū)域可以包含CSS 代碼（就是本書教你編寫的那種）或者鏈接，指向存儲CSS信息的文件。
　　.主體放在 標簽對中，里面的所有內容都會顯示在瀏覽器中，例如標題、文本和圖片等。
　　標簽中一般有如下標簽：
　　.
　　標簽（段落的起始標簽），告訴Web 瀏覽器一段文本從哪里開始；
　　標簽（段落的結束標簽），告訴瀏覽器一段文本到哪里結束。
　　.標簽，標記重要的文本。如果把文本放在標簽對里，文本會以粗體顯示。例如，Warning! 告訴Web 瀏覽器著重強調“Warning!”這個詞。
　　. 標簽（也稱錨記標簽），在網頁中創(chuàng)建超鏈接。單擊超鏈接（或簡稱鏈接）后可以訪問網絡中的其他網頁。鏈接指向的網址在起始標簽 中指定，例如Click.here!。
　　單擊“Click here!”后，瀏覽器知道要訪問The Missing Manual 網站。 標簽中的href 稱為屬性，那個URL（Uniform Resource Locator，意為“統(tǒng)一資源定位地址”，也稱網址）是這個屬性的值。在這個例子中，href 屬性的值是http://www.missingmanuals.com 。
　　■HTML5：提供更多標簽
　　HTML5 是HTML的當前版本，已經發(fā)布好幾年了。有時，提到HTML5 并不是指HTML標簽，而是指本地存儲（把網站的數據保存在訪客的電腦中）、地理定位（確定訪客在世界上的位置）或者使用WebGL 在網頁中繪圖。嚴格來說，這些技術并不屬于HTML，而是隨著HTML5一起出現(xiàn)的瀏覽器新特性。
　　在本書中，HTML5 始終指代HTML5 文檔類型，以及隨HTML5 標準一起發(fā)布的新標簽。HTML5 與之前的版本沒有太大差別，因為制定這個標準時考慮了向前兼容性。HTML之前版本的內容基本沒變，HTML5 只是根據當下Web 設計師開發(fā)網站的方式添加了一些新標簽，例如，HTML5 新增了 標簽，表示一般位于頁頭的內容，比如說徽標和站內導航鏈接；新增的 標簽用于放置站內鏈接；標簽表示一般會放在頁腳的內容，比如說法律條款和電子郵件地址等。
　　除此之外，HTML5 還新增了用于插入視頻和音頻的標簽；復雜的表單元素標簽，例如滑動條和彈出式日期選擇器；內置于瀏覽器中的表單驗證功能（確保訪客正確填寫表單）。本書會大量使用HTML5，尤其是下一章。
　　■編寫CSS的軟件
　　編寫由HTML和CSS組成的網頁只需簡單的文本編輯器，例如Notepad（Windows）或TextEdit（Mac ）。不過，在文本編輯器中編寫幾百行HTML和CSS之后，你可能想使用更適合用來編寫網頁的軟件。本節(jié)列出一些常用的軟件，有些是免費的，有些則是收費的。
　　其實，能協(xié)助我們編寫網頁的工具有幾百個，所以本節(jié)給出的列表并不完整。本節(jié)列出的是最受CSS開發(fā)者喜愛的軟件，只是拋磚引玉。
　　免費軟件
　　用于編輯網頁和樣式表的免費軟件有很多。如果一直使用Notepad 或TextEdit，不妨試試下面這些軟件。下面是最受歡迎的幾個軟件：
　　.Brackets（Windows，Mac，Linux；http://brackets.io/）。Adobe 領頭開發(fā)，免費開源，為編寫HTML和CSS提供了很多工具。這個編輯器專為Web 設計師和開發(fā)者而開發(fā)。
　　.Atom（Windows，Mac，Linux；https://atom.io/）。也是免費開源的文本編輯器，由GitHub（最受歡迎的代碼分享和協(xié)作網站）的員工開發(fā)。與Brackets 一樣，這個文本編輯器的目標用戶群也是Web 開發(fā)者。
　　.jEdit（Windows，Mac，Linux；http://jedit.org）。免費的文本編輯器，使用Java 開發(fā)，幾乎在任何電腦中都能使用，而且提供了收費文本編輯器才有的很多功能，例如CSS句法高亮。
　　.Notepad++（Windows；http://notepad-plus.sourceforge.net）。很多人特別喜
　　前言9歡這個速度快的文本編輯。這個編輯器甚至還內置了便于編寫HTML和CSS的功能，例如句法高亮——使用不同的顏色標記標簽和特殊的關鍵字，便于識別網頁中的HTML和CSS元素。
　　收費軟件
　　收費的網站開發(fā)軟件有便宜的，也有貴的，包含開發(fā)網站所需的各種工具：
　　.EditPlus（Windows；www.editplus.com）是便宜（35美元）的文本編輯器，支持句法高亮、FTP、自動補全和其他便利的功能。
　　.skEdit（Mac；www.skedit.com）是便宜的（30美元）網頁編輯器，完全支持FTP/SFTP、代碼提示和其他有用的功能。
　　.Coda2（Mac；www.panic.com/coda）是Web 開發(fā)套件（99美元），各種功能完善，包含文本編輯器、網頁預覽程序，支持FTP/SFTP，還提供了用于編寫CSS 的圖形化工具。
　　.Sublime Text（Windows，Mac，Linux；www.sublimetext.com）是一款強大的文本編輯器（70 美元），深受眾多 Web 開發(fā)者的喜愛。很多 Web 設計公司都使用這個編輯器。
　　是一款可視化網頁編輯器（每月19.99美元起）。使用Dreamweaver 編寫網頁的同時可以在Web 瀏覽器中查看網頁。這個軟件提供了強大的文本編輯器，以及編寫和管理 CSS的工具。這個軟件的完整使用說明參閱《Dreamweaver
　　CC: The Missing Manual 》。
　　本節(jié)給出的都是通用軟件，既可以編輯HTML，也可以編輯CSS。從這些工具中選出一個就能滿足Web 開發(fā)的需求。
　　■ 關于本書
　　萬維網特別易于使用，全國各地，從老人到一年級的小學生每天都會使用網絡。不過，網絡的運作規(guī)則并不那么易于理解。編寫官方文檔的計算機科學家和其他電腦人才并不樂于向普通用戶解釋相關的概念，你可以訪問www.w3.org/TR/css3-transforms，看看這些技術專家所寫的文檔是多么晦澀難懂。
　　想學習CSS的人往往不知道從哪開始，而且CSS有些微妙難解之處，有些熟練的Web 專家也搞不懂。本書的目的是填補空缺，為用戶提供CSS使用手冊，一步步說明如何使用CSS創(chuàng)建精美的網頁。
　　本書適合各種技能水平的讀者閱讀。為了更好地理解本書內容，你要具有一些基本的HTML知識，可能還要對CSS有些基本的了解。如果你從未編寫過網頁，可以先看“教程：首次編寫樣式”一節(jié)。本書內容主要針對已經入門或中級讀者。如果剛開始學習編寫網頁，可以閱讀帶有“加油站”標注的旁注，這些旁注是一些介紹性信息，能幫你更好地理解所講的知識。如果你是高級的Web 開發(fā)者，請?zhí)貏e留意帶有“高級用戶門診”標注的旁注，這些旁注為有經驗的電腦高手提供了很多技術方面的小技巧和快捷方法。
　　本書大綱
　　本書分為五部分，前四部分各有幾章內容，最后一部分是附錄。
　　.第一部分介紹如何編寫樣式表，簡要說明一些重要的CSS概念，例如繼承、選擇符和層疊。閱讀這一部分的過程中，你會學到使用CSS時編寫HTML的最佳實踐。這一部分有很多教程，目的是加深你對主要概念的理解，也是為了讓你一窺CSS的強大。
　　.第二部分實際動手，設計網頁。這一部分教你最重要的CSS屬性，用這些屬性裝飾文本，創(chuàng)建有用的導航，使用圖片提升網頁的外觀；還會教你如何使用CSS制作簡單的動畫，說明如何制作吸引人的表格和表單。
　　.第三部分說明最難理解但最值得學習的CSS功能——控制網頁的布局。這一部分會教你如何創(chuàng)建常見的布局（例如兩欄和三欄），如何添加側邊欄，教你浮動和定位，這是控制網頁布局最常使用的CSS技術。除此之外，還會教你如何編寫適應桌面瀏覽器、平板電腦瀏覽器和移動設備瀏覽器的網頁，以及一種網頁布局的強大新方式——彈性盒模型（flexbox ）。
　　.第四部分涵蓋一些改進CSS的高級技巧，還會介紹Sass，強大而高效的樣式表編寫方式。
　　.第五部分提供兩份參考資料。一份是“CSS屬性參考”，簡要列出一些有用的CSS屬性，以便參考。其中一些屬性你可能沒見過，閱讀這份參考可以快速學習；有些屬性則是你已經知道的，閱讀這份參考可以鞏固知識。另一個附錄介紹一些編寫及使 CSS的工具和資源。
　　■ 基礎知識
　　為了能順利閱讀本書，其實也為了能正確使用電腦，你要知道一些基礎知識。你要熟悉以下術語和概念：
　　.點擊。說明如何使用電腦的鼠標或觸控板時，本書會使用三種表達方式。
　　前言11“點擊”的意思是，把箭頭光標移到屏幕上的某個位置，停在那里不動，按鼠標（或筆記本電腦的觸控板）上的左鍵，然后松開�！鞍从益I”與“點擊”的意思差不多，不過按的是鼠標上的右鍵（如果鼠標沒有右鍵，而且使用的是Mac 電腦，可以同時按左鍵和Control 鍵）。
　　“雙擊”的意思是，快速連續(xù)點擊兩次，點擊的過程中也不能移動光標�！巴蟿印钡囊馑际牵�按住鼠標左鍵不放，移動光標。如果讓你在PC上按Ctrl 鍵點擊，或者在Mac 上按z鍵點擊，意思是讓你在點擊的同時按住Ctrl 或z鍵。
　　.菜單�！安藛巍笔侵钙聊换虼翱陧敳匡@示的文字，例如“文件”和“編輯”等。點擊這些菜單后會顯示一系列命令，不過這些命令在下拉窗口中顯示。本書假定你知道如何打開程序，知道如何瀏覽網頁，也知道如何下載文件。你應該知道如何使用Windows 系統(tǒng)的開始菜單，或者知道如何使用Mac OS X 系統(tǒng)的Dock 或Apple 菜單；也應該知道如何使用Windows 系統(tǒng)的控制面板或Mac OS X 系統(tǒng)的系統(tǒng)偏好設置。
　　.鍵盤快捷鍵。每次從鍵盤上移開手去握鼠標都會浪費時間，還可能會打斷思路。因此，只要可能，很多有經驗的電腦用戶都會使用組合鍵，而不是點擊菜單中的命令。讓你使用 Ctrl+S（z-S）快捷鍵（保存當前文檔的改動）時，你要按住Ctrl 或z鍵，再按S鍵，然后同時松開兩個按鍵。
　　關于箭頭符號（→）
　　本書以及The Missing Manual 系列的其他書都經常出現(xiàn)這樣的句子：“打開‘系統(tǒng)
　　→庫→字體’文件夾”。這是一種簡述，表示要打開三個嵌套的文件夾，例如：“硬盤中有個名為‘系統(tǒng)’的文件夾，打開這個文件夾。在‘系統(tǒng)’文件夾中有個名為‘庫’的文件夾，雙擊這個文件夾將其打開。在打開的文件夾里有個名為‘字體’的文件夾，再次雙擊，將其打開。”
　　這種帶有箭頭符號的簡述還用于表示從菜單中選擇命令，如圖I-1所示。
　　■ 關于在線資源
　　……