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