本書是一本體系化的前端教程，教材中知識(shí)全面，且具有合理的組織體系。教材中所使用的案例貼近實(shí)戰(zhàn)，由淺入深，全面詳盡。本書從HTML和CSS的基礎(chǔ)知識(shí)入手，重點(diǎn)講解HTML和CSS新增功能與前端技術(shù)。以實(shí)訓(xùn)項(xiàng)目為例，將網(wǎng)頁制作的理論知識(shí)和方法結(jié)合到知識(shí)點(diǎn)的講解中，使得讀者能夠掌握其中思考問題的方法、并了解其過程，做到授人以漁；在出版社網(wǎng)站和自建資源中心上等提供豐富的網(wǎng)絡(luò)資源，方便讀者進(jìn)一步深化理論學(xué)習(xí)和實(shí)踐訓(xùn)練，主要包括教材之外的外延知識(shí)、知識(shí)點(diǎn)示例程序、若干綜合項(xiàng)目示例程序等。本書從初學(xué)者角度出發(fā)，通過通俗易懂的語言、豐富的實(shí)例，詳細(xì)介紹了網(wǎng)頁開發(fā)所需要掌握的知識(shí)內(nèi)容。包括HTML、CSS、JavaScript等知識(shí)內(nèi)容同時(shí)以真實(shí)項(xiàng)目作為案例，將理論知識(shí)與實(shí)踐相結(jié)合，從實(shí)踐的角度進(jìn)行知識(shí)點(diǎn)的深化與能力的拓展。
本書從初學(xué)者角度出發(fā)，通過通俗易懂的語言、豐富的實(shí)例，詳細(xì)介紹了網(wǎng)頁開發(fā)所需要掌握的知識(shí)內(nèi)容。包括HTML、CSS、JavaScript等知識(shí)內(nèi)容同時(shí)以真實(shí)項(xiàng)目作為案例，將理論知識(shí)與實(shí)踐相結(jié)合，從實(shí)踐的角度進(jìn)行知識(shí)點(diǎn)的深化與能力的拓展。以實(shí)訓(xùn)項(xiàng)目為例，將網(wǎng)頁制作的理論知識(shí)和方法結(jié)合到知識(shí)點(diǎn)的講解中，使得讀者能夠掌握其中思考問題的方法、并了解其過程，做到授人以漁；在出版社網(wǎng)站和自建資源中心上等提供豐富的網(wǎng)絡(luò)資源，方便讀者進(jìn)一步深化理論學(xué)習(xí)和實(shí)踐訓(xùn)練，主要包括教材之外的外延知識(shí)、知識(shí)點(diǎn)示例程序、若干綜合項(xiàng)目示例程序等。
前 言隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，近幾年來，人工智能、大數(shù)據(jù)、物聯(lián)網(wǎng)、區(qū)塊鏈、云計(jì)算等新名詞的出現(xiàn)，以及相關(guān)產(chǎn)業(yè)的發(fā)展，物聯(lián)網(wǎng)已深入我們生活的方方面面。為了更好地體驗(yàn)互聯(lián)網(wǎng)效果，Web前端技術(shù)也快速發(fā)展起來。Web前端項(xiàng)目開發(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ǔ)知識(shí)和應(yīng)用技術(shù)，通過引入大量的實(shí)例對(duì)HTML 5和CSS 3進(jìn)行深入淺出的技術(shù)分析。本書以實(shí)戰(zhàn)為主要宗旨，通過大量的案例分析以及實(shí)際項(xiàng)目，讓讀者在學(xué)習(xí)基礎(chǔ)理論的同時(shí)，也掌握Web前端技術(shù)的精髓，提高實(shí)際開發(fā)水平和項(xiàng)目實(shí)戰(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動(dòng)畫和jQuery等內(nèi)容。第3章：HTML項(xiàng)目開發(fā)一（子杰軟件官網(wǎng)）。本章主要對(duì)前端開發(fā)實(shí)戰(zhàn)項(xiàng)目上海子杰軟件官網(wǎng)進(jìn)行復(fù)寫。本項(xiàng)目是一個(gè)簡易的網(wǎng)頁設(shè)計(jì)，主要包括導(dǎo)航欄、輪播圖整體布局、我們的產(chǎn)品、數(shù)字化專題、底部版權(quán)、圖文列表制作和自適應(yīng)設(shè)計(jì)等內(nèi)容。第4章：HTML 5新增功能介紹。本章簡要介紹了HTML 5的新增功能，包括多媒體、圖形繪制、文件選擇與拖放等內(nèi)容。第5章：HTML項(xiàng)目開發(fā)二（子杰軟件管理員后臺(tái)）。本章主要對(duì)子杰軟件管理員后臺(tái)開發(fā)實(shí)戰(zhàn)項(xiàng)目管理員后臺(tái)登錄頁面和欄目管理頁面進(jìn)行設(shè)計(jì)。本項(xiàng)目是一個(gè)商業(yè)化的網(wǎng)頁設(shè)計(jì)，主要包括管理員后臺(tái)開發(fā)框架、各種表單元素的使用和數(shù)據(jù)交互等內(nèi)容。讀者可利用各章所學(xué)技能對(duì)本書中案例（前端開發(fā)實(shí)戰(zhàn)項(xiàng)目、管理員后臺(tái)開發(fā)實(shí)戰(zhàn)項(xiàng)目）的功能進(jìn)行優(yōu)化。全書學(xué)習(xí)結(jié)束后，讀者在學(xué)習(xí)技能的同時(shí)，還可獲取項(xiàng)目的實(shí)際開發(fā)經(jīng)驗(yàn)。建議讀者在學(xué)習(xí)本書時(shí)，對(duì)書中的項(xiàng)目實(shí)例多動(dòng)手實(shí)踐，這樣才能加深對(duì)所學(xué)知識(shí)和項(xiàng)目中代碼的理解。為了方便讀者的學(xué)習(xí)，我們將書中項(xiàng)目的源代碼（包括所有材料）上傳到http://www.20-80.cn/網(wǎng)站，讀者可以自行下載查看。本書由武漢工商學(xué)院計(jì)算機(jī)與自動(dòng)化學(xué)院教研團(tuán)隊(duì)組織編寫，由劉雄華教授任主編并統(tǒng)稿。參與編寫的教師有宋文哲、童雯茜、周俊杰等，參加編寫的企業(yè)專家有劉碩（上海子杰軟件有限公司）。本書實(shí)訓(xùn)項(xiàng)目代碼由上海子杰軟件有限公司提供，劉碩工程師參與編寫、整理和驗(yàn)證。由于時(shí)間倉促，書中不足或疏漏之處在所難免，希望廣大讀者批評(píng)指正! 編 者 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ì)算機(jī)設(shè)備有限公司 技術(shù)顧問2013年4月-2015年3月 中國太平洋保險(xiǎn)（集團(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é)院 院長獲獎(jiǎng)榮譽(yù)：2018年中國技能大賽----第45屆世界技能大賽上海市選拔賽商務(wù)軟件解決方案項(xiàng)目、網(wǎng)站設(shè)計(jì)與開發(fā)項(xiàng)目優(yōu)秀指導(dǎo)教練2019年湖北工匠杯技能大賽湖北省服務(wù)貿(mào)易職業(yè)技能大賽商務(wù)軟件解決方案（軟件服務(wù)外包）項(xiàng)目優(yōu)秀教練第46屆世界技能大賽湖北省選拔賽商務(wù)軟件解決方案項(xiàng)目優(yōu)秀教練中華人民共和國第一屆職業(yè)技能大賽移動(dòng)應(yīng)用開發(fā)項(xiàng)目裁判員
第1章 簡介 （1）
1.1 網(wǎng)站與網(wǎng)頁簡介 （1）
1.1.1 網(wǎng)站的構(gòu)成 （2）
1.1.2 網(wǎng)頁基礎(chǔ)知識(shí) （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 運(yùn)行 （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 塊級(jí)元素 （21）
2.1.2 行級(jí)元素 （26）
2.1.3 行級(jí)塊元素 （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 浮動(dòng)布局 （67）
2.3.2 定位布局 （70）
2.3.3 彈性布局 （83）
2.4 響應(yīng)式布局 （88）
2.4.1 響應(yīng)式布局的實(shí)現(xiàn) （89）
2.4.2 響應(yīng)式布局的優(yōu)缺點(diǎn) （92）
2.5 CSS 3動(dòng)畫 （93）
2.5.1 transform （93）
2.5.2 transition （94）
2.5.3 animation （94）
2.5.4 動(dòng)畫綜合實(shí)例 （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項(xiàng)目開發(fā)一（子杰官網(wǎng)） （138）
3.1 項(xiàng)目介紹 （138）
3.1.1 項(xiàng)目描述 （139）
3.1.2 開發(fā)要求 （139）
3.1.3 網(wǎng)站設(shè)計(jì)分析 （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 申請(qǐng)?bào)w驗(yàn)按鈕效果 （168）
3.4.3 鼠標(biāo)滑動(dòng)展示產(chǎn)品詳細(xì)內(nèi)容 （171）
3.5 數(shù)字化專題 （172）
3.6 典型案例 （176）
3.7 解決方案 （178）
3.8 底部版權(quán) （185）
3.8.1 申請(qǐng)?bào)w驗(yàn) （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 滾動(dòng)字幕（跑馬燈效果） （218）
4.4 使用HTML 5繪制圖形 （220）
4.5 HTML 5的高級(jí)應(yīng)用 （221）
4.5.1 選擇文件 （221）
4.5.2 使用HTML 5實(shí)現(xiàn)拖放功能 （221）
小結(jié) （222）
習(xí)題 （222）
第5章 HTML項(xiàng)目開發(fā)二（子杰軟件管理員后臺(tái)） （224）
5.1 項(xiàng)目介紹 （224）
5.1.1 項(xiàng)目描述 （225）
5.1.2 開發(fā)要求 （225）
5.2 平臺(tái)風(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 管理員后臺(tái)默認(rèn)樣式 （231）
5.3.4 管理員后臺(tái)柵格系統(tǒng) （232）
5.3.5 管理員后臺(tái)功能說明 （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 管理員后臺(tái)欄目管理頁面 （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)站測(cè)試與發(fā)布 （307）
6.1 測(cè)試本地站點(diǎn) （308）
6.1.1 瀏覽器測(cè)試 （308）
6.1.2 鏈接測(cè)試 （309）
6.2 發(fā)布站點(diǎn) （315）
6.2.1 騰訊云服務(wù)器介紹 （316）
6.2.2 使用騰訊云服務(wù)器發(fā)布站點(diǎn) （317）
小結(jié) （323）
習(xí)題 （323）
附錄 （324）
書單推薦
