從2010年開始，妙味課堂堅持做前端開發培訓，得到了數萬名學員的認可。《前端HTML+CSS修煉之道》這本書完全根據妙味課堂的培訓大綱改編而成，內容強調實用和實戰，購買圖書後，可以激活妙味課堂的在線視頻課程，可以參加妙味舉辦的直播公開課，不斷學習前端新技術，也可以到妙味交流社區，和眾多的前端開發學習者一起交流互動，幫助你解決學習中遇到的困難，購買圖書後，還可下載“值得反復推敲的經典布局方案”和“聊聊瀏覽器兼容性問題的那點事兒”實用電子文檔。我們樂於分享，隻為讓你扎扎實實做出好前端！

本書詳細講解了HTML和CSS兩大前端技術的基本理論知識、使用方法（包括許多實用技巧）以及它們的綜合應用，每章都配置了大量的實用案例，圖文並茂，效果直觀。本書語言簡潔明快、通俗易懂，不管是初學者還是具有一定基礎的讀者，都能從中得到很大的收獲。
本書共13章，1章主要講解了前端開發涉及的相關概念、所需工具和軟件以及HTML頁面的基本結構；2~4章主要講解了CSS語法、選擇器、CSS應用到HTML頁面的常用方式、CSS的衝突與解決、CSS字體屬性、CSS文本屬性、CSS背景屬性、盒子模型的組成、盒子邊框設置盒子內邊距以及外邊距設置；第5~10章主要講解了常用的文本標簽、HTML5文檔結構標簽、常用多媒體標簽素所具有的類型以及類型之間的相互轉換、使用CSS reset標簽樣式、使用標簽在網頁中插入圖片、列表標簽的應用、使用標簽創建超鏈接、使用標簽設置鏈接基準URL、表格相關標簽、CSS表格屬性、使用CSS格式化表格以及表格的綜合應用、表單相關標簽的使用素的disabled和readonly屬性、表單新增屬性素的默認樣式及重置、表單美化等內容；11~12章主要講解了標準流排版、浮動排版和定位排版；13章主要講解了綜合應用HTML和CSS開發一個靜態網站的相關內容，包括網站前期規劃、網頁制作、網站建設技巧等內容。
本書為前端開發初學者而編寫，也可作為各類院校及培訓學校計算機及相關專業的教材，還可供從事前端開發工作的相關人員參考。

第1章 探本溯源，前端開發基礎漫談
1.1 前端開發是做什麼的2
1.2 前端開發技術5
1.2.1 HTML 超文本標記語言：搭建網頁“ 結構”5
1.2.2 CSS 層疊樣式表：給網頁添加“ 樣式”6
1.2.3 JavaScript：讓網頁響應某種“ 行為”6
1.3 前端開發所需軟件7
1.3.1 Photoshop8
1.3.2 編輯器11
1.3.3 瀏覽器12
1.4 第一個HTML 頁面12
1.4.1 基本標記標簽13
1.4.2 標簽嵌套關繫19
1.5 div 標簽簡介19
練習題20
第2章 CSS基礎語法、選擇器和樣式衝突的解決方案
2.1 CSS 概述22
2.2 定義CSS 的基本語法23
2.3 基本選擇器25
2.3素選擇器25
2.3.2 ID 選擇器26
2.3.3 類選擇器29
2.3.4 偽類選擇器33
2.3.素選擇器35
2.3.6 通用選擇器38
2.4 復合選擇器39
2.4.1 交集選擇器39
2.4.2 並集選擇器40
2.4.3 後代選擇器41
2.4.素選擇器43
2.4.5 相鄰兄弟選擇器44
2.4.6 屬性選擇器45
2.5 CSS 選擇器的使用方法47
2.6 CSS 應用到HTML 頁面的常用方式47
2.6.1 行內式47
2.6.2 內嵌式48
2.6.3 鏈接式49
2.7 CSS 的衝突與解決50
練習題53
第3章 網頁排版利器：CSS 字體、文本、背景屬性設置
3.1 字體屬性55
3.1.1 字體粗細屬性：font-weight55
3.1.2 字體風格屬性：font-style56
3.1.3 字體大小屬性：font-size58
3.1.4 字體族屬性：font-family59
3.1.5 文本行高屬性：line-height62
3.1.6 字體屬性：font65
3.2 文本屬性66
3.2.1 顏色屬性：color66
3.2.2 水平對齊屬性：text-align69
3.2.3 首行縮進屬性：text-indent70
3.2.4 文本修飾屬性：text-decoration71
3.2.5 字符間距屬性：letter-spacing73
3.2.6 字間距屬性：word-spacing74
3.3 背景屬性75
3.3.1 背景顏色屬性：background-color75
3.3.2 背景圖片屬性：background-image76
3.3.3 背景圖片重復屬性：backgroundrepeat77
3.3.4 背景圖片位置屬性：backgroundposition79
3.3.5 背景圖片滾動屬性：backgroundattachment81
3.3.6 背景屬性：background83
練習題84
第4章 剖析“盒模型”特性，詳解布局方寸間的邏輯關繫
4.1 盒子模型的組成86
4.2 盒子邊框（border）設置88
4.2.1 設置邊框風格88
4.2.2 設置邊框寬度90
4.2.3 設置邊框顏色93
4.2.4 統一設置邊框的寬度、顏色和風格95
4.2.5 邊框的形狀98
4.3 盒子內邊距（padding）設置100
4.3.1 內邊距的設置100
4.3.2 padding 內邊距的特點103
4.4 盒子外邊距（margin）設置105
4.4.1 外邊距的設置105
4.4.2 盒子外邊距合並107
4.4.3 相鄰盒子之間的水平間距113
練習題116
第5章 世界是多樣化的，標簽是語義化的
5.1 常用文本標簽118
5.1.1 段落與換行標簽118
5.1.2 標題字標簽119
5.1.3 strong 標簽121
5.1.4 em 標簽122
5.1.5 mark 標簽122
5.1.6 time 標簽123
5.1.7 span 標簽124
5.1.8 空格和特殊字符的輸入124
5.2 文檔結構標簽126
5.2.1 header 標簽127
5.2.2 article 標簽128
5.2.3 section 標簽129
5.2.4 main 標簽130
5.2.5 nav 標簽130
5.2.6 aside 標簽131
5.2.7 footer 標簽131
練習題132
第6章 探究多媒體標簽，揭素類型
6.1 多媒體標簽134
6.1.1 object 標簽134
6.1.2 embed 標簽136
6.1.3 video 標簽137
6.1.4 audio 標簽138
6素類型139
6.2.1 block素139
6.2.2 inline素140
6.2.3 inline-block 素142
6.2.4 使用display 屬素類型144
6.3 使用CSS reset 標簽樣式147
練習題148
第7章 為網頁配上精美圖片、讓列表清晰傳達具像內容
7.1 使用 img 標簽在網頁中插入圖片150
7.1.1 網頁常用圖片格式150
7.1.2 插入圖片的基本語法150
7.1.3 設置圖片提示信息和替換信息152
7.1.4 使用標簽屬性設置圖片大小153
7.1.5 使用CSS 設置圖片樣式154
7.2 使用列表標簽創建列表156
7.2.1 創建有序列表156
7.2.2 創建無序列表159
7.2.3 創建定義列表161
7.2.4 創建嵌套列表162
7.2.5 使用CSS 列表屬性設置列表樣式163
7.2.6 使用列表和列表屬性創建縱向菜單164
7.2.7 使用列表和display:inline 創建橫向菜單166
7.2.8 使用列表和display:inline-block實現圖文橫排167
練習題169
第8章 使用超鏈接構建信息間的連接關繫
8.1 使用 a 標簽創建鏈接171
8.1.1 創建鏈接的基本語法171
8.1.2 設置鏈接目標窗口172
8.1.3 鏈接路徑的設置173
8.2 使用 base 標簽設置鏈接基準URL176
8.3 鏈接的類型178
8.4 使用偽類設置鏈接樣式185
8.5 鏈接與內聯框架187
8.5.1 內聯框架標簽iframe187
8.5.2 修改內聯框架默認樣式188
8.5.3 使用內聯框架作為鏈接的目標窗口188
8.5.4 使用內聯框架的優缺點189
練習題190
第9章 呈現數據的利器：網頁表格
9.1 表格概述192
9.2 表格標簽194
9.2.1 table 標簽194
9.2.2 tr 標簽195
9.2.3 td 和 th 標簽195
9.2.4 caption 標簽195
9.2.5 thead、tbody 和tfoot標簽196
9.2.6 使用colspan 屬性格跨列合並197
9.2.7 使用rowspan 屬性實現跨行操作199
9.2.8 使用表格標簽屬性格式化表格200
9.3 CSS 表格屬性202
9.4 使用CSS 格式化表格204
9.5 素的display 屬性值206
9.6 表格綜合案例206
練習題210
第10章 構建在控件之上的數據交互方案：網頁表單
10.1 表單概述212
10.2 form 標簽212
10.3 input 表單控件213
10.3.1 input 表單控件概述213
10.3.2 文本框214
10.3.3 密碼框215
10.3.4 隱藏域215
10.3.5 文件域216
10.3.6 單選框和復選框217
10.3.7 提交按鈕218
10.3.8 普通按鈕219
10.3.9 重置按鈕220
10.3.10 圖像按鈕220
10.3.11 butt素按鈕222
10.4 label 標簽223
10.5 選擇列表224
10.6 多行文本域227
10.7素的disabled 和readonly屬性228
10.8 表單新增屬性230
10.8.1 form 屬性230
10.8.2 formaction 屬性231
10.8.3 autofocus 屬性231
10.8.4 pattern 屬性232
10.8.5 placeholder 屬性233
10.8.6 required 屬性234
10素輪廓（outline）235
10.10素的默認樣式及重置237
10.11 表單美化238
10.11.1 單行文本框控件的美化238
10.11.2 按鈕控件的美化239
10.11.3 單選框/ 復選框控件的美化240
10.11.4 上傳文件控件美化242
10.11.5 下拉列表控件美化244
10.12 素類型245
練習題 245
第11章 玩轉文檔排版的犀利武器：浮動
11.1 標準流排版247
11.2 浮動排版248
11.2.1 浮動設置249
11.2.2素的表現及特征249
11.2.3 浮動清除260
11.2.4 使用空div 清除浮動素高度塌陷問題264
11.2.5 素清除浮動素高度塌陷問題265
11.2.6 使用BFC 素高度塌陷問題269
11.2.7 使用overflow 屬性素高度塌陷問題272
11.2.8 使用BFC 防素覆蓋素274
練習題276
第12章 平面之上的疊加藝術：定位
12.1 定位排版屬性position278
12.1.1 靜態定位278
12.1.2 相對定位278
12.1.3 絕對定位281
12.1.4 固定定位289
12.2 定位層級295
12.3 定位相關知識299
12.3.1 全屏的div 設置299
12.3.2 透明度/ 透明濾鏡300
12.3.3 margin 負值305
12.3素的絕對居中312
練習題313
第13章 技術的世界隻崇拜實干者：整站靜態頁面開發
13.1 網站前期規劃315
13.1.1 網站目錄劃分315
13.1.2 網站文件夾、文件的命名316
13.1.3 網站整體規劃319
13.2 網站首頁制作320
13.2.1 網站首頁結構320
13.2.2 網站首頁之頭部&banner 版塊的制作320
13.2.3 以圖換字322
13.2.4 滑動門325
13.2.5 CSS 精靈圖328
13.2.6 網站首頁之課程介紹版塊的制作330
13.2.7 文字陰影text-shadow332
13.2.8 盒陰影box-shadow334
13.2.9 圓角border-radius337
13.2.10 網站首頁之學員作品展示版塊的制作341
13.2.11 網站首頁之講師介紹版塊的制作341
13.2.12 網站首頁之妙味服務版塊的制作342
13.2.13 網站首頁之頁腳版塊的制作343
13.3 網站其他頁面的制作343
13.4 網站優化344
13.5 網站建設技巧346
13.5.1 最小寬度/ 最小高度346
13.5.2 最大寬度/ 最大高度347
13.5.3 text-overflow 文本溢出348
練習題348