HTML5網頁前端設計——HTML5+CSS3+JavaScript+Vue.js（項目案例·微課視頻·題庫·第3版）

周文潔 單位：安徽師範大學 職務：無 職稱：副教授 性別：女 年齡：31 專業：大學信息技術 學歷：碩士 研究領域：從事教學、系統運維和研發等工作 研究成果：教育部2018年第一批產學協同育人項目——微信事業部“微信小程序課程改革”負責人。主要從事Java程序設計、Android程序設計、HTML5網頁前端設計等課程教學工作，擅長案例式教學模式，並開發過多個商業項目。近年來出版Web前端開發技術系列教材，獨立編著了《HTML5網頁前端設計》和《HTML5網頁前端設計實戰》等教材

 

掃一掃

源碼下載

 

 

 

 

 

 

目錄

 

 

第一部分基礎知識篇

 

 

第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開發工具

 

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文檔規範

 

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實驗案例——第一個Web頁面

 

本章小結及AI輔助編程技巧

 

習題2

 

 

 

 

 

第3章CSS基礎

 

3.1CSS樣式表

 

3.1.1內聯樣式表

 

3.1.2內部樣式表

 

3.1.3外部樣式表

 

3.1.4樣式表層疊優先級

 

3.2CSS選擇器

 

3.2.1元素選擇器

 

3.2.2ID選擇器

 

3.2.3類選擇器

 

3.2.4屬性選擇器

 

3.3語法規則

 

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變量的命名規範

 

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節點

 

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創建畫布

 

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.2columngap

 

11.4.3columnrule

 

11.5實驗案例——特殊字體效果的設計與實現

 

本章小結及AI輔助編程技巧

 

習題11

 

第12章前端綜合應用·基於HTML5+CSS3的高校網站的設計與實現

 

12.1項目簡介

 

12.2整體布局設計

 

12.3網站頁眉實現

 

12.4菜單導航欄實現

 

12.4.1菜單欄目的實現

 

12.4.2搜索框的實現

 

12.5主體內容第一行實現

 

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章前端框架實戰·基於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的第一個應用

 

13.3基於Vue.js  3.x的簡易秒表的設計與實現

 

13．3．1創建項目結構

 

13．3．2頁面設計

 

13．3．3邏輯實現

 

13．3．4完整代碼展示

 

本章小結及AI輔助編程技巧

 

結束語

 

附錄AHTML5元素標簽對照表

 

附錄BHTML5事件屬性對照表

 

附錄CCSS3顏色名稱對照表

 

附錄DAI輔助編程綜合案例