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