本書秉持“學(xué)生易學(xué)”的理念，注重實(shí)踐能力訓(xùn)練，內(nèi)容編排遵循“零基礎(chǔ)入門—— 技能進(jìn)階—— 實(shí)戰(zhàn)應(yīng)用”的遞進(jìn)式教學(xué)路徑，以企業(yè)級項(xiàng)目實(shí)戰(zhàn)任務(wù)為載體，精選了“企業(yè)網(wǎng)站”“美麗鄉(xiāng)村網(wǎng)站”“數(shù)字智慧黨建網(wǎng)站”3個真實(shí)的案例。主教材把這3個案例分解成9個單元，內(nèi)容包括搭建開發(fā)環(huán)境、HTML基礎(chǔ)、HTML進(jìn)階、CSS基礎(chǔ)、CSS盒子模型、CSS彈性布局、CSS動畫、JavaScript基礎(chǔ)和JavaScript進(jìn)階，側(cè)重理論講解與示例演示。實(shí)訓(xùn)手冊共10個單元，在主教材對應(yīng)實(shí)訓(xùn)內(nèi)容的基礎(chǔ)上增加了制作數(shù)字智慧黨建網(wǎng)站的完整項(xiàng)目實(shí)戰(zhàn)，并采用AIGC輔助開發(fā)的模式，幫助讀者實(shí)現(xiàn)自然語言生成代碼、代碼續(xù)寫、代碼優(yōu)化、代碼解釋、注釋生成以及研發(fā)智能問答等 多項(xiàng)功能。主教材與實(shí)訓(xùn)手冊相輔相成，引導(dǎo)學(xué)生運(yùn)用人工智能工具完成網(wǎng)頁開發(fā)全流程，形成了一套融“教、學(xué)、做、用”于一體的系統(tǒng)化教學(xué)方法。本書可以作為各類職業(yè)院校Web前端開發(fā)和網(wǎng)站開發(fā)相關(guān)課程的教材，也可以作為 Web前端開發(fā)愛好者的學(xué)習(xí)參考書。本書配有微課視頻、教學(xué)課件、課程標(biāo)準(zhǔn)、習(xí)題答案、程序源代碼、實(shí)訓(xùn)手冊、拓展任務(wù)案例和考試試卷，選用本書作為教材的教師可登錄機(jī)械工業(yè)出版社教育服務(wù)網(wǎng)（www.cmpedu.com）注冊后免費(fèi)下載，或聯(lián)系編輯（010-88379194）咨詢。本書還整合了超星“示范教學(xué)包”，為師生提供一站式的“能學(xué)、輔教”的數(shù)字化課程資源服務(wù)，提升教學(xué)質(zhì)量與效率。

本書遵循職業(yè)教育教材編寫規(guī)律和職業(yè)院校學(xué)生學(xué)習(xí)規(guī)律，配套齊全 

前 言本書由主教材和實(shí)訓(xùn)手冊兩部分組成，結(jié)合Web前端開發(fā)課程的發(fā)展背景，以實(shí)際項(xiàng)目為驅(qū)動，系統(tǒng)地介紹了Web前端開發(fā)的相關(guān)知識和技能。本書以社會主義核心價(jià)值觀為引領(lǐng)，傳承中華傳統(tǒng)文化，內(nèi)容體現(xiàn)時(shí)代性和創(chuàng)造性，注重立德樹人，采用“項(xiàng)目引導(dǎo)、單元驅(qū)動”式教學(xué)法，設(shè)計(jì)了9個單元，通過實(shí)際操作提升學(xué)生的實(shí)踐能力。一、編寫特色1．注重學(xué)生素養(yǎng)提升，落實(shí)立德樹人根本任務(wù)在編寫過程中，注重將立德樹人的教育理念融入教材內(nèi)容中，系統(tǒng)地設(shè)計(jì)了工匠精神、精益求精，家國情懷、為國育人，技術(shù)自信、勇于創(chuàng)新，嚴(yán)謹(jǐn)規(guī)范、攻堅(jiān)克難，與時(shí)俱進(jìn)、終身學(xué)習(xí)等學(xué)生素養(yǎng)元素主線，貫穿于整本教材，體現(xiàn)“價(jià)值塑造、知識傳授、能力培養(yǎng)”三位一體的人才培養(yǎng)目標(biāo)。2．融入AIGC輔助學(xué)習(xí)工具，提升學(xué)習(xí)效率和質(zhì)量本書巧妙地融入了AIGC（人工智能生成內(nèi)容）輔助學(xué)習(xí)工具，并在實(shí)訓(xùn)手冊中重點(diǎn)練習(xí)。利用這些工具，學(xué)生可以實(shí)現(xiàn)自然語言生成代碼、行級和函數(shù)級代碼續(xù)寫、代碼優(yōu)化、代碼注釋生成、測試數(shù)據(jù)生成、代碼解釋以及研發(fā)智能問答等多項(xiàng)功能，極大地提升了學(xué)習(xí)效率和質(zhì)量，滿足個性化學(xué)習(xí)需要，提升學(xué)生的人工智能素養(yǎng)。在實(shí)訓(xùn)手冊中，構(gòu)建“AI+場景化開發(fā)”訓(xùn)練體系，詳細(xì)設(shè)計(jì)了與AIGC輔助學(xué)習(xí)工具的結(jié)合使用方法。在局部網(wǎng)頁模塊制作階段，通過自然語言交互生成HTML、CSS布局代碼；在全站網(wǎng)頁開發(fā)階段，支持HTML、JavaScript和CSS智能代碼補(bǔ)全，以及實(shí)時(shí)代碼注釋和解釋；在調(diào)試階段，可根據(jù)輸入報(bào)錯信息獲得AI建議和指導(dǎo)。同時(shí)，設(shè)置大量的企業(yè)案例實(shí)戰(zhàn)練習(xí)，讓學(xué)生在使用AIGC工具解決具體問題的過程中，深化對知識的理解，在真實(shí)工程場景中掌握Web前端開發(fā)技術(shù)和經(jīng)驗(yàn)。3．項(xiàng)目引導(dǎo)、單元驅(qū)動，力求“學(xué)生易學(xué)、樂學(xué)”本書內(nèi)容編排遵循“零基礎(chǔ)入門—— 技能進(jìn)階—— 實(shí)戰(zhàn)應(yīng)用”的遞進(jìn)式教學(xué)路徑，精選了3個真實(shí)的項(xiàng)目案例，并將其分解為9個單元，每個單元再細(xì)化為2～5個子任務(wù)，形成了一套融“教、學(xué)、做、用”于一體的教學(xué)系統(tǒng)。4．提供教學(xué)“一站式”解決方案，踐行“老師易教、樂教”本書提供了豐富的數(shù)字化、立體化教學(xué)資源，包括微課視頻、教學(xué)課件、課程標(biāo)準(zhǔn)、習(xí)題答案、程序源代碼、實(shí)訓(xùn)手冊、拓展任務(wù)案例和考試試卷，最大限度地滿足教學(xué)實(shí)施、課程考評等需求。此外，本書配套建立超星“示范教學(xué)包”，定位“能學(xué)、輔教”，共享優(yōu)質(zhì)教學(xué)資源。5．校企雙元開發(fā)，融合企業(yè)真實(shí)案例本書由職業(yè)院校與企業(yè)資深工程師共同完成，引入3個企業(yè)真實(shí)案例，以項(xiàng)目化理念重構(gòu)教學(xué)內(nèi)容。編寫成員包括具有多年教學(xué)經(jīng)驗(yàn)的雙師型職業(yè)院校教師以及來自企業(yè)開發(fā)一線、具有豐富實(shí)踐經(jīng)驗(yàn)的工程師；企業(yè)工程師參與教材項(xiàng)目的選取、項(xiàng)目的設(shè)計(jì)和資源制作等環(huán)節(jié)。二、主要內(nèi)容本書采用雙線并行設(shè)計(jì)：教學(xué)主線以“企業(yè)網(wǎng)站”和“美麗鄉(xiāng)村網(wǎng)站”貫穿始終，循序漸進(jìn)地講解核心知識；研發(fā)線則以“數(shù)字智慧黨建網(wǎng)站”為綜合實(shí)踐項(xiàng)目，系統(tǒng)地培養(yǎng)學(xué)生運(yùn)用HTML、CSS、JavaScript和JSON的工程能力。下表是學(xué)時(shí)分配建議，教學(xué)實(shí)施時(shí)可參考并靈活調(diào)整。單元 技能點(diǎn) 任務(wù)規(guī)劃 72學(xué)時(shí) 90學(xué)時(shí)單元1　搭建開發(fā)環(huán)境 Web前端開發(fā)概述，Web前端開發(fā)常用術(shù)語，HTML5的基本結(jié)構(gòu)，Web瀏覽器簡介，Web開發(fā)工具簡介，AI輔助編程工具簡介 HBuilder X的安裝和使用，Visual Studio Code的安裝和使用，瀏覽器的安裝和使用，Dreamweaver的安裝和使用，PHPStudy的安裝和使用 2 4單元2　HTML基礎(chǔ) HTML標(biāo)記和語義元素，HTML文本標(biāo)記，HTML超鏈接，HTML圖像，HTML表格 制作企業(yè)簡介網(wǎng)頁，制作企業(yè)統(tǒng)計(jì)表網(wǎng)頁，制作企業(yè)聯(lián)系方式網(wǎng)頁 6 8單元3　HTML進(jìn)階 HTML列表，HTML5媒體元素，HTML5表單控件，HTML內(nèi)聯(lián)框架 制作企業(yè)視頻宣傳網(wǎng)頁，制作志愿活動征集表單網(wǎng)頁，制作音頻播放網(wǎng)頁和招聘報(bào)名網(wǎng)頁 6 8單元4　CSS基礎(chǔ) CSS和CSS3簡介，引入CSS，CSS基本語法，CSS文本屬性，CSS常用背景屬性，CSS的選擇器與權(quán)重，CSS表格與列表屬性 美化企業(yè)簡介網(wǎng)頁，制作工匠技能認(rèn)證網(wǎng)頁，美化用戶登錄網(wǎng)頁和招聘報(bào)名網(wǎng)頁 8 10單元5　CSS盒子模型 盒子模型的概念，盒子模型的構(gòu)成屬性，盒子模型的定位 制作美麗鄉(xiāng)村首頁，制作下拉菜單式網(wǎng)站導(dǎo)航，制作民宿詳情網(wǎng)頁 8 10單元6　CSS彈性布局 Flex布局簡介，F(xiàn)lex容器屬性，F(xiàn)lex項(xiàng)目屬性，媒體查詢與響應(yīng)式布局 制作美麗鄉(xiāng)村新聞網(wǎng)頁，制作瀑布流相冊，制作新聞詳情介紹網(wǎng)頁 8 10單元7　CSS動畫 CSS動畫簡介和坐標(biāo)系，transform變形屬性，transition過渡屬性，animation動畫屬性 制作美麗鄉(xiāng)村照片墻網(wǎng)頁，制作客棧網(wǎng)頁的遮罩效果，制作新聞網(wǎng)頁的動畫效果 8 8單元8　JavaScript基礎(chǔ) JavaScript簡介，語法基礎(chǔ)，數(shù)據(jù)類型，運(yùn)算符，數(shù)據(jù)類型轉(zhuǎn)換，流程控制語句，函數(shù)，對象 制作網(wǎng)頁版計(jì)算器，制作網(wǎng)頁貸款計(jì)算器，制作表單注冊驗(yàn)證網(wǎng)頁 8 12單元9　JavaScript進(jìn)階 DOM簡介，DOM對象操作，BOM簡介和操作，JavaScript事件處理，JavaScript JSON，JavaScript Ajax 渲染美麗鄉(xiāng)村網(wǎng)站首頁；制作Tab選項(xiàng)卡效果，制作直播評論彈幕網(wǎng)頁 10 12單元10　制作數(shù)字智慧黨建網(wǎng)站 項(xiàng)目描述，網(wǎng)站規(guī)劃，制作管理后臺的注冊網(wǎng)頁和登錄網(wǎng)頁，制作管理后臺的用戶列表網(wǎng)頁，制作網(wǎng)站的圖片列表網(wǎng)頁，制作網(wǎng)站的新聞列表網(wǎng)頁，制作網(wǎng)站的首頁 8 8主教材側(cè)重理論講解與示例演示，對應(yīng)“技能點(diǎn)”模塊；實(shí)訓(xùn)手冊創(chuàng)新采用AIGC輔助開發(fā)模式，通過企業(yè)級項(xiàng)目實(shí)戰(zhàn)任務(wù)，引導(dǎo)學(xué)生運(yùn)用智能工具完成網(wǎng)頁開發(fā)全流程，對應(yīng)“任務(wù)規(guī)劃”模塊，充分體現(xiàn)“項(xiàng)目驅(qū)動、任務(wù)引領(lǐng)”的職業(yè)教育特色。三、編寫隊(duì)伍及分工本書由藍(lán)永健和劉徑平擔(dān)任主編，古振忠、謝秀玲、蔡秀梅擔(dān)任副主編，何倍廷、韋權(quán)、黃潔燕、李天鳳、鄧愛玲、林麗婷、陳曉麗、陳利娟和范智峰參加編寫。其中，藍(lán)永健編寫了單元2、單元3和實(shí)訓(xùn)手冊的單元10，劉徑平編寫了單元8和單元9，古振忠編寫了單元5和單元6，謝秀玲編寫了單元1和單元7，蔡秀梅編寫了單元4。何倍廷、韋權(quán)、黃潔燕、李天鳳、鄧愛玲、林麗婷、陳曉麗和陳利娟分別完成了單元2～單元9練習(xí)題庫、拓展任務(wù)和實(shí)訓(xùn)任務(wù)書的編寫工作。范智峰提供了企業(yè)項(xiàng)目和案例并參與了單元項(xiàng)目的設(shè)計(jì)和資源制作。全書由藍(lán)永健統(tǒng)稿。由于編者水平有限，書中難免存在不妥和疏漏之處，歡迎廣大讀者提出寶貴意見。編　者

職業(yè)院校教師

目錄前言二維碼索引單元1　搭建開發(fā)環(huán)境　　// 0011.1　Web前端開發(fā)概述　　// 0021.2　Web前端開發(fā)常用術(shù)語　　// 0021.3　HTML5的基本結(jié)構(gòu)　　// 0031.4　Web瀏覽器簡介　　// 0051.5　Web開發(fā)工具簡介　　// 0051.6　AI輔助編程工具簡介　　// 007技能實(shí)訓(xùn)　　// 009小結(jié)　　// 009單元2　HTML基礎(chǔ)　　// 0102.1　HTML標(biāo)記和語義元素　　// 0112.2　HTML文本標(biāo)記　　// 0122.3　HTML超鏈接　　// 0142.4　HTML圖像　　// 0182.5　HTML表格　　// 020技能實(shí)訓(xùn)　　// 026小結(jié)　　// 026單元3　HTML進(jìn)階　　// 0273.1　HTML列表　　// 0283.2　HTML5媒體元素　　// 0303.3　HTML5表單控件　　// 0323.4　HTML內(nèi)聯(lián)框架　　// 039技能實(shí)訓(xùn)　　// 041小結(jié)　　// 041單元4　CSS基礎(chǔ)　　// 0424.1　CSS和CSS3簡介　　// 0434.2　引入CSS　　// 0434.3　CSS基本語法　　// 0444.4　CSS文本屬性　　// 0474.5　CSS常用背景屬性　　// 0504.6　CSS的選擇器與權(quán)重　　// 0544.7　CSS表格與列表屬性　　// 059技能實(shí)訓(xùn)　　// 062小結(jié)　　// 062單元5　CSS盒子模型　　// 0635.1　盒子模型的概念　　// 0645.2　盒子模型的構(gòu)成屬性　　// 0665.3　盒子模型的定位　　// 072技能實(shí)訓(xùn)　　// 077小結(jié)　　// 078單元6　CSS彈性布局　　// 0796.1　Flex布局簡介　　// 0806.2　Flex容器屬性　　// 0826.3　Flex項(xiàng)目屬性　　// 0906.4　媒體查詢與響應(yīng)式布局　　// 093技能實(shí)訓(xùn)　　// 095小結(jié)　　// 096單元7　CSS動畫　　// 0977.1　CSS動畫簡介和坐標(biāo)系　　// 0987.2　transform變形屬性　　// 0997.3　transition過渡屬性　　// 1047.4　animation動畫屬性　　// 106技能實(shí)訓(xùn)　　// 111小結(jié)　　// 111單元8　JavaScript基礎(chǔ)　　// 1128.1　JavaScript簡介　　// 1138.2　語法基礎(chǔ)　　// 1138.3　數(shù)據(jù)類型　　// 1158.4　運(yùn)算符　　// 1188.5　數(shù)據(jù)類型轉(zhuǎn)換　　// 1218.6　流程控制語句　　// 1238.7　函數(shù)　　// 1288.8　對象　　// 129技能實(shí)訓(xùn)　　// 131小結(jié)　　// 131單元9　JavaScript進(jìn)階　　// 1329.1　DOM簡介　　// 1339.2　DOM對象操作　　// 1339.3　BOM簡介和操作　　// 1389.4　JavaScript事件處理　　// 1439.5　JavaScript JSON　　// 1499.6　JavaScript Ajax　　// 150技能實(shí)訓(xùn)　　// 152小結(jié)　　// 152參考文獻(xiàn)　　// 153