《HTML5與CSS3基礎教程(第8版)》自第1版至今,一直是講解HTML和CSS入門知識的經典暢銷書,全面系統地闡述HTML5和CSS3基礎知識以及實際運用技術,通過大量實例深入淺出地分析了網頁制作的方方面面。最新第8版不僅介紹了文本、圖像、鏈接、列表、表格、表單等網頁元素,還介紹了如何為網頁設計布局、添加動態效果等,另外還涉及調試和發布!禜TML5與CSS3基礎教程(第8版)》提供了一個強大的配套網站,上面列出了書中的完整代碼示例以及更多優秀實例及進階參考資料,以供讀者參考學習。
通過學習《HTML5與CSS3基礎教程(第8版)》,零起點讀者即可創建網站,而中高級水平的開發人員也可以快速了解HTML5新元素、CSS3的奇幻效果、響應式Web設計以及各種最佳實踐。
全球最暢銷Web入門書最新版,熱銷100萬冊
配套網站提供海量精彩示例
逐步指導快速創建響應式網站
譯者序
HTML和CSS是萬維網的根基。幾年前,遵循Web標準之風盛行,網頁結構與表現分離成為共識,網站開發人員普遍開始采用漸進增強的最佳實踐,業內對HTML和CSS的認知度和重視度都得到了一次跨越式的提升。近年來,隨著HTML5和CSS3技術的快速發展,HTML和CSS被賦予更強的功能性,它們的地位又到了前所未有的高度。
HTML和CSS的發展與變化,主要體現在兩個方面。一是編寫代碼的方式有變化,例如,現在的智能手機普遍采用像素密度極高的Retina顯示屏,如果還用過去的方式在網頁中插入圖像,這些圖像在手機上就會顯得不夠銳利和清晰,因此我們有必要改變編寫img標簽的方式(參見本書5.8節)。二是新的技術取代了傳統手段,例如,過去為了對標題等特殊文本使用不一樣的字體,產生了圖像替換文本的方法,現在,隨著Web字體技術的成熟,人們可以使用更為簡單、優雅的方式實現上述效果(參見本書第13章)。
過去的經驗告訴我們,對于Web開發初學者來說,從一開始就學習最新技術和最佳實踐,既可以節省時間,也有利于培養良好的編碼習慣(因為避免了那些過時的編碼方式和陳舊的技術手段的干擾)。
本書是HTML與CSS經典入門教程,目前已更新至第8版(第1版出版于18年前的萬維網興起之初)。跟過去的所有版本一樣,本次新版也力圖反映最新的編碼實踐與技術。相較于上一版,這一版幾乎對全書的每個章節都有更新——刪除了一些過時的做法,增加了不少新的提示與補充材料,大部分代碼示例都進行了重寫(相應的瀏覽器截圖也都做了更新)。第8版不僅增加了一些新的知識板塊(例如創建和使用為Retina顯示屏準備的圖像,通過使用可伸縮圖像、彈性布局和媒體查詢實現響應式網站等),還重新梳理了一些重點知識(例如對CSS層疊規則的講解就重新整理了特殊性、順序和重要性的關系)。
這套教程的經典之處是獨特的分步講解形式,貫穿全書的統一示例,以及通過提示和補充材料給出的豐富的擴展學習資源,因此對初學者而言,這套圖書歷來是學習效率的保證。新版不僅保留了這些經典的做法,還緊跟技術發展對內容做了全面更新,如果你是Web開發與設計的初學者,沒有理由不將此書作為唯一的HTML與CSS入門書。
最后,借此機會,感謝圖靈公司對我的信任與支持,感謝劉美英編輯,感謝她付出艱辛的努力,確保了本書按時出版。
Elizabeth Castro,享譽世界的計算機暢銷書作家,電子出版先行者,2010年就出版了epub電子書制作教程EPUB Straight to the Point。Castro 擅長使用詳實的步驟和精美的實例教大家快速實現具體效果,她的HTML與CSS系列教程自出版以來廣受讀者歡迎,成為學習前端開發的首選參考圖書。
Bruce Hyslop,自1997年就開始從事網頁開發,重點關注使用HTML、CSS和JavaScript進行網頁開發和網站易用性的維護,并倡導最佳實踐。Hyslop在加州大學洛杉磯分校進修部教授CSS課程,還著有The HTML Pocket Guide、The Web Design Pocket Guide Boxed Set。
第1章 網頁的構造塊 1
1.1 HTML思想 1
1.2 基本的HTML頁面 2
1.3 標簽:元素、屬性、值及其他 4
1.4 網頁的文本內容 7
1.5 鏈接、圖像和其他非文本內容 8
1.6 文件名和文件夾名 9
1.7 URL 10
1.8 HTML:有含義的標記 13
1.9 瀏覽器對網頁的默認顯示效果 16
1.10 要點回顧 17
第2章 處理網頁文件 19
2.1 規劃網站 19
2.2 創建新的網頁 20
2.3 保存網頁 21
2.4 指定默認頁面或主頁 24
2.5 編輯網頁 24
2.6 組織文件 25
2.7 在瀏覽器中查看網頁 26
2.8 借鑒他人靈感 28
第3章 基本HTML結構 30
3.1 開始編寫網頁 30
3.2 創建頁面標題 33
3.3 創建分級標題 34
3.4 普通頁面構成 36
3.5 創建頁眉 37
3.6 標記導航 39
3.7 標記頁面的主要區域 41
3.8 創建文章 42
3.9 定義區塊 45
3.10 指定附注欄 46
3.11 創建頁腳 50
3.12 創建通用容器 53
3.13 使用ARIA改善可訪問性 56
3.14 為元素指定類別或ID名稱 59
3.15 為元素添加title屬性 61
3.16 添加注釋 62
第4章 文本 63
4.1 添加段落 63
4.2 指定細則 64
4.3 標記重要和強調的文本 65
4.4 創建圖 67
4.5 指明引用或參考 69
4.6 引述文本 70
4.7 指定時間 72
4.8 解釋縮寫詞 75
4.9 定義術語 76
4.10 創建上標和下標 77
4.11 添加作者聯系信息 79
4.12 標注編輯和不再準確的文本 80
4.13 標記代碼 83
4.14 使用預格式化的文本 84
4.15 突出顯示文本 85
4.16 創建換行 87
4.17 創建span 88
4.18 其他元素 89
第5章 圖像 95
5.1 關于Web圖像 95
5.2 獲取圖像 99
5.3 選擇圖像編輯器 100
5.4 保存圖像 100
5.5 在頁面中插入圖像 103
5.6 提供替代文本 105
5.7 指定圖像尺寸 106
5.8 在瀏覽器中改變圖像的尺寸 108
5.9 在圖像編輯器中改變圖像的尺寸 110
5.10 為網站添加圖標 111
第6章 鏈接 113
6.1 創建指向另一個網頁的鏈接 113
6.2 創建錨并鏈接到錨 118
6.3 創建其他類型的鏈接 120
第7章 CSS構造塊 123
7.1 構造樣式規則 123
7.2 為樣式規則添加注釋 124
7.3 理解繼承 126
7.4 層疊:當規則發生沖突時 129
7.5 屬性的值 132
第8章 操作樣式表 139
8.1 創建外部樣式表 139
8.2 鏈接到外部樣式表 140
8.3 創建嵌入樣式表 142
8.4 應用內聯樣式 143
8.5 樣式的層疊和順序 145
8.6 使用與媒體相關的樣式表 147
8.7 借鑒他人的靈感 148
第9章 定義選擇器 150
9.1 構造選擇器 150
9.2 按名稱選擇元素 152
9.3 按類或ID選擇元素 153
9.4 按上下文選擇元素 156
9.5 選擇第一個或最后一個子元素 159
9.6 選擇元素的第一個字母或者第一行 161
9.7 按狀態選擇鏈接元素 163
9.8 按屬性選擇元素 164
9.9 指定元素組 168
9.10 組合使用選擇器 169
第10章 為文本添加樣式 171
10.1 本章之前與本章之后 171
10.2 選擇字體系列 173
10.3 指定替代字體 174
10.4 創建斜體 176
10.5 應用粗體格式 177
10.6 設置字體大小 179
10.7 設置行高 184
10.8 同時設置所有字體值 185
10.9 設置顏色 187
10.10 設置背景 188
10.11 控制間距 195
10.12 添加縮進 195
10.13 對齊文本 196
10.14 修改文本的大小寫 197
10.15 使用小型大寫字母 198
10.16 裝飾文本 199
10.17 設置空白屬性 201
第11章 用CSS進行布局 202
11.1 開始布局的注意事項 203
11.2 構建頁面 204
11.3 在舊版瀏覽器中為HTML5元素添加樣式 206
11.4 對默認樣式進行重置或標準化 208
11.5 盒模型 209
11.6 控制元素的顯示類型和可見性 211
11.7 設置元素的高度和寬度 214
11.8 在元素周圍添加內邊距 217
11.9 設置邊框 219
11.10 設置元素周圍的外邊距 222
11.11 使元素浮動 224
11.12 控制元素浮動的位置 226
11.13 對元素進行相對定位 230
11.14 對元素進行絕對定位 231
11.15 在棧中定位元素 232
11.16 處理溢出 233
11.17 垂直對齊元素 234
11.18 修改鼠標指針 235
第12章 構建響應式網站 237
12.1 響應式Web設計:概述 237
12.2 創建可伸縮圖像 239
12.3 創建彈性布局網格 241
12.4 理解和實現媒體查詢 245
12.5 組合使用 251
12.6 兼容舊版IE 257
第13章 使用Web字體 259
13.1 什么是Web字體 259
13.2 在哪里能找到Web字體 261
13.3 下載第一個Web字體 263
13.4 理解@font-face規則 265
13.5 使用Web字體設置文本樣式 266
13.6 為Web字體應用斜體和粗體 269
13.7 使用Google Fonts的Web字體 275
第14章 使用CSS3進行增強 278
14.1 瀏覽器兼容性、漸進增強和polyfill 278
14.2 理解廠商前綴 280
14.3 為元素創建圓角 281
14.4 為文本添加陰影 284
14.5 為其他元素添加陰影 285
14.6 應用多重背景 288
14.7 使用漸變背景 290
14.8 為元素設置不透明度 295
14.9 生成內容的效果 297
14.10 使用sprite拼合圖像 299
第15章 列表 301
15.1 創建有序列表和無序列表 301
15.2 選擇標記 304
15.3 使用定制的標記 305
15.4 選擇列表的起始編號 308
15.5 控制標記的位置 309
15.6 同時設置所有的列表樣式屬性 310
15.7 設置嵌套列表的樣式 311
15.8 創建描述列表 314
第16章 表單 318
16.1 HTML5對表單的改進 318
16.2 創建表單 320
16.3 處理表單 323
16.4 對表單元素進行組織 324
16.5 創建文本框 327
16.6 為表單組件添加說明標簽 330
16.7 創建密碼框 332
16.8 創建電子郵件框、搜索框、電話框和URL 框 332
16.9 創建單選按鈕 336
16.10 創建復選框 337
16.11 創建文本區域 338
16.12 創建選擇框 339
16.13 讓訪問者上傳文件 341
16.14 創建隱藏字段 342
16.15 創建提交按鈕 343
16.16 禁用表單元素 345
16.17 根據狀態為表單設置樣式 346
第17章 視頻、音頻和其他多媒體 349
17.1 第三方插件和步入原生 349
17.2 視頻文件格式 350
17.3 在網頁中添加單個視頻 351
17.4 為視頻添加控件和自動播放 352
17.5 為視頻指定循環播放和海報圖像 354
17.6 阻止視頻預加載 355
17.7 使用多種來源的視頻和備用文本 356
17.8 提供可訪問性 358
17.9 音頻文件格式 358
17.10 在網頁中添加帶控件的單個音頻文件 359
17.11 自動播放、循環和預加載音頻 360
17.12 提供帶備用內容的多個視頻源 361
17.13 添加具有備用Flash的視頻和音頻 362
17.14 高級多媒體 366
17.15 更多資源 366
第18章 表格 368
18.1 結構化表格 368
18.2 讓單元格跨越多列或多行 371
第19章 添加JavaScript 373
19.1 加載外部腳本 374
19.2 添加嵌入腳本 378
19.3 JavaScript事件 378
第20章 測試和調試網頁 380
20.1 驗證代碼 380
20.2 測試頁面 382
20.3 嘗試一些調試技巧 385
20.4 檢查常見錯誤:一般問題 386
20.5 檢查常見錯誤:HTML 387
20.6 檢查常見錯誤:CSS 388
20.7 如果圖像不顯示 390
第21章 發布網站 392
21.1 獲得域名 392
21.2 為網站尋找主機 393
21.3 將文件傳送至服務器 394
附錄A HTML參考 398
附錄B CSS引用 408