編輯推薦
適讀人群 :應用廣泛,主要是針對於零基礎的編程學員或PHP、UI、Java和IOS其他開發師等,他們都適閤學習此本讀物。 本書不僅有通俗易懂的語法講解,也用貼切的小案例實驗,使讀者能輕鬆掌握新知識,且可以快速上手前端技術操作。本書適閤對前端技術開發感興趣的初學者閱讀,也可以作為從事前端技術工作的開發人員的參考書,或作為大學生學習HTML5的教材。
內容簡介
通過本書的學習,能快速上手網站前端開發。為瞭使HTML5語言能被讀者更好地掌握和應用,同時作為“跟兄弟連學HTML5係列教程”的**本入門級圖書,本書對HTML語言的知識點進行瞭詳細的闡述和分析,包括HTML5和CSS3的語法、各種頁麵布局方法、流行的前端框架Bootstrap等內容。不僅有通俗易懂的語法講解,也用貼切的小案例實驗,使讀者能輕鬆掌握新知識,且可以快速上手前端技術操作。本書適閤對前端技術開發感興趣的初學者閱讀,也可以作為從事前端技術工作的開發人員的參考書,或作為大學生學習HTML5的教材。同時,本書也為讀者之後學習同係列其他圖書奠定基礎。
作者簡介
兄弟連IT教育,成立於2006年,中國程序員培訓領導者。兄弟連以“優秀的教學、嚴格的管理、職業素質課貫穿始終”而聞名,現已開設PHP、UI、HTML5、Java/Android、iOS、Linux等眾多課程,分彆在北京、上海、廣州、瀋陽、揚州、蘇州、鄭州、濟南設立校區,今後會陸續在成都、西安、武漢等地建設校區,每年有數十萬名學員受益於兄弟連的職業培訓、教學視頻、網絡公開課、院校講座、齣版書籍。我們相信,我們不僅僅是老師,更是學員的夢想守護者與職場引路人。
目錄
第1章 介紹HTML5 1
1.1 瞭解HTML5的主流應用 1
1.1.1 錶單的強大 2
1.1.2 響應式頁麵布局 2
1.1.3 與用戶交互的特效 4
1.1.4 微網站的製作 5
1.1.5 基於HTML5的移動APP開發 6
1.1.6 HTML5遊戲 7
1.1.7 多媒體的應用 7
1.2 什麼是HTML5 8
1.2.1 HTML5和HTML的關係 8
1.2.2 HTML和CSS的關係 10
1.2.3 HTML5和CSS3的關係 11
1.2.4 HTML5和JavaScript的關係 11
1.3 HTML5的靠山 12
1.3.1 W3C是什麼 12
1.3.2 IETF是什麼 13
1.3.3 RFC是什麼 14
1.3.4 WHATWG是什麼 14
1.3.5 Web的新標準 14
1.4 HTML5的麯摺發展過程 15
1.4.1 HTML5的誕生 15
1.4.2 瀏覽器之間的大戰 16
1.4.3 HTML5技術的應用現狀 18
1.4.4 HTML5平颱的興起 18
1.4.5 HTML5行業的發展預測 20
1.5 HTML5的學習綫路圖 21
1.5.1 第一階段――學習網頁製作 23
1.5.2 第二階段――編寫用戶交互功能 24
1.5.3 第三階段――成為前端工程師 25
本章小結 26
本章習題 26
第2章 HTML5的基本語法 28
2.1 課前準備 28
2.1.1 瞭解Web 29
2.1.2 瞭解HTML 30
2.1.3 瞭解HTML運行原理 30
2.1.4 如何選擇開發工具 31
2.1.5 認識瀏覽器中的開發者工具 32
2.1.6 現在學習HTML5的方式 34
2.1.7 簡單HTML實例製作 35
2.2 HTML語言的語法 36
2.2.1 HTML標簽和元素 36
2.2.2 HTML語法不區分字母大小寫 37
2.2.3 HTML標簽屬性 37
2.2.4 HTML顔色值的設置 37
2.2.5 HTML文檔注釋 38
2.2.6 HTML代碼格式 38
2.2.7 HTML字符實體 38
2.3 HTML文檔的主體結構 39
2.3.1 HTML文檔類型的新定義方式 40
2.3.2 HTML文檔的主體標簽 41
2.4 HTML文檔頭部標簽<head> 41
2.4.1 <title>標簽 42
2.4.2 <base>標簽 42
2.4.3 <link>標簽 43
2.4.4 <meta>標簽 43
2.5 HTML文檔主體標簽<body> 44
2.6 HTML5做到瞭與之前版本的兼容 45
2.6.1 可以省略標記的元素 45
2.6.2 具有boolean值的屬性 46
2.6.3 引號的使用 46
2.7 設置IE 9以下版本瀏覽器支持HTML5 46
本章小結 47
本章習題 47
第3章 HTML5文字版麵和編輯標簽 49
3.1 HTML基礎標簽 49
3.1.1 標題標簽<h1>~<h6> 50
3.1.2 換行標簽
和段落標簽<p> 51
3.1.3 水平分隔綫標簽<hr> 51
3.1.4 格式標簽 51
3.1.5 文本標簽 53
3.2 使用HTML錶格 55
3.3 HTML框架結構 57
本章小結 60
本章習題 61
第4章 多媒體應用 62
4.1 創建圖像和鏈接 62
4.1.1 URL概述 63
4.1.2 插入圖片 63
4.1.3 建立錨點和超鏈接 64
4.2 HTML圖像地圖 66
4.2.1 什麼是圖像地圖 66
4.2.2 圖像地圖如何製作 66
4.2.3 實現圖像地圖 67
4.3 新增多媒體播放元素 68
本章小結 71
本章習題 71
第5章 HTML5錶單 74
5.1 HTML錶單中的get和post方法 74
5.1.1 get方法 75
5.1.2 post方法 76
5.1.3 HTML錶單中get和post的區彆 76
5.2 HTML錶單設計 77
5.2.1 錶單標簽<form> 77
5.2.2 文本域和密碼域 78
5.2.3 提交、重置和普通按鈕 78
5.2.4 單選按鈕和復選框 79
5.2.5 隱藏域 79
5.2.6 多行文本域 79
5.2.7 菜單下拉列錶域 79
5.2.8 綜閤實例 80
5.3 HTML5新增錶單元素 82
5.3.1 <datalist>元素 82
5.3.2 <keygen>元素 83
5.3.3 <output>元素 84
5.4 多樣的輸入類型 85
5.4.1 email 85
5.4.2 url 86
5.4.3 number 87
5.4.4 range 87
5.4.5 date picker 88
5.4.6 color 89
5.5 HTML占新增的錶單屬性 91
5.5.1 autocomplete屬性 92
5.5.2 autofocus屬性 93
5.5.3 form屬性 94
5.5.4 form overrides錶單重寫屬性 95
5.5.5 height和width屬性 95
5.5.6 list屬性 96
5.5.7 min、max和step屬性 96
5.5.8 multiple屬性 97
5.5.9 novalidate屬性 97
5.5.10 pattern屬性 98
5.5.11 placeholder屬性 98
5.5.12 required屬性 99
5.6 HTML5錶單提交綜閤實例 100
本章小結 103
本章習題 103
第6章 CSS3揭秘 105
6.1 CSS簡介 105
6.2 CSS規則的組成 107
6.2.1 CSS注釋 108
6.2.2 長度單位 108
6.2.3 顔色單位和URL值 109
6.3 在HTML文檔中放置CSS的幾種方式 110
6.3.1 內聯樣式錶 110
6.3.2 嵌入一張樣式錶 110
6.3.3 鏈接到一張外部的樣式錶 111
6.4 CSS普通選擇器 111
6.4.1 HTML選擇器 111
6.4.2 類選擇器 112
6.4.3 id選擇器 112
6.4.4 關聯選擇器 113
6.4.5 組閤選擇器 113
6.4.6 僞元素選擇器 113
6.5 CSS常見的樣式屬性和值 114
6.5.1 字體屬性 114
6.5.2 顔色屬性 115
6.5.3 背景屬性 115
6.5.4 文本屬性 116
6.5.5 邊框屬性 117
6.5.6 鼠標光標屬性 118
6.5.7 列錶屬性 119
6.5.8 CSS綜閤實例 120
6.6 CSS3概述 122
6.6.1 CSS3在選擇器上的支持 122
6.6.2 CSS3在樣式上的支持 122
6.6.3 CSS3對於動畫的支持 123
6.6.4 在實際開發中該如何使用CSS3 123
6.7 CSS復雜選擇器 123
6.7.1 基本選擇器 123
6.7.2 多元素的組閤選擇器 124
6.7.3 屬性選擇器 124
6.7.4 結構性僞類選擇器 125
6.8 CSS3屬性 129
6.8.1 使用CSS3屬性前的準備 130
6.8.2 邊框屬性 130
6.8.3 背景屬性 132
6.8.4 文本屬性 133
6.8.5 用戶界麵屬性 133
6.8.6 動畫屬性 134
6.8.7 多列布局屬性 134
6.8.8 漸變屬性 135
6.8.9 透明屬性 136
6.8.10 鏇轉屬性 136
6.8.11 服務器端字體屬性 136
本章小結 137
本章習題 137
第7章 CSS3屬性特效 140
7.1 新增顔色模式 140
7.2 文字 142
7.2.1 文字陰影 143
7.2.2 文字描邊 146
7.2.3 文字排版 150
7.2.4 定義省略文本的處理方式 152
7.3 自定義文字 153
7.4 彈性盒模型 156
7.5 盒模型陰影 164
7.6 倒影 167
7.7 CSS3分欄布局 173
7.7.1 列個數和列寬度 173
7.7.2 列之間的縫隙間隔寬度 175
7.7.3 分欄間隔符 176
7.8 圓角 177
7.8.1 border-radius屬性 177
7.8.2 單個圓角的設置 180
7.9 邊框 181
7.9.1 邊框圖片border-image 182
7.9.2 自適應的圓角效果 186
7.10 漸變 188
7.10.1 CSS3漸變介紹 188
7.10.2 綫性漸變 189
7.10.3 綫性漸變實例 189
7.10.4 徑嚮漸變 194
7.10.5 徑嚮漸變實例 194
7.11 CSS3背景 198
7.11.1 多背景 198
7.11.2 background-size 200
7.11.3 background-origin 202
7.11.4 background-clip 203
7.12 遮罩 204
7.13 transition過渡 206
7.14 2D變換 207
7.14.1 translate()方法 208
7.14.2 rotate()方法 209
7.14.3 scale()方法 212
7.14.4 skew()方法 213
7.15 3D變換 215
7.15.1 transform-style 216
7.15.2 perspective景深 216
7.15.3 perspective-origin景深基點 218
7.15.4 3D位移 219
7.15.5 3D鏇轉 222
7.15.6 3D縮放 223
7.15.7 3D盒子 225
7.16 animation動畫 226
7.16.1 關鍵幀keyframes 227
7.16.2 animation動畫屬性 229
本章小結 229
本章習題 230
第8章 DIV+CSS網頁標準化布局 232
8.1 DIV+CSS頁麵布局的優勢 232
8.2 “無意義”的HTML標簽<div>和<span> 233
8.3 W3C盒子模型 234
8.4 和頁麵布局有關的CSS屬性 236
8.5 盒子區塊框的定位 238
8.5.1 相對定位 238
8.5.2 絕對定位 239
8.6 使用盒子模型的浮動布局 240
8.6.1 設置浮動 240
8.6.2 行框和清理 242
8.7 DIV+CSS的兼容性問題 244
8.7.1 不同瀏覽器解釋盒子模型的差異 245
8.7.2 設置瀏覽器去遵循W3C標準 246
8.8 使用盒子模型設計頁麵布局 247
8.8.1 居中設計 247
8.8.2 設置兩列浮動的布局 248
8.8.3 設置三列浮動的布局 250
8.8.4 設置多列浮動的布局 251
8.9 DIV+CSS網站首頁布局示例 252
8.9.1 HTML文件的設計 253
8.9.2 CSS文件的設計 254
本章小結 256
本章習題 256
第9章 響應式布局 259
9.1 響應式布局的優缺點 259
9.2 如何設計響應式布局 260
9.3 響應式布局實例 261
9.4 Media Queries模塊的使用方法 263
9.4.1 語法結構及用法 264
9.4.2 可用的設備類型 265
9.4.3 可用的設備特性參數 266
9.5 在移動設備上設置原始大小顯示 268
9.6 響應式網站的內容設計 268
9.6.1 響應式圖片顯示內容設計 269
9.6.2 響應式文字顯示內容設計 269
9.7 響應式網站的設計流程 270
本章小結 271
本章習題 272
第10章 認識和使用Sass 273
10.1 初識Sass 273
10.1.1 Sass是什麼 274
10.1.2 Sass的作用 274
10.1.3 Sass的安裝 277
10.1.4 Sass的使用和編譯 279
10.2 Sass基本語法與使用實例 283
10.2.1 Sass基本語法 283
10.2.2 Sass使用實例 288
本章小結 292
本章習題 292
第11章 柵格布局 294
11.1 柵格 294
11.2 盒子模型 296
11.3 柵格實例 297
11.4 Bootstrap框架 298
11.4.1 Bootstrap現狀 299
11.4.2 柵格係統 299
本章小結 313
本章習題 313
第12章 Bootstrap的快速入門 315
12.1 Bootstrap的內容概述與整體理解 315
12.1.1 全局CSS樣式 316
12.1.2 組件 317
12.1.3 JavaScript插件 319
12.2 Bootstrap搭建環境 320
12.3 Bootstrap全局CSS樣式 321
12.3.1 全局CSS樣式的柵格係統和響應式布局 322
12.3.2 全局CSS樣式的錶單 324
12.4 Bootstrap組件 324
12.5 Bootstrap的JavaScript插件 326
本章小結 328
本章習題 328
第13章 Bootstrap的實戰 330
13.1 實戰概述 330
13.2 實戰需求 330
13.3 實戰準備 333
13.3.1 Sass配置 334
13.3.2 HTML的基本模塊 335
13.4 頂部工具欄 336
13.4.1 Bootstrap的字體圖標組件 336
13.4.2 Bootstrap的下拉菜單組件 337
13.4.3 Bootstrap的輸入框組組件 339
13.4.4 Bootstrap的導航組件 341
13.4.5 頂部工具欄PC端內容填充 342
13.4.6 頂部工具欄PC端樣式優化 345
13.4.7 實戰頂部工具欄移動端 352
13.5 頁麵導航條 353
13.5.1 Bootstrap的導航條組件 354
13.5.2 實戰頁麵導航條――內容填充 356
13.5.3 實戰頁麵導航條――樣式優化 358
13.6 banner區 360
13.6.1 Bootstrap的JavaScript輪播圖插件 360
13.6.2 實戰banner區 362
13.7 推薦位 364
13.7.1 Bootstrap的縮略圖組件 364
13.7.2 Bootstrap的麵闆組件 365
13.7.3 實戰第一種風格的推薦位――內容填充 366
13.7.4 實戰第一種風格的推薦位――樣式優化 369
13.7.5 實戰第二種風格的推薦位――內容填充 372
13.7.6 實戰第二種風格的推薦位――樣式優化 375
13.8 腳部 379
13.9 用戶登錄 380
13.9.1 Bootstrap的錶單全局CSS樣式 380
13.9.2 Bootstrap的模態框JavaScript插件 382
13.9.3 實戰用戶登錄 384
本章小結 386
本章習題 387
附錄A 388
前言/序言
隨著HTML5標準化逐漸成熟,以及互聯網的飛速發展和移動端的應用不斷創新,再加上微信公眾號、小程序的應用飆升,原生APP嚮Web APP和混閤APP的轉變,用戶對視覺效果和操作體驗的要求越來越高,HTML5成為移動互聯網的主要技術,也是目前的主流技術之一。HTML5是超文本標記語言(HTML)的第5次修訂,是近年來Web標準的巨大飛躍。Web是一個內涵極為豐富的平颱,和以前版本不同的是,HTML5並非僅僅用來錶示Web內容,在這個平颱上還能非常方便地加入視頻、音頻、圖像、動畫,以及與計算機的交互。HTML5的意義在於它帶來瞭一個無縫的網絡,無論是PC、平闆電腦,還是智能手機,都能非常方便地瀏覽基於HTML5的各類網站。對用戶來說,手機上的APP會越來越少,用HTML5實現的一些應用不需要下載安裝,就能立即在手機界麵中生成一個APP圖標,使用手機中的瀏覽器來運行,新增的導航標簽也能更好地幫助小屏幕設備和視力障礙人士使用。HTML5擁有服務器推送技術,給用戶帶來瞭更便捷的實時聊天功能和更快的網遊體驗。
HTML5對於開發者來說更是福音。HTML5本身是由W3C推薦的,也就意味著每一個瀏覽器或每一個平颱都可以實現,這樣可以節省開發者花在瀏覽器頁麵展現兼容性上的時
細說網頁製作 下載 mobi epub pdf txt 電子書 格式