Web前端一站式開發手冊：HTML5+CSS3+JavaScript（簡體書）

1 為什麼要學習前端
Web前端作為近幾年非常火的軟件發展崗位，得到了許多人的青睞。Web前端即網站前臺部分，也叫前端開發，運行在PC端、移動端等流覽器上展現給用戶流覽的網頁。隨著互聯網技術的發展，HTML5、CSS3、前端框架的應用，跨平臺響應式網頁設計能夠適應各種螢幕解析度，完美的動效設計給用戶帶來極高的用戶體驗。
HTML、CSS、JavaScript是前端開發中最基本也是最重要的三個技能。在頁面配置時，HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。雖然表面看起來很簡單，但這裡面需要掌握的東西絕對不少。在進行開發前，需要將這些概念弄清楚，這樣在開發的過程中才會得心應手。
學習前端開發技術有很大的優勢：
· Web前端開發入門門檻很低，且市場的缺口很大，前景非常好。
· Web前端需要更少的邏輯思維，對計算機和物聯網的知識也比嵌入式系統少。所以，只要你想進入網絡前端行業，有正確的學習態度和學習耐心，即使你是零基礎，也可以學好。
· 在移動行業，Web前端開發工程師是高薪的代名詞，隨著工作年限的增加，工資也相應增加。
2 為什麼要選擇本書
本書編寫模式採用基礎知識 + 中小實例 + 實戰案例 + 課後作業，內容由淺入深，循序漸進，從入門中學習實戰應用，從實戰應用中激發學習興趣。
（1）本書是Web前端零基礎的啟蒙之書
隨著網絡的不斷發展和成熟，前端知識已經應用到我們的生活中，大到公司網頁的製作，小到手機遊戲，都要用到前端的相關知識。但隨之而來也出現了很多問題：很多人不知道如何入門HTML、如何學習CSS的選擇器以及如何利用JavaScript製作網頁特效，或者很多人只能局限於簡單的模仿，特別是在實際應用上，與前端設計師的水準總是有些差距。鑒於此，我們編寫此書，旨在通過本書的實例講解以及專家指點，給讀者帶來一定的啟發。
（2）全書覆蓋Web前端開發的知識內容
本書以敏銳的視角、簡練的語言，結合前端設計行業的特點，對HTML、CSS和JavaScript進行了全方位講解。書中幾乎囊括了目前前端設計的所有應用知識點，保證讀者能夠學以致用，更快地入門前端開發。
（3）理論實戰緊密結合，徹底擺脫紙上談兵
本書包含大量的案例，既有針對一個元素的小案例，也有綜合總結性的大案例，所有的案例都經過了精心設計。讀者在學習本書的時候可以通過案例更好、更快、更明瞭地理解知識並掌握應用，同時這些案例也可以在開發時候直接引用。
3 本書的讀者物件
從事平面設計的工作人員
培訓班中學習前端設計的學員
對前端設計有著濃厚興趣的愛好者
零基礎想轉行到前端的人員
有想進入IT行業想法的人員
有閒置時間想掌握更多技能的辦公室人員
高等院校相關專業的師生
4 學習本書的方法
想要學好前端，關鍵要看自己的態度，下面給出一些學習建議：
（1）學習前端要從概念入手
拿到本書後，會看到HTML、CSS、JavaScript的概念，只有學會這三種語言，在理解的基礎上才能進行應用。要吃透這些語法、結構的應用例子，才能做到舉一反三。
（2）多動手實踐
起步階段問題自然不少，要做到沉著鎮定，不慌不亂，先自己思考問題出在何處，並動手去解決，可能有多種解決方法，但總有一種是更高效的。親自動手進行程序設計是創造性思維應用的體現，也是培養邏輯思維的好方法。
（3）多與他人交流
每個人的思維方式不同、角度各異，所以解決方法也會不同，通過交流可不斷吸收別人的長處，豐富前端實踐，幫助自己提高水準。可以在身邊找一個學習前端的人，水準高低不重要，重要的是能夠志同道合地一起向前走。
（4）要不斷學習並養成良好的習慣
前端入門不難，但日後不斷學習很重要。在此期間要注意養成一些良好的編寫習慣。良好的程序設計風格可以使程式結構清晰合理，且使程式碼便於維護。如代碼的縮進編排、規則的一致性、代碼的注釋等。
總之，學習前端就是一個“理論→實踐→再理論→再實踐”的認知過程。在這條路子上行走，每個人都會遇到“瓶頸期”，會覺得自己之前學的都一無用處，遇到的問題根本無法解決，這時候就要回頭看，回頭來再學習一些基礎理論。學過之後，很多以前遇到的問題都會迎刃而解，使人有豁然開朗之感。
本書用通俗的語言、合理的結構對Web前端的知識進行了細緻的剖析。幾乎每個章節都有大量二維碼，手機掃一掃，可以隨時隨地看視頻，體驗感非常好。從配套到拓展，資源庫一應俱全。全書上百個案例豐富詳盡，跟著案例去學習，邊學邊做，從做中學，學習體驗可以更深入、更高效。最後祝大家學有所成。
5 本書包含哪些內容
本書是一本介紹HTML、CSS和JavaScript開發技術的實用圖書。全書可分為4個部分。
第1～9章主要是對HTML知識的講解，從HTML基礎知識講起，全面介紹了HTML和HTML5的全部標籤和內容，內容包括：表單、表格、清單、連結、HTML5新增屬性、canvas繪圖、定位、拖拽和存儲等知識。
第10～17章主要是對CSS知識的講解，詳細介紹了CSS 和CSS3的絕大部分常用選擇器、屬性，並為這些選擇器、屬性提供了示例，這部分內容涵蓋了CSS定位、盒模型、動畫、轉換、變色和自我調整等知識。
第18～22章主要是對JavaScript程序設計的相關內容進行了講解，包括JavaScript基礎語法、JavaScript函數、JavaScript物件、DOM程序設計，這些內容覆蓋了初學者的程序設計基礎。
第23章是一個綜合項目開發，綜合運用了HTML 5、CSS3和JavaScript等知識製作了一個網站。通過對整個項目的學習，既可讓讀者鞏固前面所掌握的各種知識，也可讓讀者將所學理論運用到實際開發中。
本書在編寫過程中力求嚴謹細緻，但由於時間與精力有限，疏漏之處在所難免。讀者在學習過程中若遇到問題，可聯繫QQ與筆者交流。

編著者

第1章 Web基礎知識 001
1.1 Web前端開發 002
1.1.1 什麼是前端開發 002
1.1.2 前端開發要學哪些內容 002
1.2 Web工作原理 003
1.2.1 網際網絡與萬維網 003
1.2.2 Web架構 003
1.2.3 協議 004
1.2.4 服務器 005
1.2.5 什麼是網頁 005
1.2.6 流覽器的工作原理 005
1.2.7 網頁與網站的關係 006
1.3 HTML概念與HTML5的聯繫 006
1.3.1 什麼是HTML 006
1.3.2 HTML到XHTML 007
1.3.3 HTML5的發展 008
1.4 HTML檔的基本標記 008
1.4.1 開始標籤 009
1.4.2 頭部標籤 009
1.4.3 標題標籤 009
1.4.4 主體標籤 010
1.4.5 元信息標籤 010
1.4.6 綜合實戰 製作我的第一個網頁 011
課後作業 簡單網頁的製作方法 013

第2章 填充網頁內容 015
2.1 網頁中文字和段落 016
2.1.1 標題文字 016
課堂練習：製作大小不同的標題 016
2.1.2 文字對齊 017
課堂練習：使用align設置對齊方式 017
2.1.3 文字字體 018
課堂練習：字體的設置 018
2.1.4 段落換行 019
課堂練習：給文字換行 019
2.1.5 字體顏色 020
課堂練習：給文字設置色彩 020
2.1.6 文字的上標和下標 021
課堂練習：製作數學方程式 021
2.1.7 文字刪除線 021
課堂練習：刪除線的製作 022
2.1.8 文字不換行 022
課堂練習：製作文字不換行效果 022
2.1.9 文字加粗 023
課堂練習：讓文字更加突出 023
2.2 網頁中的圖片樣式 024
2.2.1 圖片的格式 024
2.2.2 給網頁添加圖片 025
課堂練習：使用img標籤 025
2.2.3 設置圖片的大小 026
課堂練習：圖片的大小設置 026
2.2.4 圖片的邊框顯示 027
課堂練習：給圖片設置邊框 027
2.2.5 水準間距 027
課堂練習：設置圖片的間距效果 028
2.2.6 提示文字 029
課堂練習：設置圖片的提示文字 029
2.2.7 文字替換圖片 029
課堂練習：設置圖片的替換文字 030
綜合實戰 定義圖片熱區 030
課後作業 設置字體和圖片樣式 032

第3章 表格佈局網頁 034
3.1 創建表格 035
3.1.1 表格的基本構成 035
3.1.2 表格的標題 035
課堂練習：製作表格的標題 035
3.1.3 表格的表頭 037
課堂練習：製作表格的表頭 037
3.2 設置表格邊框樣式 038
3.2.1 給表格設置邊框 038
課堂練習：設置表格邊框 038
3.2.2 給表格邊框設置顏色 039
課堂練習：設置表格邊框顏色 040
3.2.3 表格中的儲存格間距 041
課堂練習：設置表格儲存格間距 041
3.2.4 表格中文字與邊框間距 042
課堂練習：在文字和邊框之間設置間距 042
3.3 設置表格行內屬性 043
3.3.1 行的背景顏色及大小 043
課堂練習：設置行的背景顏色和大小 043
3.3.2 行內文字的對齊方式 045
課堂練習：如何設置行內文字的對齊方式 045
3.4 設置表格的背景 046
3.4.1 表格背景顏色 047
課堂練習：表格整體顏色的設置 047
3.4.2 為表格背景插入圖像 048
課堂練習：插入表格的背景圖片 048
3.5 設置儲存格的樣式 049
3.5.1 儲存格的大小 049
課堂練習：設置儲存格的大小 049
3.5.2 儲存格的背景顏色 051
課堂練習：設置儲存格的背景顏色 051
3.5.3 儲存格的邊框屬性 052
課堂練習：給儲存格邊框設置屬性 052
3.5.4 合併儲存格 053
課堂練習：將多個儲存格進行合併 053
綜合實戰 利用表格製作簡單的網頁 055
課後作業 製作一張課程表 057

第4章 列表和超連結 059
4.1 使用無序列表 060
4.1.1 ul標籤使用方法 060
課堂練習：製作無序列表 060
4.1.2 type無序列表類型 061
課堂練習：製作無序列表類型 061
4.2 使用有序列表 063
4.2.1 ol定義有序列表 063
課堂練習：製作有序列表 063
4.2.2 type有序列表類型 064
課堂練習：設置有序列表類型 064
4.2.3 start有序列表的起始值 065
課堂練習：製作列表的起始值 065
4.2.4 dl定義列表標籤 066
課堂練習：製作定義列表 066
4.2.5 menu菜單清單 068
課堂練習：製作功能表清單樣式 069
4.2.6 color設置清單文字顏色 069
課堂練習：給列表項目設置顏色 070
4.3 列表的嵌套 070
4.3.1 定義列表的嵌套 070
課堂練習：使用嵌套列表製作詩集 071
4.3.2 無序列表和有序列表的嵌套 072
課堂練習：製作中國歷史朝代出現的順序 072
4.3.3 有序列表之間的嵌套 073
課堂練習：有序列表的嵌套方法 073
4.4 超連結的路徑 075
4.4.1 絕對路徑 075
4.4.2 相對路徑 075
4.5 創建超連結 075
4.5.1 超連結標籤的屬性 075
4.5.2 內部連結 076
課堂練習：製作網頁中的連結方法 076
4.5.3 外部連結 077
課堂練習：連結到外部網頁 077
綜合實戰 製作網站首頁菜單 078
課後作業 首頁的二級菜單 080

第5章 HTML5常用元素 082
5.1 HTML5新特性 083
5.1.1 HTML5的相容性 083
5.1.2 HTML5的化繁為簡 083
5.1.3 HTML5的通用訪問 084
5.1.4 HTML5標準改進 084
5.2 HTML5優勢 084
5.2.1 頁面的交互性能更強大 085