本書詳細(xì)講解了HTML 和CSS 兩大前端技術(shù)的基本理論知識、使用方法(包括許多實(shí)用技巧) 以及它們的綜合應(yīng)用,每章都配置了大量的實(shí)用案例,圖文并茂,效果直觀。本書語言簡潔明快、通俗易懂,不管是初學(xué)者還是具有一定基礎(chǔ)的讀者,都能從中得到很大的收獲。
本書共14 章,第1 章主要講解了前端開發(fā)涉及的相關(guān)概念、所需工具和軟件以及HTML 頁面的基本結(jié)構(gòu);第2~4 章主要講解了CSS 語法、選擇器、CSS 應(yīng)用到HTML 頁面的常用方式、CSS 的沖突與解決、CSS 字體屬性、CSS 文本屬性、CSS 背景屬性、盒子模型的組成、盒子邊框設(shè)置、盒子內(nèi)邊距以及外邊距設(shè)置;第5~10 章主要講解了常用的文本標(biāo)簽、HTML5 文檔結(jié)構(gòu)標(biāo)簽、常用多媒體標(biāo)簽、頁面元素所具有的類型以及類型之間的相互轉(zhuǎn)換、使用CSS reset 標(biāo)簽樣式、使用 標(biāo)簽在網(wǎng)頁中插入圖片、列表標(biāo)簽的應(yīng)用、使用 標(biāo)簽創(chuàng)建超鏈接、使用標(biāo)簽設(shè)置鏈接基準(zhǔn)URL、表格相關(guān)標(biāo)簽、CSS 表格屬性、使用CSS 格式化表格以及表格的綜合應(yīng)用、表單相關(guān)標(biāo)簽的使用、表單元素的disabled 和readonly 屬性、表單新增屬性、表單元素的默認(rèn)樣式及重置、表單美化等內(nèi)容;第11~12 章主要講解了標(biāo)準(zhǔn)流排版、浮動排版和定位排版;第13 章主要講解了幾種經(jīng)典的布局版式,以及常見布局版式布局網(wǎng)頁的應(yīng)用;第14 章主要講解了綜合應(yīng)用HTML 和CSS 開發(fā)一個靜態(tài)網(wǎng)站的相關(guān)內(nèi)容,包括網(wǎng)站前期規(guī)劃、網(wǎng)頁制作、網(wǎng)站建設(shè)技巧等內(nèi)容。
本書為前端開發(fā)初學(xué)者而編寫,也可作為各類院校及培訓(xùn)學(xué)校計算機(jī)及相關(guān)專業(yè)的教材,還可供從事前端開發(fā)工作的相關(guān)人員參考。
從2010年開始,妙味課堂堅持做前端開發(fā)培訓(xùn),得到了數(shù)萬名學(xué)員的認(rèn)可!肚岸薍TML+CSS修煉之道》這本書完全根據(jù)妙味課堂的培訓(xùn)大綱改編而成,內(nèi)容強(qiáng)調(diào)實(shí)用和實(shí)戰(zhàn),購買圖書后,可以激活妙味課堂的在線視頻課程,可以參加妙味舉辦的直播公開課,不斷學(xué)習(xí)前端新技術(shù),也可以到妙味交流社區(qū),和眾多的前端開發(fā)學(xué)習(xí)者一起交流互動,幫助你解決學(xué)習(xí)中遇到的困難,購買圖書后,還可下載“聊聊瀏覽器兼容性問題的那點(diǎn)事兒”實(shí)用電子文檔。我們樂于分享,只為讓你扎扎實(shí)實(shí)做出好前端!
2010年,妙味課堂開始從事前端開發(fā)技術(shù)培訓(xùn),致力于為前端開發(fā)學(xué)習(xí)者提供快樂的學(xué)習(xí)方法,目前已成為國內(nèi)資深的前端開發(fā)培訓(xùn)機(jī)構(gòu)。
第1章 探本溯源,前端開發(fā)基礎(chǔ)漫談
1.1 前端開發(fā)是做什么的 2
1.2 前端開發(fā)技術(shù) 5
1.2.1 HTML 超文本標(biāo)記語言:搭建網(wǎng)頁“結(jié)構(gòu)” 5
1.2.2 CSS 層疊樣式表:給網(wǎng)頁添加“樣式” 6
1.2.3 JavaScript:讓網(wǎng)頁響應(yīng)某種“行為” 6
1.3 前端開發(fā)所需軟件 7
1.3.1 Photoshop 8
1.3.2 編輯器 11
1.3.3 瀏覽器 12
1.4 第一個HTML 頁面 12
1.4.1 基本標(biāo)記標(biāo)簽 13
1.4.2 標(biāo)簽嵌套關(guān)系 19
1.5
標(biāo)簽簡介 19
練習(xí)題 20
第2章 CSS基礎(chǔ)語法、選擇器和樣式?jīng)_突的解決方案
2.1 CSS 概述 22
2.2 定義CSS 的基本語法 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頁面的常用方式 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)頁排版利器: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 水平對齊屬性: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 背景圖片滾動屬性: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)簽是語義化的
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 < time> 標(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 < article> 標(biāo)簽 128
5.2.3 標(biāo)簽 129
5.2.4 < main> 標(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 塊級元素 139
6.2.2 inline 行內(nèi)元素 140
6.2.3 inline-block 行內(nèi)塊元素 142
6.2.4 使用display 屬性改變元素類型 144
6.3 使用CSS reset 標(biāo)簽樣式 147
練習(xí)題 148
第7章 為網(wǎng)頁配上精美圖片、讓列表清晰傳達(dá)具象內(nèi)容
7.1 使用 標(biāo)簽在網(wǎng)頁中插入圖片 150
7.1.1 網(wǎng)頁常用圖片格式 150
7.1.2 插入圖片的基本語法 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)建無序列表 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)建鏈接的基本語法 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)簽