本書是一本體系化的前端教程，教材中知識全面，且具有合理的組織體系。教材中所使用的案例貼近實戰(zhàn)，由淺入深，全面詳盡。本書從HTML和CSS的基礎知識入手，重點講解HTML和CSS新增功能與前端技術。以實訓項目為例，將網(wǎng)頁制作的理論知識和方法結合到知識點的講解中，使得讀者能夠掌握其中思考問題的方法、并了解其過程，做到授人以漁；在出版社網(wǎng)站和自建資源中心上等提供豐富的網(wǎng)絡資源，方便讀者進一步深化理論學習和實踐訓練，主要包括教材之外的外延知識、知識點示例程序、若干綜合項目示例程序等。本書從初學者角度出發(fā)，通過通俗易懂的語言、豐富的實例，詳細介紹了網(wǎng)頁開發(fā)所需要掌握的知識內容。包括HTML、CSS、JavaScript等知識內容同時以真實項目作為案例，將理論知識與實踐相結合，從實踐的角度進行知識點的深化與能力的拓展。
本書從初學者角度出發(fā)，通過通俗易懂的語言、豐富的實例，詳細介紹了網(wǎng)頁開發(fā)所需要掌握的知識內容。包括HTML、CSS、JavaScript等知識內容同時以真實項目作為案例，將理論知識與實踐相結合，從實踐的角度進行知識點的深化與能力的拓展。以實訓項目為例，將網(wǎng)頁制作的理論知識和方法結合到知識點的講解中，使得讀者能夠掌握其中思考問題的方法、并了解其過程，做到授人以漁；在出版社網(wǎng)站和自建資源中心上等提供豐富的網(wǎng)絡資源，方便讀者進一步深化理論學習和實踐訓練，主要包括教材之外的外延知識、知識點示例程序、若干綜合項目示例程序等。
前 言隨著互聯(lián)網(wǎng)技術的發(fā)展，近幾年來，人工智能、大數(shù)據(jù)、物聯(lián)網(wǎng)、區(qū)塊鏈、云計算等新名詞的出現(xiàn)，以及相關產(chǎn)業(yè)的發(fā)展，物聯(lián)網(wǎng)已深入我們生活的方方面面。為了更好地體驗互聯(lián)網(wǎng)效果，Web前端技術也快速發(fā)展起來。Web前端項目開發(fā)采用HTML、CSS、jQuery、JavaScript等相關技術，并隨著HTML 5和CSS 3的發(fā)展，網(wǎng)站的開發(fā)和維護更快速、更高效。本書系統(tǒng)地講解了HTML 5、CSS 3、jQuery等相關的基礎知識和應用技術，通過引入大量的實例對HTML 5和CSS 3進行深入淺出的技術分析。本書以實戰(zhàn)為主要宗旨，通過大量的案例分析以及實際項目，讓讀者在學習基礎理論的同時，也掌握Web前端技術的精髓，提高實際開發(fā)水平和項目實戰(zhàn)能力。本書主要包含以下內容。第1章：簡介。本章涵蓋的內容包括網(wǎng)站與網(wǎng)頁簡介、HTML簡介、CSS簡介、jQuery簡介和開發(fā)編譯環(huán)境等內容。第2章：網(wǎng)頁基礎。本章主要介紹了HTML標簽、CSS基礎、CSS常用布局方法、CSS動畫和jQuery等內容。第3章：HTML項目開發(fā)一（子杰軟件官網(wǎng)）。本章主要對前端開發(fā)實戰(zhàn)項目上海子杰軟件官網(wǎng)進行復寫。本項目是一個簡易的網(wǎng)頁設計，主要包括導航欄、輪播圖整體布局、我們的產(chǎn)品、數(shù)字化專題、底部版權、圖文列表制作和自適應設計等內容。第4章：HTML 5新增功能介紹。本章簡要介紹了HTML 5的新增功能，包括多媒體、圖形繪制、文件選擇與拖放等內容。第5章：HTML項目開發(fā)二（子杰軟件管理員后臺）。本章主要對子杰軟件管理員后臺開發(fā)實戰(zhàn)項目管理員后臺登錄頁面和欄目管理頁面進行設計。本項目是一個商業(yè)化的網(wǎng)頁設計，主要包括管理員后臺開發(fā)框架、各種表單元素的使用和數(shù)據(jù)交互等內容。讀者可利用各章所學技能對本書中案例（前端開發(fā)實戰(zhàn)項目、管理員后臺開發(fā)實戰(zhàn)項目）的功能進行優(yōu)化。全書學習結束后，讀者在學習技能的同時，還可獲取項目的實際開發(fā)經(jīng)驗。建議讀者在學習本書時，對書中的項目實例多動手實踐，這樣才能加深對所學知識和項目中代碼的理解。為了方便讀者的學習，我們將書中項目的源代碼（包括所有材料）上傳到http://www.20-80.cn/網(wǎng)站，讀者可以自行下載查看。本書由武漢工商學院計算機與自動化學院教研團隊組織編寫，由劉雄華教授任主編并統(tǒng)稿。參與編寫的教師有宋文哲、童雯茜、周俊杰等，參加編寫的企業(yè)專家有劉碩（上海子杰軟件有限公司）。本書實訓項目代碼由上海子杰軟件有限公司提供，劉碩工程師參與編寫、整理和驗證。由于時間倉促，書中不足或疏漏之處在所難免，希望廣大讀者批評指正! 編 者 2023年6月
1998年-2002年 武漢市四十九中學 教師2003年-2009年 武漢弘博集團 副總2010年至今 上海子杰軟件有限公司 技術總監(jiān)2013年3月-2014年2月 百事通網(wǎng)絡電視技術發(fā)展有限責任公司 技術顧問2013年3月-2014年2月 南京富士通計算機設備有限公司 技術顧問2013年4月-2015年3月 中國太平洋保險（集團）股份有限公司 技術顧問2014年3月-2015年2月 上海辰銳信息科技公司（公安部三所） 技術顧問2015年3月-2016年2月 庫卡機器人制造（上海）有限公司 技術顧問2015年9月-2016年8月 上海安托信息技術有限公司 技術顧問2016年3月-2016年9月 杉德集團-上海久彰電子商務有限公司 技術顧問2016年3月-2017年2月 上海索廣映像有限公司（上廣電索尼） 技術顧問2018年至今 武漢工商學院 院長獲獎榮譽：2018年中國技能大賽----第45屆世界技能大賽上海市選拔賽商務軟件解決方案項目、網(wǎng)站設計與開發(fā)項目優(yōu)秀指導教練2019年湖北工匠杯技能大賽湖北省服務貿易職業(yè)技能大賽商務軟件解決方案（軟件服務外包）項目優(yōu)秀教練第46屆世界技能大賽湖北省選拔賽商務軟件解決方案項目優(yōu)秀教練中華人民共和國第一屆職業(yè)技能大賽移動應用開發(fā)項目裁判員
第1章 簡介 （1）
1.1 網(wǎng)站與網(wǎng)頁簡介 （1）
1.1.1 網(wǎng)站的構成 （2）
1.1.2 網(wǎng)頁基礎知識 （3）
1.2 HTML簡介 （4）
1.2.1 HTML基礎語法 （5）
1.2.2 HTML基本結構 （6）
1.3 CSS簡介 （9）
1.4 jQuery簡介 （12）
1.5 開發(fā)編譯環(huán)境 （13）
1.5.1 運行 （15）
1.5.2 調試 （15）
小結 （17）
習題 （17）
第2章 網(wǎng)頁基礎 （20）
2.1 HTML標簽 （20）
2.1.1 塊級元素 （21）
2.1.2 行級元素 （26）
2.1.3 行級塊元素 （27）
2.1.4 按用途分類 （29）
2.2 CSS基礎 （30）
2.2.1 CSS的使用 （31）
2.2.2 盒子模型 （56）
2.3 CSS常用布局方法 （66）
2.3.1 浮動布局 （67）
2.3.2 定位布局 （70）
2.3.3 彈性布局 （83）
2.4 響應式布局 （88）
2.4.1 響應式布局的實現(xiàn) （89）
2.4.2 響應式布局的優(yōu)缺點 （92）
2.5 CSS 3動畫 （93）
2.5.1 transform （93）
2.5.2 transition （94）
2.5.3 animation （94）
2.5.4 動畫綜合實例 （95）
2.6 jQuery （99）
2.6.1 jQuery的引用 （100）
2.6.2 jQuery的語法 （101）
2.6.3 jQuery的入口函數(shù) （102）
2.6.4 jQuery選擇器 （102）
2.6.5 jQuery常用的事件 （103）
2.6.6 jQuery的效果 （113）
2.6.7 jQuery操作HTML （126）
2.6.8 jQuery遍歷元素 （131）
小結 （135）
習題 （135）
第3章 HTML項目開發(fā)一（子杰官網(wǎng)） （138）
3.1 項目介紹 （138）
3.1.1 項目描述 （139）
3.1.2 開發(fā)要求 （139）
3.1.3 網(wǎng)站設計分析 （139）
3.1.4 網(wǎng)站文件結構 （140）
3.1.5 網(wǎng)頁結構 （140）
3.2 導航欄 （142）
3.2.1 子杰官網(wǎng)logo （144）
3.2.2 菜單列表 （146）
3.2.3 搜索和微信圖標 （150）
3.3 輪播圖整體布局 （153）
3.3.1 輪播圖片切換按鈕 （156）
3.3.2 輪播文字部分 （157）
3.3.3 輪播效果 （160）
3.4 我們的產(chǎn)品 （160）
3.4.1 產(chǎn)品分類 （163）
3.4.2 申請體驗按鈕效果 （168）
3.4.3 鼠標滑動展示產(chǎn)品詳細內容 （171）
3.5 數(shù)字化專題 （172）
3.6 典型案例 （176）
3.7 解決方案 （178）
3.8 底部版權 （185）
3.8.1 申請體驗 （185）
3.8.2 聯(lián)系方式 （188）
3.9 響應式布局 （191）
小結 （202）
習題 （202）
第4章 HTML 5新增功能簡介 （203）
4.1 HTML 5語法 （203）
4.2 HTML 5元素 （206）
4.2.1 HTML 5新增的結構元素 （206）
4.2.2 HTML 5新增的功能元素 （208）
4.2.3 HTML 5廢除的元素 （209）
4.2.4 HTML 5屬性 （209）
4.2.5 HTML 5全局屬性 （212）
4.3 HTML 5中的多媒體 （215）
4.3.1 網(wǎng)頁音頻 （216）
4.3.2 網(wǎng)頁視頻 （217）
4.3.3 滾動字幕（跑馬燈效果） （218）
4.4 使用HTML 5繪制圖形 （220）
4.5 HTML 5的高級應用 （221）
4.5.1 選擇文件 （221）
4.5.2 使用HTML 5實現(xiàn)拖放功能 （221）
小結 （222）
習題 （222）
第5章 HTML項目開發(fā)二（子杰軟件管理員后臺） （224）
5.1 項目介紹 （224）
5.1.1 項目描述 （225）
5.1.2 開發(fā)要求 （225）
5.2 平臺風格指引 （226）
5.2.1 商標 （226）
5.2.2 調色板 （226）
5.2.3 字體 （227）
5.3 準備工作 （229）
5.3.1 字體選擇/字體規(guī)范 （229）
5.3.2 清除瀏覽器默認樣式 （230）
5.3.3 管理員后臺默認樣式 （231）
5.3.4 管理員后臺柵格系統(tǒng) （232）
5.3.5 管理員后臺功能說明 （237）
5.4 常見的表單標簽 （238）
5.4.1 按鈕、tab標簽、下拉菜單等 （238）
5.4.2 抽屜和彈出框 （255）
5.5 登錄界面 （260）
5.5.1 整體布局 （260）
5.5.2 具體代碼 （261）
5.6 管理員后臺欄目管理頁面 （263）
5.6.1 整體布局 （263）
5.6.2 Sider區(qū)域布局 （267）
5.6.3 Right區(qū)域布局 （278）
5.7 Content區(qū)域Header布局 （288）
5.7.1 Header區(qū)域 （290）
5.7.2 Content區(qū)域 （292）
小結 （306）
習題 （306）
第6章 網(wǎng)站測試與發(fā)布 （307）
6.1 測試本地站點 （308）
6.1.1 瀏覽器測試 （308）
6.1.2 鏈接測試 （309）
6.2 發(fā)布站點 （315）
6.2.1 騰訊云服務器介紹 （316）
6.2.2 使用騰訊云服務器發(fā)布站點 （317）
小結 （323）
習題 （323）
附錄 （324）
書單推薦
