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