本書通過大量動手操作和案例全程記錄了網(wǎng)頁開發(fā)與設計過程, 全書共14章, 主要涉及以下重要主題: HTML和CSS編碼; 網(wǎng)頁設計最佳實踐; 鏈接、布局、移動性; 網(wǎng)頁開發(fā); 網(wǎng)頁多媒體與交互性; 電子商務概覽; 網(wǎng)頁提升; JavaScript和jQuery簡介。內(nèi)容充實, 案例豐富, 實用性強。
作為網(wǎng)頁開發(fā)與設計入門經(jīng)典，《學習HTML5（第7版）》涵蓋網(wǎng)頁設計師必知必會的以下基礎技術：
互聯(lián)網(wǎng)概念
用HTML5創(chuàng)建Web頁面
用層疊樣式表（CSS）配置文本、顏色、頁面布局
網(wǎng)頁設計佳實踐
無障礙訪問標準
網(wǎng)頁開發(fā)流程
在頁面上添加多媒體與交互式元素
CSS3新特性
網(wǎng)站性能提升與搜索引擎優(yōu)化
電子商務與萬維網(wǎng)
JavaScript
前言
這是一本網(wǎng)頁開發(fā)的入門教程，內(nèi)容涵蓋了網(wǎng)頁開發(fā)人員需要掌握的基礎技術，具體如下所述：
互聯(lián)網(wǎng)概念
用HTML5創(chuàng)建網(wǎng)頁
用層疊樣式表(CSS)配置文本、顏色、頁面布局
網(wǎng)頁設計最佳實踐
無障礙訪問標準
網(wǎng)頁開發(fā)流程
在頁面上添加多媒體與交互式元素
CSS3新特性
網(wǎng)站性能提升與搜索引擎優(yōu)化
電子商務與萬維網(wǎng)
JavaScript
本書特別為讀者提供了支持特性，即“網(wǎng)頁開發(fā)者手冊”，這是一系列附錄資源的集合，包括HTML5參考、XHTML參考、HTML5和XHTML的比較、特殊實體字符列表、CSS屬性參考、WCAG2.0快速參考以及FTP教程。
本書第7版主要關注HTML5，這種聚焦重點的做法對網(wǎng)頁開發(fā)初學者來說是有益的。本書綜合講解HTML與CSS主題，例如文本配置、顏色配置、頁面布局，同時重點突出設計、無障礙訪問、萬維網(wǎng)標準等方面的內(nèi)容。第7版中的新特性主要有以下幾項：
增加了頁面布局設計方面的內(nèi)容
增加了針對移動設備進行設計的內(nèi)容
增加了響應式網(wǎng)頁設計技術與CSS媒體查詢
介紹了新的CSS3彈性盒(Flexbox)——可變布局容器模塊
更新了JavaScript相關內(nèi)容，增加了針對jQuery的介紹
更新了XHTML、HTML5和CSS參考部分的內(nèi)容
增加了供讀者動手實踐的練習
更新了學習案例
更新了代碼示例、案例學習和網(wǎng)頁資源
書中的學生文件可以到本書支持網(wǎng)站下載，網(wǎng)址為http://www.pearsonhighered.com/felke-morris。這些文件包括了動手練習的解答和網(wǎng)站案例學習的入門文件。
認真完成本書學習之后，你就能夠利用現(xiàn)有技術來設計網(wǎng)頁了。此外，本書也為你將來運用新的HTML5與CSS3代碼技術打下了基礎。
本書的組織結構
本書的組織結構如下圖所示。
圖P.1本書的組織比較靈活，讀者可根據(jù)自己的需求選擇閱讀
本書廣泛適用于各種教程與學習需求，讀者可自行靈活掌握使用方法。第1章提供了一些介紹性的材料，視讀者自身背景的不同可選擇閱讀或跳過。第2章至第4章介紹了HTML和CSS編碼。第5章討論了網(wǎng)頁設計的最佳實踐，可以在學習完第3章之后馬上跳轉至此(或者與第3章配合起來學習)。第6章至第9章繼續(xù)介紹HTML與CSS。
后續(xù)章節(jié)各自為獨立的學習體系，均可以視學習時間與學習需求的不同選擇閱讀：第7章(更多有關鏈接、布局、移動性)、第10章(網(wǎng)頁開發(fā))、第11章(網(wǎng)頁多媒體與交互性)、第12章(電子商務概覽)、第13章(網(wǎng)頁提升)、第14章(對JavaScript和jQuery的簡單介紹)。
各章概覽如下所示。
第1章“互聯(lián)網(wǎng)與萬維網(wǎng)介紹”，本章簡單介紹了一些與互聯(lián)網(wǎng)和萬維網(wǎng)有關的術語與概念，這些知識是網(wǎng)頁開發(fā)人員需要了解的。對許多讀者來說，可將某些內(nèi)容視作回顧。第1章為本書其余章節(jié)的基礎。
第2章“HTML基礎”，在介紹HTML5的同時，我們還提供了一些示例與練習，以鼓勵讀者動手創(chuàng)建網(wǎng)頁，從中獲取有益經(jīng)驗。在學生文件中提供了動手實踐環(huán)節(jié)的參考答案。
第3章“用CSS配置顏色和文本”，本章介紹用層疊樣式表(CascadingStyleSheetst，CSS)配置網(wǎng)頁顏色與文本的技術。我們建議讀者在閱讀的過程中動手練習實踐。相關的參考答案在學生文件的動手實踐部分可以找到。
第4章“視覺元素與圖形”，本章討論如何在網(wǎng)頁上應用圖形與視覺效果，包括圖像優(yōu)化、CSS邊框、CSS圖像背景、新的CSS3視覺效果以及新的HTML5元素等內(nèi)容。我們建議讀者在學習的過程中動手練習實踐。相關的參考答案在學生文件的動手實踐部分可以找到。
第5章“網(wǎng)頁設計”，本章主要關注推薦的網(wǎng)頁設計實踐與無障礙訪問，并對部分內(nèi)容加以強化，因為某些推薦的網(wǎng)站設計實踐需要與其他章節(jié)相結合。
第6章“頁面布局”，本章繼續(xù)之前已經(jīng)開始的CSS學習，介紹了有關布放與浮動網(wǎng)頁元素有關的技術，其中包括雙欄式的CSS頁面布局。新的HTML5語義元素與技術使得較早版本的瀏覽器也能兼容HTML5，我們將介紹相有關知識。學生文件的動手實踐部分中提供了示例方案。
第7章“鏈接、布局與移動性的更多內(nèi)容”，本章回顧之前的一些主題，然后介紹了超鏈接、CSS精靈(CSSsprites)的使用、三欄式頁面布局、配置與打印有關的CSS、設計移動互聯(lián)網(wǎng)網(wǎng)頁、用CSS多媒體查詢設計自適應網(wǎng)頁、新的CSS3彈性盒布局模塊等知識。讀者在閱讀的過程中可以動手練習實踐。相關的參考答案在學生文件的動手實踐部分可以找到。
第8章“表格”，本章主要關注用HTML元素創(chuàng)建表格。介紹了利用CSS來配置表格的方法。我們建議讀者在閱讀的過程中可以動手練習實踐。相關的參考答案在學生文件的動手實踐部分可以找到。
第9章“表單”，本章主要講解如何用HTML元素創(chuàng)建表單。介紹了利用CSS來配置表單的方法，以及新的HTML5表單控制元素與屬性。我們建議讀者在閱讀的過程中動手練習實踐。相關的參考答案在學生文件的動手實踐部分可以找到。
第10章“網(wǎng)頁開發(fā)”，本章關注于網(wǎng)站開發(fā)過程，包括大規(guī)模項目的作業(yè)角色需求、網(wǎng)頁設計過程以及網(wǎng)頁寄存等內(nèi)容。本章還介紹了網(wǎng)頁主機檢查表的有關知識。
第11章“網(wǎng)頁多媒體與交互性”，我們可以在網(wǎng)頁上添加多媒體、交互性等元素，本章簡單介紹了相關內(nèi)容。這些主題包括新的HTML5視頻和音頻、Flash動畫、Javaapplets、CSS圖片庫(CSSImageGallery)、新的CSS3變形與漸變屬性、JavaScript、jQuery、Ajax以及新的HTML5API等。我們建議讀者在閱讀的過程中動手練習實踐。相關的參考答案在學生文件的動手實踐部分可以找到。
第12章“電子商務概覽”，本章介紹電子商務、安全性、網(wǎng)頁上的訂單處理流程等內(nèi)容。
第13章“網(wǎng)頁提升”，本章從網(wǎng)頁開發(fā)人員的角度討論網(wǎng)站性能的提升問題，并介紹搜索引擎的優(yōu)化知識。
第14章“JavaScript和jQuery簡介”，本章介紹利用JavaScript和jQuery寫客戶端腳本的技術。相關的示例方案在學生文件的動手實踐部分可以找到。
?附錄“網(wǎng)頁開發(fā)者手冊”，該附錄包含讀者在學習過程中需要的資源與教程，例如HTML5快速參考、特殊實體字符、CSS屬性參考、HTML5與XHTML比較、WCAG2.0快速參考、網(wǎng)頁安全色彩調(diào)色板以及FTP教程。
本書具有如下特點。
?題材選擇廣泛：本書既包含HTML5、CSS、JavaScript等“硬技術”(第2、3、4、6、7、8、9章)，也包含網(wǎng)頁設計(第5章)、網(wǎng)站提升(第13章)、電子商務(第12章)等軟技能。這就能為讀者打下扎實而全面的基礎，從而為從事網(wǎng)頁設計相關工作助一臂之力。老師和學生在教學中會發(fā)現(xiàn)這是個十分有趣的過程，因為大家可以在學習創(chuàng)建網(wǎng)頁與網(wǎng)站時一邊討論、一邊融會貫通地綜合使用“硬技術”和“軟技能”。
動手實踐：網(wǎng)頁開發(fā)是一項技能，任何技能都需要經(jīng)過實踐才能提升。本書強調(diào)了章節(jié)內(nèi)部的動手實踐環(huán)節(jié)，每一章結束還有練習，同時學習實際運行著的真實互聯(lián)網(wǎng)網(wǎng)站案例。多種多樣的練習內(nèi)容便于老師根據(jù)課程或學期的需要靈活選擇。
網(wǎng)站案例學習：從第2章起貫穿全書我們提供了針對四個網(wǎng)站的案例研究。另一個案例從第5章開始。案例研究有助于鞏固每一章學習的內(nèi)容。教師可以學期為周期循環(huán)安排案例，學生們也可以根據(jù)自己的興趣來選擇。案例學習的參考答案可以從本書的教師資源中心下載，地址是http://www.pearsonhighered.com/irc。
網(wǎng)頁研究我們在每一章中都安排了網(wǎng)頁研究環(huán)節(jié)，從而激勵學生們進一步鉆研該章主題。
關注網(wǎng)頁設計本書中大多數(shù)章節(jié)里都設計了配套的活動，以深入探索與該章主題相關的網(wǎng)頁設計技巧。這些活動將幫助學生鞏固、拓展和提升課程中所學主題。
FAQ：在作者的網(wǎng)頁開發(fā)課程中，學生們經(jīng)常會問一些類似的問題。作者對此加以整理，在本書中增加了這一環(huán)節(jié)，并添加了FAQ標識。
自測題：每一章有兩至三篇自測題，匯聚了若干問題，便于學生們在學習過程中及時總結自我評估。每組問題上都有特殊的自測題圖標。
關注無障礙訪問：開發(fā)易于訪問的網(wǎng)站的重要性日益彰顯，因此本書將對無障礙訪問的關注貫穿始終。在有關無障礙訪問的內(nèi)容處我們設置了特殊圖標以便于查找。
關注道德標準：本書中與網(wǎng)頁開發(fā)有關的道德標準內(nèi)容以高亮顯示，并設置了特殊的圖標。
參考材料：本書附錄中提供了網(wǎng)頁開發(fā)人員手冊，內(nèi)容包含HTML5快速參考、特殊實體字符、HTML5與XHTML比較、CSS屬性參考、WCAG2.0快速參考、FTP教程、網(wǎng)頁安全色調(diào)色板等。
補充材料
學生資源
編寫網(wǎng)頁練習中的學生文件、網(wǎng)站實例研究以及相關VideoNotes資源，都可以在本書的配套網(wǎng)站上獲取，網(wǎng)址是http://www.pearsonhighered.com/felke-morris。如果書籍推出新版本，相應的資源仍能提供免費的訪問。
教師資源
我們?yōu)榻處熖峁┝讼铝薪虒W輔助資源。請訪問Pearson的教學資源中心(http://www.pearsonhighered.com/irc)。我們提供的內(nèi)容如下：
每章課后練習的答案
實例研究練習的答案
測試題
PPT展示資源
示例教學大綱
作者的個人網(wǎng)站
除了出版社的支持網(wǎng)站外，本書作者建有個人網(wǎng)站，網(wǎng)址為http://www.webdevfoundations.net。在這個站點上為讀者提供了另外一些有用的資源，包括復習練習以及展示各章示例、鏈接、更新信息的頁面。出版社不負責該網(wǎng)站的維護。
Terry Felke-Morris
她一名計算機信息系統(tǒng)教授，來自伊利諾斯州帕拉廷市的威廉雷尼哈珀學院。她擁有教育博士學位、信息系統(tǒng)理科碩士學位，以及包括Adobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster、 MicrosoftCertified Professional、Master CIW Designer，和 CIW Certified Instructor在內(nèi)的眾多認證證書。
Felke-Morris博士獲得過威廉雷尼哈珀學院頒發(fā)的教學技術Glenn A. Reich紀念獎，以表彰她在學院的網(wǎng)頁開發(fā)程序與課程中的設計工作。2006年，她因為在教學中出色地運用互聯(lián)網(wǎng)技術而榮獲Blackboard Greenhouse 的在線教學示范將。Felke-Morris博士在2008年收獲了兩個國際獎項：教學技術委員會的電子教學杰出能力獎以及MERLOT的在線教學資源示范獎。
因其在商務與工業(yè)領域超過25年的信息技術經(jīng)驗，F(xiàn)elke-Morris博士于1996年開通了她的一個個人網(wǎng)站，并且維護至今。她長期致力于萬維網(wǎng)標準的提升，已經(jīng)成為萬維網(wǎng)標準項目教育任務項目組的成員。Felke-Morris博士是威廉雷尼哈珀學院網(wǎng)頁開發(fā)認證與學位認定項目組的資深成員。更多有關Felke-Morris博士的信息，請訪問http://terrymorris.net。
潘玉琪
同濟修智能交通，學成后入行IT，與數(shù)據(jù)深交多年，業(yè)余時間不是窩在書房里看看寫寫畫畫，就是鉆到廚房里折騰鍋碗瓢盆，被譽為“交通圈里*會做菜的IT攻城獅”，實為一枚如假包換的程序媛。平生*大的愿望是一路逛吃逛吃走飯遍天下，然后回家山寨克隆另立門派。熱愛美食與電影，業(yè)余在“小筑飯”（微信號：hspyq0601）碼字寫隨筆。代表譯著有《極客趣談I：創(chuàng)意料理語營養(yǎng)美食》與《SQL Server 2012從入門到精通》。
第3章用層疊樣式表CSS配置顏色與文本
本章學習目標
從打印媒介到萬維網(wǎng)，樣式表的發(fā)展歷程
層疊樣式表(CascadingStyleSheets，CSS)的優(yōu)點
在網(wǎng)頁上配置背景與文本顏色
創(chuàng)建用于配置通常顏色與文本屬性的樣式表
應用內(nèi)聯(lián)樣式
使用內(nèi)嵌的樣式表
使用外部樣式表
配置元素、類、id和派生選擇器
在CSS中實現(xiàn)層疊(cascade)效果
驗證CSS
現(xiàn)在你對HTML已經(jīng)有所了解，是時候開始探索層疊樣式表(CascadingStyleSheets，CSS)的奧秘了。網(wǎng)頁設計師使用CSS，目的是將網(wǎng)頁的樣子與它所呈現(xiàn)的內(nèi)容分離開來。CSS可用于文本、顏色以及網(wǎng)頁布局的配置。它并不是新生事物——早在1996年，W3C就已經(jīng)發(fā)布了首個CSS版本，并建議作為標準。到了1998年，另外一些有關如何放置網(wǎng)頁元素的屬性添加了進來，由此誕生了CSS2，這個版本用了十多年，直到2011年才被官方正式“推薦”(recommendation)。CSS繼續(xù)向前發(fā)展，陸續(xù)增加了支持諸如嵌入字體、圓角、透明等效果的屬性，也即CSS3的新特性。本章將介紹在寫網(wǎng)頁時如何使用CSS來配置顏色與文本。
3.1層疊樣式表概覽
樣式表已經(jīng)在桌面發(fā)布上應用了多年，作用在于向印刷媒體說明字符樣式與字符間距。CSS則為網(wǎng)頁開發(fā)人員提供了這些功能(甚至更多)。我們可以利用CSS來進行網(wǎng)頁顯示樣式排版(字體、字號等等)與頁面布局說明。CSSZenGarden(禪意花園)(http://www.csszengarden.com)向我們展示了CSS強大的功能與靈活性。可以訪問這個網(wǎng)站，看看那些鮮活的CSS應用實例。請注意，訪客選擇的設計(CSS的作用)不同，網(wǎng)頁所呈現(xiàn)的效果差別巨大。雖然CSS禪意花園里的作品都是由CSS高手完成的，但他們都曾經(jīng)跟你一樣，也是從基礎學起的。
CSS是一種靈活的、交互式的、基于標準的語言，由W3C發(fā)布。我們可以訪問http://www.w3.org/Style，了解官網(wǎng)上的CSS說明。請注意，雖然CSS已經(jīng)使用多年，但它仍然被認為是一種新興技術，并且不同瀏覽器對它的支持程度各不相同。在本書中我們主要關注于那些通用瀏覽器都能有較好支持的內(nèi)容。
層疊樣式表的優(yōu)點
使用CSS有如下優(yōu)點(圖3.1)。
*能更好地控制字體和頁面布局。這些特性包括字號、行間距、字符間距、縮進、邊距和元素排列等。
*樣式與結構分離。頁面上的文本與顏色的格式可以單獨配置與存儲，從而使body部分獨立開來，
*樣式可以存儲。我們可以將樣式單獨保存為一個文件，然后在網(wǎng)頁上引用即可。修改樣式時，HTML保持不變。這就意味著，如果你的客戶打算將若干網(wǎng)頁的背景顏色從紅色改為白色，你只需要修改包含樣式的一個文件即可，而不用挨個去改每一張網(wǎng)頁文檔了。
*文檔可以變得更小。格式部分從文檔中剝離出來了，因而實際的文檔應該能變小。
*維護更方便。同樣的道理，如果要修改樣式，只需單獨修改樣式表。
圖3.1單個CSS文件的強大功能
配置層疊樣式表
使用CSS技術的方法有四種：內(nèi)聯(lián)、嵌入、外部以及導入。
*內(nèi)聯(lián)樣式：代碼寫在網(wǎng)頁的body部分，作為HTML標簽的屬性。因此樣式的作用范圍僅限于包含該屬性的特定元素。
*嵌入樣式(也稱作內(nèi)部樣式)：在網(wǎng)頁的head部分定義樣式。這些樣式說明對整張網(wǎng)頁文檔起作用。
*外部樣式：樣式寫在獨立的一個文本文件中。在寫網(wǎng)頁時，通過在head部分配置鏈接元素與外部樣式文本文件產(chǎn)生關聯(lián)。
*導入樣式：與外部樣式類似，樣式也是寫在外部文本文件中，網(wǎng)頁中進行引用。通過使用@import指令將外部樣式導入為嵌入樣式，也可以導入到其他的外部樣式表中。
樣式選擇器與聲明
樣式表由樣式規(guī)則組成，這些規(guī)則說明了所應用的樣式。每一個規(guī)則由兩部分組成：選擇器與聲明。
*CSS樣式規(guī)則選擇器。選擇器可以是一個HTML元素的名稱、一個類名或一個id名稱。稍后我們將討論有關類選擇器與id選擇器的內(nèi)容。
*CSS樣式規(guī)則聲明。聲明指出你所設置的CSS屬性(例如顏色)以及分配給該屬性的值。
例如，如圖3.2所示的CSS將某張網(wǎng)頁上文本的顏色設置為藍色。選擇器是body標簽，而聲明將顏色屬性的值設置為blue。
圖3.2使用樣式將文本顏色設置為藍色
背景顏色屬性
CSS中的background-color屬性用于設置某個元素的背景顏色。下面的樣式規(guī)則將會把某網(wǎng)頁的背景色設置為黃色。請注意，聲明是用大括號括起來的，而聲明屬性與聲明值之間則用冒號分隔。
新書資訊