細說網頁製作 细说网页制作

通過本書的學習，能快速上手網站前端開發。為了使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