零基礎(chǔ)HTML+CSS從入門到精通

第1 章　走進互聯(lián)網(wǎng)前端……………… 1
1.1 淺談互聯(lián)網(wǎng)前端……………………… 1
1.1.1 互聯(lián)網(wǎng)的前世與今生……………… 1
1.1.2 什么是Web 前端工程師…………… 2
1.1.3 Web 前端的發(fā)展現(xiàn)狀……………… 3
1.2 為什么要學(xué)習(xí)HTML5 和CSS3… … 4
1.2.1 “前端三劍客”——HTML、CSS、
JavaScript…………………………… 4
1.2.2 學(xué)習(xí)HTML5 和CSS3 的優(yōu)勢……… 5
1.3 瀏覽器的故事………………………… 6
1.3.1 瀏覽器簡史………………………… 6
1.3.2 當前主流瀏覽器與版本…………… 6
1.4 如何上手HTML5 與CSS3 開發(fā)… … 8
1.4.1 如何選擇編輯器…………………… 8
1.4.2 前端學(xué)習(xí)技巧……………………… 9
1.4.3 前端技術(shù)社區(qū)……………………… 10
1.5 小結(jié)…………………………………… 10
1.6 知識拓展……………………………… 11
1.6.1 Atom 編輯器的安裝與使用… …… 11
1.6.2 一些有用的編輯器插件和配置…… 15
第2 章　初探HTML… ……………… 16
2.1 HTML 概述… ………………………… 16
2.1.1 HTML 簡介… ……………………… 16
2.1.2 HTML 發(fā)展史… …………………… 17
2.1.3 HTML 的“遠房表弟”——XML 和
XHTML……………………………… 17
2.2 HTML 文件結(jié)構(gòu)… …………………… 18
2.2.1 文檔類型聲明……………………… 18
2.2.2 文件頭head………………………… 19
2.2.3 文件實體body……………………… 20
2.3 HTML 基本語法… …………………… 20
2.3.1 HTML 元素… ……………………… 20
2.3.2 HTML 屬性… ……………………… 22
2.3.3 注釋語法…………………………… 24
2.3.4 HTML 中的字符實體… …………… 26
2.4 塊級元素與行內(nèi)元素………………… 27
2.5 頭部head 元素… …………………… 29
2.5.1 網(wǎng)頁標題title… …………………… 30
2.5.2 外部鏈接link… …………………… 30
2.5.3 元數(shù)據(jù)meta………………………… 32
2.5.4 內(nèi)部樣式style……………………… 33
2.5.5 腳本script… ……………………… 33
2.6 用iframe 元素嵌套HTML 頁面… …34
2.7 小結(jié)…………………………………… 39
2.8 知識拓展……………………………… 40
第3 章　文本與排版………………… 42
3.1 分區(qū)div… …………………………… 42
3.2 標題h1~h6…………………………… 44
3.3 段落p… ……………………………… 46
3.4 換行br………………………………… 47
3.5 水平線hr……………………………… 49
3.6 引用內(nèi)容blockquote………………… 50
3.7 特殊字體……………………………… 51
3.7.1 字體加粗b… ……………………… 51
3.7.2 斜體字i… ………………………… 52
3.7.3 刪除線del… ……………………… 53
3.7.4 上標sup 和下標sub… …………… 54
3.7.5 行內(nèi)容器span……………………… 55
3.8 預(yù)定義格式文本pre… ……………… 56
3.9 小結(jié)…………………………………… 57
3.10 知識拓展… ………………………… 57
第4 章　用圖片豐富頁面…………… 62
4.1 使用圖片img… ……………………… 62
4.2 圖片的分類與應(yīng)用…………………… 66
4.3 小結(jié)…………………………………… 67
4.4 知識拓展……………………………… 68
第5 章　超鏈接……………………… 72
5.1 鏈接的基本使用……………………… 72
5.1.1 鏈接簡介與屬性…………………… 72
5.1.2 定義目標文檔與當前文檔關(guān)系…… 73
5.1.3 定義鏈接的打開方式……………… 73
5.1.4 定義下載的文件名………………… 74
5.2 圖片與模塊鏈接……………………… 75
5.3 錨點鏈接……………………………… 78
5.4 郵件與電話…………………………… 80
5.4.1 發(fā)送郵件…………………………… 80
5.4.2 撥打電話…………………………… 81
5.5 鏈接中的JavaScript… ……………… 82
5.6 小結(jié)…………………………………… 83
5.7 知識拓展……………………………… 83
5.7.1 URL 定義…………………………… 83
5.7.2 URL 編碼…………………………… 84
第6 章　表格………………………… 86
6.1 表格的結(jié)構(gòu)…………………………… 86
6.1.1 基本表格…………………………… 86
6.1.2 使用表頭…………………………… 88
6.1.3 復(fù)雜版表格………………………… 89
6.2 表格的樣式…………………………… 93
6.3 單元格合并…………………………… 95
6.4 小結(jié)…………………………………… 98
6.5 知識拓展……………………………… 98
第7 章　列表………………………… 102
7.1 無序列表ul………………………… 102
7.1.1 無序列表簡介…………………… 102
7.1.2 無序列表樣式…………………… 103
7.2 有序列表ol………………………… 105
7.2.1 有序列表簡介…………………… 105
7.2.2 有序列表樣式…………………… 106
7.3 定義列表dl………………………… 111
7.4 小結(jié)………………………………… 111
第8 章　表單………………………… 112
8.1 表單form 概述… ………………… 112
8.1.1 表單form 簡介…………………… 112
8.1.2 表單的處理地址action… ……… 114
8.1.3 表單的請求方法method………… 115
8.1.4 文本自動補全autocomplete… … 117
8.1.5 表單驗證novalidate……………… 117
8.1.6 表單數(shù)據(jù)格式enctype…………… 118
8.2 表單控件input… ………………… 120
8.2.1 表單控件簡介…………………… 120
8.2.2 表單控件的類型………………… 121
8.2.3 表單控件的名稱………………… 121
8.2.4 無效的表單控件………………… 122
8.2.5 只讀的表單控件………………… 123
8.2.6 表單控件的初始值……………… 124