HTML5+CSS3網(wǎng)頁設(shè)計實例教程

目    錄
第1章  網(wǎng)頁設(shè)計新時代   1
1.1  Web網(wǎng)頁設(shè)計原則   1
1.1.1  Web標(biāo)準(zhǔn)   1
1.1.2  Web標(biāo)準(zhǔn)與瀏覽器的兼容性   3
1.1.3  可訪問性   3
1.1.4  結(jié)構(gòu)化文檔的Web   4
1.2  HTML5概述   4
1.2.1  傳統(tǒng)HTML與XHTML   4
1.2.2  HTML5是如何形成的   5
1.2.3  HTML5的設(shè)計原則   7
1.3  HTML5頁面的特征   9
1.3.1  使用HTML5結(jié)構(gòu)化元素   10
1.3.2  使用CSS3美化HTML5文檔   13
1.4  Web網(wǎng)頁設(shè)計基礎(chǔ)   14
1.4.1  網(wǎng)頁的基本元素   14
1.4.2  網(wǎng)頁設(shè)計常用技術(shù)   17
1.4.3  網(wǎng)頁設(shè)計常用工具   18
1.5  編寫一個簡單的Web頁面   20
1.5.1  搭建瀏覽環(huán)境   20
1.5.2  檢測瀏覽環(huán)境是否支持   20
1.5.3  使用HTML5編寫一個簡單的Web頁面   21
1.6  本章小結(jié)   22
1.7  思考和練習(xí)   22
第2章  HTML5的演進(jìn)   24
2.1  HTML與XHTML基礎(chǔ)   24
2.1.1  標(biāo)簽與元素   24
2.1.2  特性組   26
2.1.3  HTML和XHTML實例   29
2.2  認(rèn)識HTML5   31
2.2.1  用XHTML 1.0標(biāo)記頁面   31
2.2.2  84.8%的標(biāo)記可以保留   32
2.3  關(guān)于   33
2.3.1  更完美的DOCTYPE   33
2.3.2  在HTML5中聲明語言   34
2.3.3  字符編碼   35
2.3.4  簡單易記   35
2.4  從HTML與XHTML到HTML5   35
2.4.1  XHTML 1.0風(fēng)格的“Hello World!”   35
2.4.2  HTML 4.01風(fēng)格的“Hello World!”   36
2.4.3  HTML5“松散”風(fēng)格的“Hello World!”   36
2.4.4  HTML5“嚴(yán)格”風(fēng)格的頁面   37
2.5  讓HTML5得到跨瀏覽器支持   37
2.5.1  瀏覽器如何處理未知元素   37
2.5.2  shiv   39
2.5.3  IE打印保護(hù)器   40
2.5.4  聲明塊級元素   40
2.6  HTML5樣板頁面   40
2.6.1  不再有type屬性   41
2.6.2  填充材料與替換   42
2.7  HTML5頁面驗證   42
2.7.1  HTML5驗證器   42
2.7.2  更新和驗證“貝克小姐”頁面   44
2.8  新的結(jié)構(gòu)化元素   46
2.8.1  塊級元素與行內(nèi)元素   47
2.8.2  結(jié)構(gòu)化構(gòu)建塊、和   47
2.8.3  標(biāo)題：、、以及～   50
2.8.4  更多的結(jié)構(gòu)化元素：、、以及   50
2.8.5  將一個簡單的頁面轉(zhuǎn)換成HTML5頁面   52
2.9  本章小結(jié)   54
2.10  思考和練習(xí)   55
第3章  創(chuàng)建HTML5文檔   56
3.1  HTML5文檔結(jié)構(gòu)   56
3.1.1  構(gòu)建基本的文檔結(jié)構(gòu)   56
3.1.2  用元數(shù)據(jù)元素說明文檔   58
3.1.3  使用腳本元素   61
3.2  構(gòu)建文檔主體   62
3.2.1  基本文本格式化   62
3.2.2  鏈接與導(dǎo)航   67
3.3  描述文本級語義   78
3.3.1  描述文本級語義的元素   79
3.3.2  使用文本標(biāo)記的實例   84
3.4  編輯文本   86
3.5  使用字符實體顯示特殊字符   87
3.6  注釋   87
3.7  本章小結(jié)   88
3.8  思考和練習(xí)   88
第4章  表格與列表   90
4.1  表格介紹   90
4.2  基本表格元素與特性   93
4.2.1  使用元素創(chuàng)建表格   93
4.2.2  創(chuàng)建基本表格   95
4.3  為表格添加標(biāo)題   96
4.4  表格區(qū)域分組   97
4.4.1  使用colspan特性跨越列   97
4.4.2  使用rowspan特性跨越行   98
4.4.3  將表格分解為表頭、表體及表尾   99
4.4.4  使用元素對列進(jìn)行分組   101
4.4.5  使用元素在列間共享樣式   102
4.5  嵌套表格   102
4.6  易訪問表格   103
4.6.1  如何線性化表格   104
4.6.2  使用id、scope及headers特性   105
4.6.3  創(chuàng)建易訪問表格   106
4.7  使用列表   107
4.7.1  使用元素創(chuàng)建無序列表   108
4.7.2  有序列表   108
4.7.3  定義列表   110
4.7.4  列表嵌套   111
4.8  表格應(yīng)用實例   111
4.9  本章小結(jié)   113
4.10  思考和練習(xí)   114
第5章  圖片與富媒體   115
5.1  在網(wǎng)頁中添加圖片   115
5.1.1  使用元素添加圖片   115
5.1.2  使用圖片作為鏈接   117
5.1.3  選擇正確的圖片格式   118
5.2  HTML5的視頻   119
5.2.1  視頻格式   120
5.2.2  瀏覽器支持   121
5.2.3  添加視頻源   121
5.2.4  track元素   124
5.2.5  更多的視頻設(shè)置   126
5.3  HTML5的音頻   127
5.3.1  音頻編解碼器   128
5.3.2  瀏覽器支持情況   128
5.3.3  添加音頻源   129
5.3.4  使用jPlayer   129
5.4  canvas   129
5.4.1  基于像素的自由   129
5.4.2  添加/實現(xiàn)canvas   130
5.4.3  canvas的威力與潛力   137
5.5  SVG   139
5.5.1  SVG與canvas的選擇   139
5.5.2  用SVG發(fā)布向量   140
5.6  富媒體頁面的設(shè)計實例   142
5.7  本章小結(jié)   144
5.8  思考和練習(xí)   144
第6章  HTML5表單的應(yīng)用   145
6.1  認(rèn)識表單   145
6.2  使用元素創(chuàng)建表單   147
6.2.1  action特性   147
6.2.2  method特性   148
6.2.3  id特性   148
6.2.4  name特性   148
6.2.5  enctype特性   148
6.2.6  accept-charset特性   148
6.2.7  novalidate特性   148
6.2.8  target特性   149
6.2.9  autocomplete特性   149
6.3  元素中的表單控件   149
6.3.1  文本輸入控件   149
6.3.2  新的HTML5輸入控件類型與特性   153
6.3.3  按鈕   159
6.3.4  復(fù)選框   161
6.3.5  單選按鈕   163
6.3.6  下拉選擇框   164
6.3.7  文件選擇框   167
6.3.8  隱藏控件   168
6.3.9  新的HTML5表單元素   168
6.4  創(chuàng)建一個聯(lián)系方式表單   170
6.5  使用元素為控件創(chuàng)建標(biāo)簽   172
6.6  使用及元素組織表單結(jié)構(gòu)   173
6.7  焦點   174
6.7.1  標(biāo)簽遍歷順序   175
6.7.2  快捷鍵   176
6.8  disabled與readonly控件   176
6.9  向服務(wù)器發(fā)送表單數(shù)據(jù)   178
6.9.1  HTTP get方法   178
6.9.2  HTTP post方法   179
6.10  創(chuàng)建更有用的表單字段   179
6.11  本章小結(jié)   181
6.12  思考和練習(xí)   182
第7章  CSS3概述   183
7.1  CSS基礎(chǔ)   183
7.1.1  CSS演變歷史   183
7.1.2  CSS的版本   184
7.1.3  CSS規(guī)則   187
7.1.4  繼承   190
7.2  CSS規(guī)則的添加位置   191
7.2.1  用元素鏈入外部樣式表   192
7.2.2  用