項目1 認識Web前端設計 1

學習任務1.1 了解Web基礎知識 2

任務1.1.1 理解Web相關概念 3

任務1.1.2 了素 10

任務1.1.3 了解Web前端設計技術與工具 14

任務1.1.4 了解網站建設流程 17

學習任務1.2 設計網站 22

任務1.2.1 設計網站形像 23

任務1.2.2 設計頁面布局 28

任務1.2.3 設計網站導航及欄目 33

任務1.2.4 設計網頁層次及目錄結構 37

項目2 創建及編輯Web網頁——HTML5 41

學習任務2.1 創建網站首頁文檔 42

任務2.1.1 創建網站首頁 43

任務2.1.2 理解HTML標記語法 48

任務2.1.3 理解HTML布局標記 55

任務2.1.4 理解HTML5結構標記 60

學習任務2.2 編輯網站首頁內容 68

任務2.2.1 插入文本及列表 70

任務2.2.2 插入圖像和媒體 76

任務2.2.3 設置超鏈接和應用框架 83

任務2.2.4 應用表格和表單 91

 
項目3創建及應用Web樣式——CSS3113

學習任務3.1 創建網站首頁樣式 114

任務3.1.1 理解CSS語法 115
任務3.1.2 應用CSS樣式 119
任務3.1.3 理解CSS選擇器 125
任務3.1.4 理解CSS層疊性和繼承性 139

學習任務3.2 設計網站首頁樣式 145

任務3.2.1 設置CSS字體和文本屬性 146
任務3.2.2 設置CSS背景和列表屬性 151
任務3.2.3 設置CSS邊框和表格屬性 158
任務3.2.4 應用CSS3效果 165

學習任務3.3 定位網素 179

任務3.3.1 理解CSS盒子模型 180
任務3.3.2 應用流布局 185
任務3.3.3 應用浮動布局 188
任務3.3.4 應用定位布局 194
任務3.3.5 制作移動端頁面 204

項目4應用Web網頁特效——JavaScript 215

學習任務4.1 理解JavaScript語言基礎 216

任務4.1.1 認識JavaScript 217
任務4.1.2 認識JavaScript語言基礎 220
任務4.1.3 認識JavaScript自定義函數 225
任務4.1.4 認識JavaScript控制語句 226
任務4.1.5 認識JavaScript對像 233
任務4.1.6 認識JavaScript內置對像 240

學習任務4.2 應用jQuery 247

任務4.2.1 理解jQuery框架248

 
目錄

VII

任務4.2.2 利用jQuery實現網頁特效 256

任務4.2.3 了解Web前端框架技術 263

學習任務4.3 了解HTML5高級應用 266

任務4.3.1 了解HTML5畫布 267

任務4.3.2 了解HTML5拖放操作 276

任務4.3.3 了解HTML5地理定位 280

項目5 網站設計與開發綜合案例 287

實踐任務5.1 網站設計 288

實踐任務5.2 網站首頁布局及內容編輯 290

實踐任務5.3 應用CSS樣式美化網站首頁 297

實踐任務5.4 應用CSS樣式精準定位網素 305

參考文獻 314

前端開發是創立Web頁面或APP等前端界面呈現給用戶的過程，經過HTML、CSS、
JavaScript以及衍生出來的各種技術和框架等，來完成互聯網產品的用戶界面交互。隨著互
聯網和數字經濟的快速發展，企業對Web前端技術崗位的需求越來越大。雖然Web前端
開發技術和框架層出不窮，但是無論是PC端還是移動端，HTML、CSS和JavaScript都是
學習的基礎。

結合Web技術的發展，本書在第1版的基礎上進行了修訂，精簡了部分內容和案
例，增加了對主流Web前端框架技術的介紹，增加了綜合案例項目，使得教材更加符合學
生的學習特點，更好地滿足教師的授課需求。

修訂後的教材具有以下特點：

（1）突出課程思政特色。堅持“知識探究—能力構建—價值引領”三位一體的教學
目標，增加了對中國優秀企業網站、國產Web前端技術和框架、網絡信息內容生態治理等
內容的介紹，明確了每個項目的思政目標。引導學生形成Web前端開發的職業道德、工匠
精神、法治意識、審美素養和創新思維，為學生在基於互聯網的技術和商業融合實踐中，
形成正確的理想信念、價值取向和社會責任等打下基礎。

（2）倡導科技自立自強。黨的二十大報告指出：“加快推進科技自立自強。”國產
HBuilder、Vue框架等已經成為Web前端主流的開發工具和技術。書中加入了對國產Web
前端開發工具HBuilder和Vue的介紹，引導學生認識國產軟件的優勢，讓學生更加尊重和
信任我們自己的技術，倡導科技自立自強，增強民族自豪感和自信心。

（3）強化綜合應用能力。基於學生的學習特點和教師的授課要求，在原有4個項目
的基礎上，增加了網站設計與開發綜合案例，通過一個完整的項目串聯Web前端開發的主
要知識和技能點，培養學生的實踐應用能力。綜合案例既可以作為前面4個項目的同步學
習案例，也可以作為本課程的綜合實訓項目。

（4）體例新穎。基於 Web 前端設計工作過程，將網站建設項目逐步分解，提取典
型任務，內容由淺入深，循序漸進。每個學習任務均包括學習目標、學習任務結構圖、關
鍵知識點、典型案例、拓展案例、任務小結、技能訓練等板塊，結構清晰。學習任務結構
圖有助於讀者將零散知識點歸納為繫統的知識結構，技能訓練可以幫助讀者鞏固所學知識
和技能。

 
Web前端設計基礎（第2版）

II

（5）案例豐富。本書是中國大學 MOOC“Web 前端設計基礎”的配套教材，線上慕
課學習資源豐富，可以為教師開展混合式教學提供支持。在每個學習任務中，本書結合關
鍵技術和難點，穿插了大量的示例並配有效果圖，掃描二維碼即可觀看相應知識點示例的
視頻操作和講解。本書提供所有案例的程序源代碼，可幫助讀者快速地理解與掌握相關
內容。

本書的分工如下：項目1由北京聯合大學李丹丹副教授編寫和修訂，項目2由北京聯
合大學李立威教授編寫和修訂，項目3由北京聯合大學王曉紅教授編寫和修訂，項目4由
北京聯合大學王艷娥老師編寫和修訂，項目5由北京聯合大學薛曉霞副教授編寫和修訂。
李立威教授負責全書的統稿和修改工作。

本書的編寫得到了北京聯合大學電子商務一流本科專業建設點的大力支持，在
此表示衷心的感謝。由於編寫時間倉促，作者水平有限，書中難免有不妥之處，懇請各位
讀者和專家批評指正。

 編者

 2023年2月