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

第1 章　走進(jìn)互聯(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)勢(shì)……… 5
1.3 瀏覽器的故事………………………… 6
1.3.1 瀏覽器簡(jiǎn)史………………………… 6
1.3.2 當(dāng)前主流瀏覽器與版本…………… 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 知識(shí)拓展……………………………… 11
1.6.1 Atom 編輯器的安裝與使用… …… 11
1.6.2 一些有用的編輯器插件和配置…… 15
第2 章　初探HTML… ……………… 16
2.1 HTML 概述… ………………………… 16
2.1.1 HTML 簡(jiǎn)介… ……………………… 16
2.1.2 HTML 發(fā)展史… …………………… 17
2.1.3 HTML 的“遠(yuǎn)房表弟”——XML 和
XHTML……………………………… 17
2.2 HTML 文件結(jié)構(gòu)… …………………… 18
2.2.1 文檔類型聲明……………………… 18
2.2.2 文件頭head………………………… 19
2.2.3 文件實(shí)體body……………………… 20
2.3 HTML 基本語(yǔ)法… …………………… 20
2.3.1 HTML 元素… ……………………… 20
2.3.2 HTML 屬性… ……………………… 22
2.3.3 注釋語(yǔ)法…………………………… 24
2.3.4 HTML 中的字符實(shí)體… …………… 26
2.4 塊級(jí)元素與行內(nèi)元素………………… 27
2.5 頭部head 元素… …………………… 29
2.5.1 網(wǎng)頁(yè)標(biāo)題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 頁(yè)面… …34
2.7 小結(jié)…………………………………… 39
2.8 知識(shí)拓展……………………………… 40
第3 章　文本與排版………………… 42
3.1 分區(qū)div… …………………………… 42
3.2 標(biāo)題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 上標(biāo)sup 和下標(biāo)sub… …………… 54
3.7.5 行內(nèi)容器span……………………… 55
3.8 預(yù)定義格式文本pre… ……………… 56
3.9 小結(jié)…………………………………… 57
3.10 知識(shí)拓展… ………………………… 57
第4 章　用圖片豐富頁(yè)面…………… 62
4.1 使用圖片img… ……………………… 62
4.2 圖片的分類與應(yīng)用…………………… 66
4.3 小結(jié)…………………………………… 67
4.4 知識(shí)拓展……………………………… 68
第5 章　超鏈接……………………… 72
5.1 鏈接的基本使用……………………… 72
5.1.1 鏈接簡(jiǎn)介與屬性…………………… 72
5.1.2 定義目標(biāo)文檔與當(dāng)前文檔關(guān)系…… 73
5.1.3 定義鏈接的打開方式……………… 73
5.1.4 定義下載的文件名………………… 74
5.2 圖片與模塊鏈接……………………… 75
5.3 錨點(diǎn)鏈接……………………………… 78
5.4 郵件與電話…………………………… 80
5.4.1 發(fā)送郵件…………………………… 80
5.4.2 撥打電話…………………………… 81
5.5 鏈接中的JavaScript… ……………… 82
5.6 小結(jié)…………………………………… 83
5.7 知識(shí)拓展……………………………… 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 知識(shí)拓展……………………………… 98
第7 章　列表………………………… 102
7.1 無(wú)序列表ul………………………… 102
7.1.1 無(wú)序列表簡(jiǎn)介…………………… 102
7.1.2 無(wú)序列表樣式…………………… 103
7.2 有序列表ol………………………… 105
7.2.1 有序列表簡(jiǎn)介…………………… 105
7.2.2 有序列表樣式…………………… 106
7.3 定義列表dl………………………… 111
7.4 小結(jié)………………………………… 111
第8 章　表單………………………… 112
8.1 表單form 概述… ………………… 112
8.1.1 表單form 簡(jiǎn)介…………………… 112
8.1.2 表單的處理地址action… ……… 114
8.1.3 表單的請(qǐng)求方法method………… 115
8.1.4 文本自動(dòng)補(bǔ)全autocomplete… … 117
8.1.5 表單驗(yàn)證novalidate……………… 117
8.1.6 表單數(shù)據(jù)格式enctype…………… 118
8.2 表單控件input… ………………… 120
8.2.1 表單控件簡(jiǎn)介…………………… 120
8.2.2 表單控件的類型………………… 121
8.2.3 表單控件的名稱………………… 121
8.2.4 無(wú)效的表單控件………………… 122
8.2.5 只讀的表單控件………………… 123
8.2.6 表單控件的初始值……………… 124