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