HTML5 + CSS3 + JavaScript 前端開發從零開始學 (視頻教學版)

HTML5、CSS3和JavaScript技術是網頁設計的精髓。通過對本書實例和綜合案例的學習與演練，讀者可以盡快掌握上述技術，提高網頁設計的實戰能力。本書配套示例源代碼、PPT課件與同步教學視頻。 本書共分18章。內容包括HTML5快速入門，文本、圖像和超鏈接，創建表格和表單，CSS快速入門， CSS3字體與段落屬性，CSS3美化表格和表單樣式，CSS3美化圖像，CSS3美化背景與邊框，JavaScript概述，JavaScript語言基礎，JavaScript內置對象，JavaScript對象編程，JavaScript操縱CSS3，HTML5繪制圖形，HTML5中的音頻和視頻，地理定位、離線Web應用和Web存儲，開發企業門戶網站，開發響應式購物網站。 本書內容豐富、講解細致，適合Web前端開發初學者；對於從事網站美工工作的讀者而言，是一本必不可少的工具書；對於從事Web系統開發的讀者來說，也是一本難得的參考手冊。本書也適合作為高等院校Web前端開發課程的教材或教學參考書。

 

2.2  文本排版 11

2.2.1  換行標簽<br/>與段落標簽<p> 11

2.2.2  標題標簽<h1>～<h6> 12

2.3  文字列表 12

2.3.1  無序列表<ul> 13

2.3.2  有序列表<ol> 14

2.4  網頁中的圖片 14

2.4.1  使用路徑 14

2.4.2  在網頁中插入圖像標簽<img> 16

2.5  URL的概念 17

2.5.1  URL的格式 17

2.5.2  URL的類型 18

2.6  超鏈接標簽<a> 18

2.6.1  設置文本和圖片的超鏈接 19

2.6.2  超鏈接指向的目標類型 19

第3章  創建表格和表單 21

3.1  表格基本結構及操作 21

3.1.1  表格基本結構 21

3.1.2  合並單元格 22

3.2  設計產品報價單 25

3.3  表單基本元素的使用 27

3.4  表單高級元素的使用 31

3.4.1  url和email屬性 31

3.4.2  date和times屬性 32

3.4.3  number屬性 33

3.4.4  range屬性 33

3.4.5  required屬性 34

第4章  CSS快速入門 35

4.1  CSS簡介 35

4.1.1  CSS的功能 35

4.1.2  CSS的發展歷史 36

4.1.3  瀏覽器與CSS3 36

4.2  CSS基礎語法 37

4.3  在HTML5中使用CSS3的方法 37

4.4  CSS的選擇器 39

4.4.1  標簽選擇器和全局選擇器 40

4.4.2  類和ID選擇器 41

4.4.3  組合選擇器 42

4.4.4  偽類 43

4.4.5  屬性選擇器 44

4.4.6  結構偽類選擇器 45

4.4.7  UI元素狀態偽類選擇器 46

4.5  項目實戰—設計新聞菜單效果 48

第5章  CSS3字體與段落屬性 51

5.1  字體屬性 51

5.2  文本高級樣式 54

5.2.1  陰影文本text-shadow 55

5.2.2  溢出文本text-overflow 56

5.2.3  控制換行word-wrap 57

5.3  段落屬性 58

5.3.1  單詞間隔word-spacing 58

5.3.2  字符間隔letter-spacing 59

5.3.3  垂直對齊方式vertical-align 60

5.3.4  水平對齊方式text-align 61

5.3.5  文本縮進text-indent 63

5.3.6  文本行高line-height 63

5.4  項目實戰—設計旅游宣傳網頁 64

第6章  CSS3美化表格和表單樣式 68

6.1  表格基本樣式 68

6.1.1  表格邊框樣式 68

6.1.2  表格邊框寬度 70

6.1.3  表格邊框顏色 71

6.2  CSS3與表單 73

6.2.1  美化表單元素 73

6.2.2  美化邊框樣式 74

6.2.3  美化下拉菜單 76

6.3  項目實戰1—設計隔行變色的表格 77

6.4  項目實戰2—設計註冊表單效果 80

第7章  CSS3美化圖片 83

7.1  圖片樣式 83

7.1.1  圖片邊框 83

7.1.2  圖片縮放 84

7.2  對齊圖片 86

7.2.1  橫向對齊方式 86

7.2.2  縱向對齊方式 87

7.3  圖文混排 88

7.3.1  文字環繞 88

7.3.2  設置圖片與文字間距 89

7.4  項目實戰—美化新聞頁面 90

第8章  CSS3美化背景與邊框 93

8.1  背景相關屬性 93

8.1.1  背景顏色 93

8.1.2  背景圖片 94

8.1.3  背景圖片重復 95

8.1.4  背景圖片顯示 96

8.1.5  背景圖片的大小 98

8.1.6  背景顯示區域 99

8.1.7  背景圖像裁剪區域 101

8.2  邊框 102

8.2.1  邊框樣式 102

8.2.2  邊框顏色 103

8.2.3  邊框線寬 104

8.2.4  邊框復合屬性 106

8.3  圓角邊框 106

8.3.1  圓角邊框屬性 106

8.3.2  指定兩個圓角半徑 107

8.3.3  繪制四個不同圓角的邊框 108

8.3.4  繪制邊框種類 110

8.4  項目實戰——設計公司主頁 111

第9章  JavaScript概述 115

9.1  JavaScript簡介 115

9.1.1  JavaScript是什麽 115

9.1.2  JavaScript的發展歷史 116

9.2  在HTML5文件中使用JavaScript代碼 117

9.2.1  JavaScript嵌入HTML5文件 117

9.2.2  外部JavaScript文件 118

9.3  項目實戰—歡迎光臨網站的JavaScript程序 119

第10章  JavaScript語言基礎 120

10.1  數據類型與變量 120

10.1.1  數據類型 120

10.1.2  變量 122

10.1.3  關鍵字與保留字 124

10.2  運算符與表達式 124

10.2.1  算術運算符與算術表達式 125

10.2.2  賦值運算符與賦值表達式 125

10.2.3  關系運算符與關系表達式 126

10.2.4  位運算符與位運算表達式 127

10.2.5  邏輯運算符與邏輯表達式 128

10.2.6  其他運算符及運算符優先級 129

10.3  流程控制語句 130

10.3.1  註釋語句和語句塊 130

10.3.2  選擇語句 131

10.3.3  循環語句 137

10.4  函數 140

10.4.1  函數簡介 140

10.4.2  定義函數 141

10.4.3  調用函數 143

10.4.4  系統函數 145

10.5  項目實戰—購物簡易計算器 148

第11章  JavaScript內置對象 151

11.1  字符串對象 151

11.1.1  字符串對象的創建 151

11.1.2  字符串對象的常用屬性 152

11.1.3  字符串對象的常用函數 152

11.2  數學對象 154

11.2.1  數學對象的屬性 154

11.2.2  數學對象的函數 155

11.3  日期對象 158

11.3.1  創建日期對象 158

11.3.2  日期對象的常用函數 159

11.3.3  日期間的運算 161

11.4  數組對象 162

11.4.1  數組對象的創建 162

11.4.2  數組對象的操作 163

11.4.3  數組對象的常用方法 165

11.5  項目實戰—設計網站的隨機驗證碼 168

第12章  JavaScript對象編程 171

12.1  文檔對象模型 171

12.1.1  文檔對象模型概述 171

12.1.2  在DOM模型中獲得對象的方法 171

12.1.3  事件驅動 173

12.2  窗口對象 174

12.2.1  窗口概述 174

12.2.2  對話框 176

12.2.3  窗口操作 177

12.3  文檔對象 179

12.3.1  文檔的屬性 179

12.3.2  文檔中的圖片 181

12.3.3  文檔中的超鏈接 182

12.4  表單對象 183

12.4.1  form對象 183

12.4.2  form對象的屬性與方法 184

12.4.3  單選與復選的使用 185

12.4.4  使用下拉菜單 187

12.5  項目實戰—表單註冊與表單驗證 188

第13章  JavaScript操縱CSS3 193

13.1  DHTML簡介 193

13.2  前臺動態網頁效果 194

13.2.1  動態內容 194

13.2.2  動態樣式 195

13.2.3  動態定位 196

13.2.4  顯示與隱藏 198

13.3  項目實戰—控製表單背景色和文字提示 199

第14章  HTML5繪制圖形 202

14.1  canvas概述 202

14.1.1  添加canvas元素 202

14.1.2  繪制矩形 203

14.2  繪制基本形狀 204

14.2.1  繪制圓形 204

14.2.2  繪制直線 205

14.2.3  繪制貝塞爾曲線 207

14.3  繪制漸變圖形 208

14.3.1  繪制線性漸變 208

14.3.2  繪制徑向漸變 210

14.4  繪制變形圖形 211

14.4.1  變換原點坐標 211

14.4.2  圖形縮放 212

14.4.3  圖形旋轉 213

14.5  圖形組合 214

14.6  繪制帶陰影的圖形 216

14.7  使用圖像 217

14.7.1  繪制圖像 217

14.7.2  平鋪圖像 218

14.7.3  裁剪圖像 219

14.8  繪制文字 221

14.9  圖形的保存與恢復 223

14.9.1  保存與恢復狀態 223

14.9.2  保存文件 224

14.10  項目實戰—繪制商標 225

第15章  HTML5中的音頻和視頻 227

15.1  <audio>標簽 227

15.1.1  <audio>標簽概述 227

15.1.2  <audio>標簽的屬性 228

15.1.3  音頻解碼器 228

15.1.4  <audio>標簽瀏覽器的支持情況 228

15.2  <video>標簽 229

15.2.1  <video>標簽概述 229

15.2.2  <video>標簽的屬性 230

15.2.3  視頻解碼器 230

15.2.4  <video>標簽瀏覽器的支持情況 230

15.3  音頻和視頻中的方法 231

15.3.1  canPlayType()方法 231

15.3.2  load()方法 232

15.3.3  play()方法和pause()方法 233

15.4  音頻和視頻中的屬性 233

15.4.1  autoplay屬性 234

15.4.2  buffered屬性 235

15.4.3  controls屬性 235

15.4.4  currentSrc屬性 237

第16章  地理定位、離線Web應用和Web存儲 238

16.1  獲取地理位置 238

16.1.1  地理定位的原理 238

16.1.2  地理定位的函數 238

16.1.3  指定緯度和經度坐標 239

16.1.4  目前瀏覽器對地理定位的支持情況 240

16.2  HTML5離線Web應用 241

16.2.1  新增的本地緩存 241

16.2.2  本地緩存的管理者—manifest文件 241

16.2.3  瀏覽器網頁緩存與本地緩存的區別 242

16.2.4  目前瀏覽器對離線Web應用的支持情況 242

16.3  Web存儲 243

16.3.1  本地存儲和Cookie的區別 243

16.3.2  在客戶端存儲數據 243

16.3.3  sessionStorage函數 243

16.3.4  localStorage函數 245

16.3.5  目前瀏覽器對Web存儲的支持情況 245

第17章  開發企業門戶網站 246

17.1  構思佈局 246

17.1.1  設計分析 247

17.1.2  排版架構 247

17.2  模塊分割 248

17.2.1  Logo與導航菜單 248

17.2.2  左側文本介紹 250

17.2.3  右側導航鏈接 252

17.2.4  版權信息 254

17.3  整體調整 254

第18章  開發響應式購物網站 256

18.1  項目概述 256

18.1.1  項目結構目錄 256

18.1.2  項目效果展示 257

18.2  首頁設計 258

18.2.1  設計廣告欄 258

18.2.2  設計導航欄 260

18.2.3  設計輪播 261

18.2.4  設計蔬菜欄 263

18.2.5  設計乾果欄 264

18.2.6  設計底部欄 267

18.3  購買頁面設計 268

18.4  蔬菜展示頁面設計 270