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

目    錄
第1章  網(wǎng)頁設計新時代   1
1.1  Web網(wǎng)頁設計原則   1
1.1.1  Web標準   1
1.1.2  Web標準與瀏覽器的兼容性   3
1.1.3  可訪問性   3
1.1.4  結構化文檔的Web   4
1.2  HTML5概述   4
1.2.1  傳統(tǒng)HTML與XHTML   4
1.2.2  HTML5是如何形成的   5
1.2.3  HTML5的設計原則   7
1.3  HTML5頁面的特征   9
1.3.1  使用HTML5結構化元素   10
1.3.2  使用CSS3美化HTML5文檔   13
1.4  Web網(wǎng)頁設計基礎   14
1.4.1  網(wǎng)頁的基本元素   14
1.4.2  網(wǎng)頁設計常用技術   17
1.4.3  網(wǎng)頁設計常用工具   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  本章小結   22
1.7  思考和練習   22
第2章  HTML5的演進   24
2.1  HTML與XHTML基礎   24
2.1.1  標簽與元素   24
2.1.2  特性組   26
2.1.3  HTML和XHTML實例   29
2.2  認識HTML5   31
2.2.1  用XHTML 1.0標記頁面   31
2.2.2  84.8%的標記可以保留   32
2.3  關于   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風格的“Hello World!”   35
2.4.2  HTML 4.01風格的“Hello World!”   36
2.4.3  HTML5“松散”風格的“Hello World!”   36
2.4.4  HTML5“嚴格”風格的頁面   37
2.5  讓HTML5得到跨瀏覽器支持   37
2.5.1  瀏覽器如何處理未知元素   37
2.5.2  shiv   39
2.5.3  IE打印保護器   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  新的結構化元素   46
2.8.1  塊級元素與行內元素   47
2.8.2  結構化構建塊、和   47
2.8.3  標題：、、以及～   50
2.8.4  更多的結構化元素：、、以及   50
2.8.5  將一個簡單的頁面轉換成HTML5頁面   52
2.9  本章小結   54
2.10  思考和練習   55
第3章  創(chuàng)建HTML5文檔   56
3.1  HTML5文檔結構   56
3.1.1  構建基本的文檔結構   56
3.1.2  用元數(shù)據(jù)元素說明文檔   58
3.1.3  使用腳本元素   61
3.2  構建文檔主體   62
3.2.1  基本文本格式化   62
3.2.2  鏈接與導航   67
3.3  描述文本級語義   78
3.3.1  描述文本級語義的元素   79
3.3.2  使用文本標記的實例   84
3.4  編輯文本   86
3.5  使用字符實體顯示特殊字符   87
3.6  注釋   87
3.7  本章小結   88
3.8  思考和練習   88
第4章  表格與列表   90
4.1  表格介紹   90
4.2  基本表格元素與特性   93
4.2.1  使用元素創(chuàng)建表格   93
4.2.2  創(chuàng)建基本表格   95
4.3  為表格添加標題   96
4.4  表格區(qū)域分組   97
4.4.1  使用colspan特性跨越列   97
4.4.2  使用rowspan特性跨越行   98
4.4.3  將表格分解為表頭、表體及表尾   99
4.4.4  使用元素對列進行分組   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  表格應用實例   111
4.9  本章小結   113
4.10  思考和練習   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  更多的視頻設置   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  富媒體頁面的設計實例   142
5.7  本章小結   144
5.8  思考和練習   144
第6章  HTML5表單的應用   145
6.1  認識表單   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  復選框   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)建標簽   172
6.6  使用及元素組織表單結構   173
6.7  焦點   174
6.7.1  標簽遍歷順序   175
6.7.2  快捷鍵   176
6.8  disabled與readonly控件   176
6.9  向服務器發(fā)送表單數(shù)據(jù)   178
6.9.1  HTTP get方法   178
6.9.2  HTTP post方法   179
6.10  創(chuàng)建更有用的表單字段   179
6.11  本章小結   181
6.12  思考和練習   182
第7章  CSS3概述   183
7.1  CSS基礎   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  用