本書以“理論知識”為鋪墊，以“實際應用”為指向，從簡單易學的角度出發，系統講述了Web前端開發的相關知識，內容由淺入深，通俗易懂，知識點與案例結合緊密，所選案例新穎豐富，緊貼實戰。
本書從Web基礎知識講起，循序漸進地融入了HTML5、CSS3、JavaScript、繪圖、地理定位、本地存儲等實用技術，是一本真正的Web前端開發從學到用的自學教程。
本書配備了極為豐富的學習資源，不僅有教學視頻、實例素材及源程序，還有HTML頁面基本速查、CSS常用屬性速查、JavaScript對象參考手冊，jQuery參考手冊、網頁配色基本知識速查等電子書。
本書適合作為Web前端開發、網頁設計、網頁制作、網站建設的入門級或者有一定基礎讀者的自學用書，也可用作高等院校或培訓學校相關專業的教材及參考書。
本書編寫模式采用基礎知識 + 中小實例 + 實戰案例 + 課后作業，內容由淺入深，循序漸進，從入門中學習實戰應用，從實戰應用中激發學習興趣。
（1）本書是Web前端零基礎的啟蒙之書
（2）全書覆蓋Web前端開發的知識體系內容
（3）理論實戰緊密結合，徹底擺脫紙上談兵
本書用通俗的語言、合理的結構對Web前端的知識進行了細致的剖析。幾乎每個章節都有二維碼，微信掃一掃，可以隨時隨地看視頻，體驗感非常好。從配套到拓展，資源庫一應俱全。全書上百個案例豐富詳盡，跟著案例去學習，邊學邊做，從做中學，學習體驗可以更深入、更高效。
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 1908754590與筆者交流。
編著者
第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
新書資訊