HTML5網(wǎng)頁(yè)前端設(shè)計(jì)——HTML5+CSS3+JavaScript+Vue.js
定 價(jià)：59.8 元
叢書名：Web前端開發(fā)技術(shù)叢書
- 作者：周文潔
- 出版時(shí)間：2024/12/1
- ISBN：9787302695318
- 出 版 社：清華大學(xué)出版社
- 中圖法分類：TP312.8HT
- 頁(yè)碼：
- 紙張：膠版紙
- 版次：
- 開本：16開
本書是一本從零開始學(xué)習(xí)的Web前端開發(fā)教材，無需額外的基礎(chǔ)。本書知識(shí)體系結(jié)構(gòu)較新，以項(xiàng)目驅(qū)動(dòng)為宗旨，詳細(xì)介紹HTML5、CSS3與JavaScript的基礎(chǔ)知識(shí)與使用技巧。本書包含211個(gè)示例，均在瀏覽器中調(diào)試通過。作者為書中所有示例以及最后兩章的綜合設(shè)計(jì)實(shí)例精心錄制了總計(jì)1400分鐘的視頻講解，包括264個(gè)視頻文件。本書新增了各章節(jié)知識(shí)點(diǎn)案例的AI快捷實(shí)現(xiàn)技巧介紹，并額外提供了關(guān)于內(nèi)嵌AI智能體的網(wǎng)頁(yè)項(xiàng)目開發(fā)實(shí)戰(zhàn)案例。本書提供豐富的配套資源，包括教學(xué)大綱、教學(xué)課件、電子教案、程序源碼、教學(xué)進(jìn)度表和在線題庫(kù)。本書可作為高等院校計(jì)算機(jī)相關(guān)專業(yè)HTML5課程的教材，也可作為學(xué)習(xí)HTML5開發(fā)的自學(xué)教材或培訓(xùn)教材。
本書特色：（1）項(xiàng)目驅(qū)動(dòng)教學(xué)：完整例題199個(gè)，每章階段案例10個(gè)，進(jìn)階綜合案例2個(gè)；（2）AI輔助編程：知識(shí)點(diǎn)案例的AI快捷實(shí)現(xiàn)技巧詳解，內(nèi)嵌AI智能體的網(wǎng)頁(yè)項(xiàng)目開發(fā)實(shí)戰(zhàn)。為便于教學(xué)，本書提供豐富的配套資源，包括教學(xué)大綱、教學(xué)課件、電子教案、例題與案例源碼、在線作業(yè)、習(xí)題答案和1400分鐘的微課視頻。
前言
黨的二十大報(bào)告指出： 教育、科技、人才是全面建設(shè)社會(huì)主義現(xiàn)代化國(guó)家的基礎(chǔ)性、戰(zhàn)略性支撐。必須堅(jiān)持科技是優(yōu)質(zhì)生產(chǎn)力、人才是優(yōu)質(zhì)資源、創(chuàng)新是優(yōu)質(zhì)動(dòng)力，深入實(shí)施科教興國(guó)戰(zhàn)略、人才強(qiáng)國(guó)戰(zhàn)略、創(chuàng)新驅(qū)動(dòng)發(fā)展戰(zhàn)略，開辟發(fā)展新領(lǐng)域新賽道，不斷塑造發(fā)展新動(dòng)能新優(yōu)勢(shì)。高等教育與經(jīng)濟(jì)社會(huì)發(fā)展緊密相連，對(duì)促進(jìn)就業(yè)創(chuàng)業(yè)、助力經(jīng)濟(jì)社會(huì)發(fā)展、增進(jìn)人民福祉具有重要意義。
HTML5的時(shí)代已經(jīng)到來——高度跨平臺(tái)自適應(yīng)的特性讓HTML5逐步走向技術(shù)前沿，為PC端和移動(dòng)端設(shè)備帶來無縫銜接的豐富內(nèi)容。如今HTML5這個(gè)詞已經(jīng)不僅僅是它本身的意思了，還代表著以它為首的CSS3、jQuery等一系列新技術(shù)的合集，這也是未來Web前端開發(fā)的趨勢(shì)所在。
本書是一本從零開始學(xué)習(xí)的Web前端開發(fā)教材，無需額外的基礎(chǔ)。全書以項(xiàng)目驅(qū)動(dòng)為宗旨，詳細(xì)介紹HTML5、CSS3與JavaScript的基礎(chǔ)知識(shí)與使用技巧。
全書共包含13章，可分為以下三部分：
優(yōu)質(zhì)部分是基礎(chǔ)知識(shí)篇，包括第1~4章的內(nèi)容。其中，第1章是緒論，概要介紹Web原理基礎(chǔ)、主流Web前端開發(fā)技術(shù)以及開發(fā)工具的選擇； 第2章是HTML5基礎(chǔ)，講解HTML5的基本結(jié)構(gòu)、保留的HTML常用標(biāo)簽以及HTML5新增的常用標(biāo)簽的用法； 第3章是CSS基礎(chǔ)，主要講解CSS樣式表、選擇器、語(yǔ)法規(guī)則、取值單位以及一系列CSS常用樣式； 第4章是JavaScript基礎(chǔ)，主要講解JavaScript的變量、基本數(shù)據(jù)類型、對(duì)象、運(yùn)算符、條件語(yǔ)句、循環(huán)語(yǔ)句、函數(shù)、DOM以及BOM的相關(guān)知識(shí)。本版第2~4章新增的階段案例分別是“優(yōu)質(zhì)個(gè)Web頁(yè)面”、“導(dǎo)航菜單欄的設(shè)計(jì)與實(shí)現(xiàn)”和“數(shù)字時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)”。
第二部分是重點(diǎn)篇，包括第5~10章的內(nèi)容。這6個(gè)章節(jié)分別詳細(xì)講解HTML5新增API中的一款，包括HTML5拖放API、表單API、畫布API、音頻/視頻API、Web存儲(chǔ)API，以及新增了HTML5字符集與符號(hào)的用法。本版每章節(jié)新增的階段案例分別是“仿回收站效果的設(shè)計(jì)與實(shí)現(xiàn)”、“用戶注冊(cè)頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)”、“手繪時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)”、“在線教學(xué)視頻的設(shè)計(jì)與實(shí)現(xiàn)”、“網(wǎng)頁(yè)主題設(shè)置的設(shè)計(jì)與實(shí)現(xiàn)”和“簡(jiǎn)易Emoji查詢器的設(shè)計(jì)與實(shí)現(xiàn)”。
第三部分是提高篇，包括第11~13章的內(nèi)容。第11章是CSS3技術(shù)，主要講解CSS3新增的樣式用法，包括邊框、背景、文本、字體、多列等方面的樣式效果，以及新增的變形、漸變和動(dòng)畫技術(shù)。本版該章節(jié)新增階段案例“特殊字體效果的設(shè)計(jì)與實(shí)現(xiàn)”。第12章主要講解一個(gè)節(jié)選自實(shí)戰(zhàn)性質(zhì)的項(xiàng)目——高校輔導(dǎo)員培訓(xùn)基地網(wǎng)的設(shè)計(jì)與實(shí)現(xiàn)； 第13章是本版的新增內(nèi)容，介紹基于Vue.js 3.x的優(yōu)質(zhì)個(gè)項(xiàng)目以及使用組合式API制作一個(gè)秒表應(yīng)用。這兩章通過對(duì)項(xiàng)目實(shí)例的解析與實(shí)現(xiàn)，提高開發(fā)者的分析能力，強(qiáng)化對(duì)HTML5、CSS3、JavaScript以及Vue.js 3.x的綜合應(yīng)用能力。
本書包含完整例題199個(gè)、每章階段案例10個(gè)以及提高篇進(jìn)階綜合案例2個(gè)，均在瀏覽器中調(diào)試通過。由于很多HTML5和CSS3的代碼需要較高版本瀏覽器方能提供更好的體驗(yàn)效果，建議讀者使用但不限于Chrome 17.0、Firefox 10.0、Safari 5.0或Opera 11.1以上版本的瀏覽器。
本書提供豐富的配套資源，包括教學(xué)大綱、教學(xué)課件、電子教案、例題和案例源代碼、在線題庫(kù)、習(xí)題答案、教學(xué)進(jìn)度表和1400分鐘的微課視頻。
資源下載提示
課件等資源： 掃描封底的“圖書資源”二維碼，在公眾號(hào)“書圈”下載。
素材（源碼）等資源： 掃描目錄上方的二維碼下載。
在線作業(yè)： 掃描封底的作業(yè)系統(tǒng)二維碼，再掃描自測(cè)題二維碼，可以在線做題及查看答案。
視頻資源： 掃描封底的文泉云盤防盜碼，再掃描書中相應(yīng)章節(jié)中的視頻講解二維碼，可以在線學(xué)習(xí)。
本書新增了各章節(jié)知識(shí)點(diǎn)案例的AI快捷實(shí)現(xiàn)技巧介紹，并額外提供了關(guān)于內(nèi)嵌AI智能體的網(wǎng)頁(yè)項(xiàng)目開發(fā)實(shí)戰(zhàn)案例。
最后，感謝清華大學(xué)出版社魏江江分社長(zhǎng)、王冰飛編輯以及相關(guān)工作人員，非常榮幸能與的你們?cè)俣群献鳎?特別感謝敬愛的周泉先生和任萱女士對(duì)本書出版給予的傾力幫助，無論何時(shí)想起都會(huì)讓我不忘初心繼續(xù)努力； 感謝家人和朋友給予的關(guān)心和鼓勵(lì)，同時(shí)也要感謝我的丈夫劉嵩先生多年來對(duì)我的工作的一貫支持。
愿本書能夠?qū)ψx者學(xué)習(xí)Web前端新技術(shù)有所幫助，并真誠(chéng)地歡迎讀者批評(píng)指正。希望能與讀者朋友共同學(xué)習(xí)成長(zhǎng)，在浩瀚的技術(shù)之海不斷前行。
作者
2025年5月
掃一掃
源碼下載
目錄
優(yōu)質(zhì)部分基礎(chǔ)知識(shí)篇
第1章緒論
1.1Web原理基礎(chǔ)
1.1.1Internet與萬維網(wǎng)
1.1.2Web架構(gòu)
1.1.3Web應(yīng)用
1.2Web前端技術(shù)基礎(chǔ)
1.2.1HTML技術(shù)
1.2.2CSS技術(shù)
1.2.3JavaScript技術(shù)
1.3Web前端新技術(shù)
1.3.1HTML5技術(shù)
1.3.2CSS3技術(shù)
1.4Web開發(fā)工具
1.4.1Adobe Dreamweaver
1.4.2Sublime Text
1.4.3NodePad++
1．4．4Visual Studio Code
1．4．5WebStorm
1.5Web技術(shù)的前景與展望
1.5.1Flash的興衰
1.5.2HTML5的前景
1.5.3未來展望
本章小結(jié)及AI輔助編程技巧
習(xí)題1
第2章HTML5基礎(chǔ)
2.1HTML5基本結(jié)構(gòu)
2.1.1文檔類型聲明!DOCTYPE
2.1.2根標(biāo)簽html
2.1.3標(biāo)簽head
2.1.4主體標(biāo)簽body
2.1.5HTML5文檔注釋
2.1.6HTML5文檔規(guī)范
2.1.7HTML4.01轉(zhuǎn)換為HTML5
2.2HTML5保留的常用標(biāo)簽
2.2.1基礎(chǔ)標(biāo)簽
2.2.2文本格式標(biāo)簽
2.2.3列表標(biāo)簽
2.2.4圖像標(biāo)簽
2.2.5超鏈接標(biāo)簽
2.2.6表格標(biāo)簽
2.2.7框架標(biāo)簽
2.2.8容器標(biāo)簽
2.3HTML5新增的常用標(biāo)簽
2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽
2.3.2HTML5新增格式標(biāo)簽
2.4HTML5新增API
2.5實(shí)驗(yàn)案例——優(yōu)質(zhì)個(gè)Web頁(yè)面
本章小結(jié)及AI輔助編程技巧
習(xí)題2
第3章CSS基礎(chǔ)
3.1CSS樣式表
3.1.1內(nèi)聯(lián)樣式表
3.1.2內(nèi)部樣式表
3.1.3外部樣式表
3.1.4樣式表層疊優(yōu)先級(jí)
3.2CSS選擇器
3.2.1元素選擇器
3.2.2ID選擇器
3.2.3類選擇器
3.2.4屬性選擇器
3.3語(yǔ)法規(guī)則
3.3.1注釋語(yǔ)句
3.3.2@charset
3.3.3!important
3.4CSS取值與單位
3.4.1數(shù)字
3.4.2長(zhǎng)度
3.4.3角度
3.4.4時(shí)間
3.4.5文本
3.4.6顏色
3.5CSS常用樣式
3.5.1CSS背景
3.5.2CSS框模型
3.5.3CSS文本
3.5.4CSS字體
3.5.5CSS超鏈接
3.5.6CSS列表
3.5.7CSS表格
3.6CSS定位
3.6.1非常定位
3.6.2相對(duì)定位
3.6.3層疊效果
3.6.4浮動(dòng)
3.7實(shí)驗(yàn)案例——導(dǎo)航菜單欄的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題3
第4章JavaScript基礎(chǔ)
4.1JavaScript的使用
4.1.1內(nèi)部JavaScript
4.1.2外部JavaScript
4.2JavaScript的語(yǔ)法
4.2.1JavaScript的大小寫
4.2.2JavaScript分號(hào)
4.2.3JavaScript注釋
4.2.4JavaScript代碼塊
4.3JavaScript變量
4.3.1變量的聲明
4.3.2變量的命名規(guī)范
4.3.3JavaScript關(guān)鍵字和保留字
4.4JavaScript基本數(shù)據(jù)類型
4.4.1Undefined類型
4.4.2Null類型
4.4.3String類型
4.4.4Number類型
4.4.5Boolean類型
4.5JavaScript運(yùn)算符
4.5.1賦值運(yùn)算符
4.5.2算術(shù)運(yùn)算符
4.5.3邏輯運(yùn)算符
4.5.4關(guān)系運(yùn)算符
4.5.5相等性運(yùn)算符
4.6JavaScript條件語(yǔ)句
4.6.1if語(yǔ)句
4.6.2switch語(yǔ)句
4.7JavaScript函數(shù)
4.7.1函數(shù)的基本結(jié)構(gòu)
4.7.2函數(shù)的調(diào)用
4.7.3函數(shù)的返回值
4.8文檔對(duì)象模型
4.8.1查找HTML元素
4.8.2DOM HTML
4.8.3DOM CSS
4.8.4DOM事件
4.8.5DOM節(jié)點(diǎn)
4.9實(shí)驗(yàn)案例——數(shù)字時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題4
第二部分重點(diǎn)篇
第5章HTML5拖放API
5.1HTML5新增拖放API
5.2瀏覽器支持情況
5.3HTML5拖放API的應(yīng)用
5.3.1DragEvent事件
5.3.2DataTransfer對(duì)象
5.3.3拖放元素過程
5.3.4自定義拖放圖標(biāo)
5.3.5自定義拖放行為
5.3.6本地文件的拖放
5.4實(shí)驗(yàn)案例——仿回收站效果的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題5
第6章HTML5表單API
6.1HTML表單基礎(chǔ)
6.1.1表單標(biāo)簽form
6.1.2輸入標(biāo)簽input
6.1.3標(biāo)記標(biāo)簽label
6.1.4多行文本標(biāo)簽textarea
6.1.5列表標(biāo)簽select
6.1.6按鈕標(biāo)簽button
6.1.7域標(biāo)簽fieldset和域標(biāo)題標(biāo)簽legend
6.2HTML5表單新特性
6.2.1HTML5表單新增輸入類型
6.2.2HTML5表單新增元素標(biāo)簽
6.2.3HTML5表單新增屬性
6.3實(shí)驗(yàn)案例——用戶注冊(cè)頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題6
第7章HTML5畫布API
7.1畫布概述
7.1.1HTML5畫布
7.1.2畫布坐標(biāo)
7.1.3主流瀏覽器支持情況一覽
7.2HTML5畫布API的應(yīng)用
7.2.1檢測(cè)瀏覽器支持情況
7.2.2創(chuàng)建畫布
7.2.3畫布繪制方法
7.2.4繪制路徑
7.2.5繪制矩形
7.2.6繪制圖片
7.2.7繪制文本
7.2.8顏色與樣式
7.2.9保存和恢復(fù)
7.2.10變形
7.2.11剪裁
7.3實(shí)驗(yàn)案例——手繪時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題7
第8章HTML5媒體API
8.1HTML5媒體API概述
8.1.1HTML5音頻和視頻
8.1.2HTML5媒體支持的格式
8.2主流瀏覽器支持情況一覽
8.2.1對(duì)HTML5音頻的支持情況
8.2.2對(duì)HTML5視頻的支持情況
8.3HTML5音頻的應(yīng)用
8.3.1HTML5音頻的基本格式
8.3.2檢查瀏覽器支持情況
8.3.3音頻來源多樣性
8.3.4自定義音頻控制
8.4HTML5視頻的應(yīng)用
8.4.1HTML5視頻的基本格式
8.4.2檢測(cè)瀏覽器支持情況
8.4.3視頻來源多樣性
8.4.4自定義視頻控制
8.5HTML5媒體API其他通用功能
8.5.1標(biāo)記媒體播放時(shí)間范圍
8.5.2跳轉(zhuǎn)媒體播放時(shí)間點(diǎn)
8.5.3獲取媒體播放時(shí)間
8.5.4終止媒體文件的下載
8.6實(shí)驗(yàn)案例——在線教學(xué)視頻的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題8
第9章HTML5 Web存儲(chǔ)API
9.1Web存儲(chǔ)技術(shù)概述
9.1.1HTTP Cookie存儲(chǔ)
9.1.2HTML5 Web存儲(chǔ)
9.2主流瀏覽器支持情況
9.3HTML5 Web存儲(chǔ) API的應(yīng)用
9.3.1檢測(cè)瀏覽器支持情況
9.3.2Storage接口
9.3.3localStorage與sessionStorage
9.3.4存儲(chǔ)數(shù)據(jù)
9.3.5讀取指定數(shù)據(jù)
9.3.6數(shù)據(jù)遍歷
9.3.7刪除指定數(shù)據(jù)
9.3.8清空所有數(shù)據(jù)
9.4實(shí)驗(yàn)案例——網(wǎng)頁(yè)主題設(shè)置的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題9
第10章HTML5 字符集與符號(hào)
10.1HTML5字符集概述
10．1．1什么是字符集
10．1．2常見字符集介紹
10.2HTML5符號(hào)
10.2.1HTML5數(shù)學(xué)符號(hào)
10．2．2HTML5帶圈符號(hào)
10．2．3HTML5貨幣符號(hào)
10．2．4HTML5撲克牌符號(hào)
10．2．5HTML5雜項(xiàng)符號(hào)
10.3HTML5 Emoji
10．3．1什么是Emoji
10．3．2HTML5 Emoji笑臉表情系列
10．3．3HTML5 Emoji交通系列
10．3．4HTML5 Emoji動(dòng)物系列
10．3．5HTML5 Emoji辦公系列
10.4實(shí)驗(yàn)案例——簡(jiǎn)易Emoji查詢器的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題10
第三部分提高篇
第11章CSS3技術(shù)
11.1CSS3邊框和背景效果
11.1.1CSS3邊框
11.1.2CSS3背景效果
11.2CSS3文本和字體效果
11.2.1CSS3文本
11.2.2CSS3字體
11.3CSS3變形與動(dòng)畫效果
11.3.1CSS3 2D變形
11.3.2CSS3 Transition動(dòng)畫
11.3.3CSS3 Animation動(dòng)畫
11.4CSS3多列
11.4.1columns
11.4.2columngap
11.4.3columnrule
11.5實(shí)驗(yàn)案例——特殊字體效果的設(shè)計(jì)與實(shí)現(xiàn)
本章小結(jié)及AI輔助編程技巧
習(xí)題11
第12章前端綜合應(yīng)用·基于HTML5+CSS3的高校網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)
12.1項(xiàng)目簡(jiǎn)介
12.2整體布局設(shè)計(jì)
12.3網(wǎng)站頁(yè)眉實(shí)現(xiàn)
12.4菜單導(dǎo)航欄實(shí)現(xiàn)
12.4.1菜單欄目的實(shí)現(xiàn)
12.4.2搜索框的實(shí)現(xiàn)
12.5主體內(nèi)容優(yōu)質(zhì)行實(shí)現(xiàn)
12.5.1左側(cè)面板的實(shí)現(xiàn)
12.5.2右側(cè)面板上方的實(shí)現(xiàn)
12.5.3右側(cè)面板下方的實(shí)現(xiàn)
12.6主體內(nèi)容第二行實(shí)現(xiàn)
12.7網(wǎng)站頁(yè)腳實(shí)現(xiàn)
12.7.1頁(yè)腳1的實(shí)現(xiàn)
12.7.2頁(yè)腳2的實(shí)現(xiàn)
12.8完整代碼展示
本章小結(jié)及AI輔助編程技巧
第13章前端框架實(shí)戰(zhàn)·基于Vue.js 3．x的秒表程序的設(shè)計(jì)與實(shí)現(xiàn)
13.1前端框架簡(jiǎn)介
13．1．1什么是前端框架
13．1．2基礎(chǔ)前端框架
13．1．3高級(jí)前端框架
13.2Vue.js 3.x入門
13．2．1Vue.js 3.x的安裝
13.2.2基于Vue.js 3.x的優(yōu)質(zhì)個(gè)應(yīng)用
13.3基于Vue.js 3.x的簡(jiǎn)易秒表的設(shè)計(jì)與實(shí)現(xiàn)
13．3．1創(chuàng)建項(xiàng)目結(jié)構(gòu)
13．3．2頁(yè)面設(shè)計(jì)
13．3．3邏輯實(shí)現(xiàn)
13．3．4完整代碼展示
本章小結(jié)及AI輔助編程技巧
結(jié)束語(yǔ)
附錄AHTML5元素標(biāo)簽對(duì)照表
附錄BHTML5事件屬性對(duì)照表
附錄CCSS3顏色名稱對(duì)照表
附錄DAI輔助編程綜合案例
書單推薦
