前端HTML+CSS修煉之道（視頻同步+直播）

第1章　探本溯源，前端開(kāi)發(fā)基礎(chǔ)漫談
1．1　前端開(kāi)發(fā)是做什么的　2
1．2　前端開(kāi)發(fā)技術(shù)　5
1．2．1　HTML 超文本標(biāo)記語(yǔ)言：搭建網(wǎng)頁(yè)“結(jié)構(gòu)”　5
1．2．2　CSS 層疊樣式表：給網(wǎng)頁(yè)添加“樣式”　6
1．2．3　JavaScript：讓網(wǎng)頁(yè)響應(yīng)某種“行為”　6
1．3　前端開(kāi)發(fā)所需軟件　7
1．3．1　Photoshop　8
1．3．2　編輯器　11
1．3．3　瀏覽器　12
1．4　第一個(gè)HTML 頁(yè)面　12
1．4．1　基本標(biāo)記標(biāo)簽　13
1．4．2　標(biāo)簽嵌套關(guān)系　19
1．5　
標(biāo)簽簡(jiǎn)介　19
練習(xí)題　20
第2章　CSS基礎(chǔ)語(yǔ)法、選擇器和樣式?jīng)_突的解決方案
2．1　CSS 概述　22
2．2　定義CSS 的基本語(yǔ)法　23
2．3　基本選擇器　25
2．3．1　元素選擇器　25
2．3．2　ID 選擇器　26
2．3．3　類選擇器　29
2．3．4　偽類選擇器　33
2．3．5　偽元素選擇器　35
2．3．6　通用選擇器　38
2．4　復(fù)合選擇器　39
2．4．1　交集選擇器　39
2．4．2　并集選擇器　40
2．4．3　后代選擇器　41
2．4．4　子元素選擇器　43
2．4．5　相鄰兄弟選擇器　44
2．4．6　屬性選擇器　45
2．5　CSS 選擇器的使用方法　47
2．6　CSS 應(yīng)用到HTML頁(yè)面的常用方式　47
2．6．1　行內(nèi)式　47
2．6．2　內(nèi)嵌式　48
2．6．3　鏈接式　49
2．7　CSS 的沖突與解決　50
練習(xí)題　53
第3章　網(wǎng)頁(yè)排版利器：CSS字體、文本、背景屬性設(shè)置
3．1　字體屬性　55
3．1．1　字體粗細(xì)屬性：font-weight　55
3．1．2　字體風(fēng)格屬性：font-style　56
3．1．3　字體大小屬性：font-size　58
3．1．4　字體族屬性：font-family　59
3．1．5　文本行高屬性：line-height　62
3．1．6　字體屬性：font　65
3．2　文本屬性　66
3．2．1　顏色屬性：color　66
3．2．2　水平對(duì)齊屬性：text-align　69
3．2．3　首行縮進(jìn)屬性：text-indent　70
3．2．4　文本修飾屬性：text-decoration　71
3．2．5　字符間距屬性：letter-spacing　73
3．2．6　字間距屬性：word-spacing　74
3．3　背景屬性　75
3．3．1　背景顏色屬性：background-color　75
3．3．2　背景圖片屬性：background-image　76
3．3．3　背景圖片重復(fù)屬性：background-repeat　77
3．3．4　背景圖片位置屬性：background-position　79
3．3．5　背景圖片滾動(dòng)屬性：background-attachment　81
3．3．6　背景屬性：background　83
練習(xí)題　84
第4章　剖析“盒模型”特性，詳解布局方寸間的邏輯關(guān)系
4．1　盒子模型的組成　86
4．2　盒子邊框（border）設(shè)置　88
4．2．1　設(shè)置邊框風(fēng)格　88
4．2．2　設(shè)置邊框?qū)挾取?0
4．2．3　設(shè)置邊框顏色　93
4．2．4　統(tǒng)一設(shè)置邊框的寬度、顏色和風(fēng)格　95
4．2．5　邊框的形狀　98
4．3　盒子內(nèi)邊距（padding）設(shè)置　100
4．3．1　內(nèi)邊距的設(shè)置　100
4．3．2　padding 內(nèi)邊距的特點(diǎn)　103
4．4　盒子外邊距（margin）設(shè)置　105
4．4．1　外邊距的設(shè)置　105
4．4．2　盒子外邊距合并　107
4．4．3　相鄰盒子之間的水平間距　113
練習(xí)題　116
第5章　世界是多樣化的，標(biāo)簽是語(yǔ)義化的
5．1　常用文本標(biāo)簽　118
5．1．1　段落與換行標(biāo)簽　118
5．1．2　標(biāo)題字標(biāo)簽　119
5．1．3　 標(biāo)簽　121
5．1．4　 標(biāo)簽　122
5．1．5　標(biāo)簽　122
5．1．6　 標(biāo)簽　123
5．1．7　 標(biāo)簽　124
5．1．8　空格和特殊字符的輸入　124
5．2　文檔結(jié)構(gòu)標(biāo)簽　126
5．2．1　
標(biāo)簽　127
5．2．2　 標(biāo)簽　128
5．2．3　標(biāo)簽　129
5．2．4　 標(biāo)簽　130
5．2．5　標(biāo)簽　130
5．2．6　標(biāo)簽　131
5．2．7　標(biāo)簽　131
練習(xí)題　132
第6章　探究多媒體標(biāo)簽，揭秘各種元素類型
6．1　多媒體標(biāo)簽　134
6．1．1　標(biāo)簽　134
6．1．2　標(biāo)簽　136
6．1．3　標(biāo)簽　137
6．1．4　標(biāo)簽　138
6．2　元素類型　139
6．2．1　block 塊級(jí)元素　139
6．2．2　inline 行內(nèi)元素　140
6．2．3　inline-block 行內(nèi)塊元素　142
6．2．4　使用display 屬性改變?cè)仡愋汀?44
6．3　使用CSS reset 標(biāo)簽樣式　147
練習(xí)題　148
第7章　為網(wǎng)頁(yè)配上精美圖片、讓列表清晰傳達(dá)具象內(nèi)容
7．1　使用 標(biāo)簽在網(wǎng)頁(yè)中插入圖片　150
7．1．1　網(wǎng)頁(yè)常用圖片格式　150
7．1．2　插入圖片的基本語(yǔ)法　150
7．1．3　設(shè)置圖片提示信息和替換
信息　152
7．1．4　使用標(biāo)簽屬性設(shè)置圖片大小　153
7．1．5　使用CSS 設(shè)置圖片樣式　154
7．2　使用列表標(biāo)簽創(chuàng)建列表　156
7．2．1　創(chuàng)建有序列表　156
7．2．2　創(chuàng)建無(wú)序列表　159
7．2．3　創(chuàng)建定義列表　161
7．2．4　創(chuàng)建嵌套列表　162
7．2．5　使用CSS 列表屬性設(shè)置列表樣式　163
7．2．6　使用列表和列表屬性創(chuàng)建縱向菜單　164
7．2．7　使用列表和display：inline創(chuàng)建橫向菜單　166
7．2．8　使用列表和display：inline-block實(shí)現(xiàn)圖文橫排　167
練習(xí)題　169
第8章　使用超鏈接構(gòu)建信息間的連接關(guān)系
8．1　使用標(biāo)簽創(chuàng)建鏈接　171
8．1．1　創(chuàng)建鏈接的基本語(yǔ)法　171
8．1．2　設(shè)置鏈接目標(biāo)窗口　172
8．1．3　鏈接路徑的設(shè)置　173
8．2　使用標(biāo)簽設(shè)置鏈接基準(zhǔn)URL　176
8．3　鏈接的類型　178
8．4　使用偽類設(shè)置鏈接樣式　185
8．5　鏈接與內(nèi)聯(lián)框架　187
8．5．1　內(nèi)聯(lián)框架標(biāo)簽　187<br/>8．5．2　修改內(nèi)聯(lián)框架默認(rèn)樣式　188<br/>8．5．3　使用內(nèi)聯(lián)框架作為鏈接的目標(biāo)窗口　188<br/>8．5．4　使用內(nèi)聯(lián)框架的優(yōu)缺點(diǎn)　189<br/>練習(xí)題　190<br/>第9章　呈現(xiàn)數(shù)據(jù)的利器：網(wǎng)頁(yè)表格<br/>9．1　表格概述　192<br/>9．2　表格標(biāo)簽　194<br/>9．2．1　<table>標(biāo)簽　194<br/>9．2．2　<tbody><tr>標(biāo)簽　195<br/>9．2．3　<td>和</td><th>標(biāo)簽　195<br/>9．2．4　</th></tr></tbody><caption>標(biāo)簽　195<br/>9．2．5　</caption><thead>、</thead><tbody>和</tbody><tfoot>標(biāo)簽　196<br/>9．2．6　使用colspan屬性實(shí)現(xiàn)單元格跨列合并　197<br/>9．2．7　使用rowspan屬性實(shí)現(xiàn)跨行操作　199<br/>9．2．8　使用表格標(biāo)簽屬性格式化表格　200<br/>9．3　CSS 表格屬性　202<br/>9．4　使用CSS 格式化表格　204<br/>9．5　表格各元素的display 屬性值　206<br/>9．6　表格綜合案例　206<br/>練習(xí)題　210<br/>第10章　構(gòu)建在控件之上的數(shù)據(jù)交互方案：網(wǎng)頁(yè)表單<br/>10．1　表單概述　212<br/>10．2　<form>標(biāo)簽　212<br/>10．3　input 表單控件　213<br/>10．3．1　input 表單控件概述　213<br/>10．3．2　文本框　214<br/>10．3．3　密碼框　215<br/>10．3．4　隱藏域　215<br/>10．3．5　文件域　216<br/>10．3．6　單選框和復(fù)選框　217<br/>10．3．7　提交按鈕　218<br/>10．3．8　普通按鈕　219<br/>10．3．9　重置按鈕　220<br/>10．3．10　圖像按鈕　220<br/>10．3．11　button 元素按鈕　222<br/>10．4　label 標(biāo)簽　223<br/>10．5　選擇列表　224<br/>10．6　多行文本域　227<br/>10．7　表單元素的disabled和readonly 屬性　228<br/>10．8　表單新增屬性　230<br/>10．8．1　form 屬性　230<br/>10．8．2　formaction 屬性　231<br/>10．8．3　autofocus 屬性　231<br/>10．8．4　pattern 屬性　232<br/>10．8．5　placeholder 屬性　233<br/>10．8．6　required 屬性　234<br/>10．9　元素輪廓（outline）　235<br/>10．10　表單元素的默認(rèn)樣式及重置　237<br/>10．11　表單美化　238<br/>10．11．1　單行文本框控件的美化　238<br/>10．11．2　按鈕控件的美化　239<br/>10．11．3　單選框/復(fù)選框控件的美化　240<br/>10．11．4　上傳文件控件美化　242<br/>10．11．5　下拉列表控件美化　244<br/>10．12　表單的元素類型　245<br/>練習(xí)題　245<br/>第11章　玩轉(zhuǎn)文檔排版的犀利武器：浮動(dòng)<br/>11．1　標(biāo)準(zhǔn)流排版　247<br/>11．2　浮動(dòng)排版　248<br/>11．2．1　浮動(dòng)設(shè)置　249<br/>11．2．2　浮動(dòng)元素的表現(xiàn)及特征　249<br/>11．2．3　浮動(dòng)清除　260<br/>11．2．4　使用空div 清除浮動(dòng)解決父元素高度塌陷問(wèn)題　264<br/>11．2．5　使用偽元素清除浮動(dòng)解決父元素高度塌陷問(wèn)題　265<br/>11．2．6　使用BFC 解決父元素高度塌陷問(wèn)題　269<br/>11．2．7　使用overflow 屬性解決父元素高度塌陷問(wèn)題　272<br/>11．2．8　使用BFC 防止浮動(dòng)元素覆蓋文檔流元素　274<br/>練習(xí)題　276<br/>第12章　平面之上的疊加藝術(shù)：定位<br/>12．1　定位排版屬性position　278<br/>12．1．1　靜態(tài)定位　278<br/>12．1．2　相對(duì)定位　278<br/>12．1．3　絕對(duì)定位　281<br/>12．1．4　固定定位　289<br/>12．2　定位層級(jí)　295<br/>12．3　定位相關(guān)知識(shí)　299<br/>12．3．1　全屏的div 設(shè)置　299<br/>12．3．2　透明度/ 透明濾鏡　300<br/>12．3．3　margin 負(fù)值　304<br/>12．3．4　元素的絕對(duì)居中　312<br/>練習(xí)題　313<br/>第13章　值得反復(fù)推敲的經(jīng)典布局方案<br/>13．1　常見(jiàn)網(wǎng)頁(yè)布局版式　315<br/>13．1．1　上中下一欄版式　315<br/>13．1．2　左右兩欄版式　316<br/>13．1．3　左右兩欄+頁(yè)眉+頁(yè)腳版式　318<br/>13．1．4　左右寬度固定且中間自適應(yīng)的左中右三欄版式　320<br/>13．1．5　左右寬度固定、中間自適應(yīng)的左中右三欄+頁(yè)眉+頁(yè)腳版式　322<br/>13．2　使用常見(jiàn)布局版式布局網(wǎng)頁(yè)案例　324<br/>13．2．1　使用左右兩欄+頁(yè)眉+頁(yè)腳版式布局頁(yè)面　324<br/>13．2．2　使用左中右三欄+頁(yè)眉+頁(yè)腳版式布局頁(yè)面　325<br/>練習(xí)題　329<br/>第14章　技術(shù)的世界只崇拜實(shí)干者：整站靜態(tài)頁(yè)面開(kāi)發(fā)<br/>14．1　網(wǎng)站前期規(guī)劃　331<br/>14．1．1　網(wǎng)站目錄劃分　331<br/>14．1．2　網(wǎng)站文件夾、文件的命名　332<br/>14．1．3　網(wǎng)站整體規(guī)劃　335<br/>14．2　網(wǎng)站首頁(yè)制作　336<br/>14．2．1　網(wǎng)站首頁(yè)結(jié)構(gòu)　336<br/>14．2．2　網(wǎng)站首頁(yè)之頭部&banner版塊的制作　336<br/>14．2．3　以圖換字　338<br/>14．2．4　滑動(dòng)門　341<br/>14．2．5　CSS 精靈圖　344<br/>14．2．6　網(wǎng)站首頁(yè)之課程介紹版塊的制作　346<br/>14．2．7　文字陰影text-shadow　348<br/>14．2．8　盒陰影box-shadow　350<br/>14．2．9　圓角border-radius　353<br/>14．2．10　網(wǎng)站首頁(yè)之學(xué)員作品展示版塊的制作　357<br/>14．2．11　網(wǎng)站首頁(yè)之講師介紹版塊的制作　357<br/>14．2．12　網(wǎng)站首頁(yè)之妙味服務(wù)版塊的制作　358<br/>14．2．13　網(wǎng)站首頁(yè)之頁(yè)腳版塊的制作　359<br/>14．3　網(wǎng)站其他頁(yè)面的制作　359<br/>14．4　網(wǎng)站優(yōu)化　360<br/>14．5　網(wǎng)站建設(shè)技巧　362<br/>14．5．1　最小寬度/最小高度　362<br/>14．5．2　最大寬度/最大高度　363<br/>14．5．3　text-overflow文本溢出　364<br/>練習(xí)題　364</form></tfoot></table>