HTML5程序開發(fā)范例寶典

目錄
第1章　HTML網(wǎng)頁布局 1
1．1 頁面背景和布局 2
實例001 統(tǒng)一站內(nèi)網(wǎng)頁風格 2
實例002 網(wǎng)頁換膚 6
實例003 制作漸變背景 8
實例004 把兩個div并排顯示在瀏覽器中 9
實例005 通過DIV+CSS對電子
商城的頁面進行布局 10
實例006 設(shè)置4張圖片并排顯示在瀏覽器 12
實例007 應(yīng)用標簽設(shè)計用戶注冊頁面 13
實例008 應(yīng)用div元素構(gòu)建一個完整的表格 14
實例009 使用column-count屬性實現(xiàn)分欄的實例 16
實例010 文字和圖片完整居中 18
實例011 應(yīng)用CSS控制登錄頁面顯示樣式 19
1．2 框架的應(yīng)用 21
實例012 框架集的嵌套 21
實例013 在網(wǎng)頁中應(yīng)用浮動框架 23
實例014 創(chuàng)建空白框架 25
1．3 使用新元素對頁面進行布局 27
實例015 使用HTML5的新元素對頁面進行分欄設(shè)計 27
實例016 應(yīng)用HTML5新增的元素制作簡單用戶注冊
頁面 28
第2章　HTML基本元素 31
2．1 HTML基本標記 32
實例017 演示進入和離開網(wǎng)頁的過渡效果 32
實例018 背景圖片的設(shè)置與顯示效果 34
實例019 設(shè)置未訪問的鏈接文字的顏色 36
實例020 使用http-equiv屬性設(shè)定頁面的自動刷新 37
實例021 在網(wǎng)頁中完成對明日科技公司的簡介 38
2．2 HTML5新增結(jié)構(gòu)元素 39
實例022 應(yīng)用section元素對頁面上的內(nèi)容進行分塊 39
實例023 以博客為例了解article
元素的使用 40
實例024 一個關(guān)于article元素嵌套的實例 41
實例025 通過article元素表示插件的實例 42
實例026 聯(lián)合使用section和article標簽 43
實例027 在網(wǎng)頁中顯示聯(lián)系信息 44
實例028 一個nav元素的使用實例 44
實例029 一個在文章內(nèi)部的aside元素實例 46
2．3 網(wǎng)頁文本內(nèi)容 47
實例030 觀察標題到的變化 47
實例031 用align屬性設(shè)置標題文字的對齊方式 48
實例032 設(shè)置不同的文字字體 49
實例033 顯示文字的粗體、斜體、下劃線的效果 50
實例034 使用標記表示段落格式 50
實例035 使用標記
實現(xiàn)文字的換行顯示 51
實例036 應(yīng)用標記使段落居中顯示 52
實例037 對頁面中的文本定義默認的字體樣式 53
實例038 應(yīng)用標記定義一個網(wǎng)站的地址 54
實例039 通過格式標簽定義文本樣式 54
實例040 制作彩色滾動條 55
實例041 在文字上方標注說明 57
實例042 應(yīng)用刪除線樣式標記商品原價 58
第3章　HTML高級元素 61
3．1 新增和改良的頁面元素 62
實例043 使用details標記元素實現(xiàn)交互 62
實例044 應(yīng)用output元素拖動滑竿改變數(shù)值 63
實例045 實現(xiàn)下拉彈出效果 64
實例046 刷新彈出圖片和
文字 65
實例047 使用summary標記元素實現(xiàn)交互 67
實例048 使用menu標記元素實現(xiàn)菜單交互 68
實例049 實現(xiàn)右鍵菜單功能 69
實例050 使用command標記元素實現(xiàn)動態(tài)對話框效果 71
實例051 使用progress標記元素
實現(xiàn)進度條效果 73
實例052 使用meter標記元素實現(xiàn)百分比效果 74
實例053 設(shè)置progress進度條的樣式 75
實例054 使用html根元素顯示文字 76
實例055 通過標簽設(shè)置目標鏈接 77
實例056 通過JavaScript腳本獲取并顯示文本框的內(nèi)容 79
實例057 實現(xiàn)樹節(jié)點效果 80
實例058 使用mark元素高亮顯示搜索關(guān)鍵詞 81
實例059 在網(wǎng)頁中突出顯示某些文字 82
實例060 使用cite元素引用文檔 83
實例061 在網(wǎng)頁中顯示一幅圖片 84
實例062 在網(wǎng)頁中顯示一個文本
框架 85
實例063 使用object元素在網(wǎng)頁中顯示一個Flash 86
3．2 新增的全局屬性 87
實例064 使用鼠標光標拖動網(wǎng)頁中的文字 87
實例065 自動隱藏或顯示網(wǎng)頁中的文字 88
實例066 自動檢測輸入的拼音是否正確 89
實例067 編輯修改網(wǎng)頁中的文字 90
第4章　表單的使用 93
4．1 表單和表單元素 94
實例068 使用文本框做一個人口調(diào)查的頁面 94
實例069 使用密碼域創(chuàng)建一個簡單的注冊頁面 95
實例070 使用單選按鈕做一個用戶信息表 96
實例071 使用復選框選擇你所喜歡的運動 97
實例072 使用文件域來上傳圖片 98
實例073 使用文本域創(chuàng)建一個留言板頁面 100
實例074 創(chuàng)建一個用來做學生業(yè)余生活調(diào)查的頁面 101
實例075 讓密碼域更安全 102
實例076 制作個人信息頁面 103
4．2 增加與改良的input元素 105
實例077 驗證郵件地址是否合法 105
實例078 驗證URL地址 107
實例079 驗證在文本框中輸入數(shù)字的大小 109
實例080 通過滑動條設(shè)置顏色 110
實例081 自動彈出日期和時間輸入框 112
實例082 顯示文本框中的搜索關(guān)鍵字 114
實例083 使元素自動獲取焦點 116
實例084 驗證表單中輸入的數(shù)據(jù)是否合法 117
實例085 在文本框中顯示提示信息 119
實例086 驗證文本框中的內(nèi)容是否為空 120
實例087 開啟表單的自動完成功能 121
實例088 重寫表單中的某些屬性 122
實例089 驗證表單中的數(shù)據(jù)是否為網(wǎng)址格式 123
實例090 自動設(shè)置表單中傳遞的數(shù)字 125
實例091 在表單中選擇多個上傳文件 126
實例092 實現(xiàn)播放器樣式的按鈕 128
實例093 一個簡單的乘法計算器 130
實例094 在網(wǎng)頁中生成一個密鑰 131
實例095 驗證輸入的密碼是否合法 132
實例096 驗證兩次輸入的密碼是否一致 134
實例097 取消表單驗證 135
實例098 實現(xiàn)一個精美的登錄表單界面 136
4．3 JavaScript操作表單 138
實例099 通過正則表達式驗證日期 138
實例100 通過正則表達式驗證電話號碼 140
實例101 驗證輸入的字符串是否為漢字 142
實例102 驗證身份證號碼 143
實例103 驗證車牌號碼 145
實例104 驗證數(shù)量和金額 146
實例105 驗證字符串是否以指定字符開頭 148
實例106在網(wǎng)頁中實現(xiàn)自動增加表格效果 149
實例107 開發(fā)一個計數(shù)器程序 151
實例108 判斷用戶是否選擇了文本框中的指定文本 152
實例109 實現(xiàn)一個動態(tài)菜單樣式 153
實例110 動態(tài)添加表單中的元素 155
實例111 獲取文本框并修改其內(nèi)容 157
實例112 textarea根據(jù)內(nèi)容自動增高 158
實例113 判斷用戶選擇了幾個復選框 159
實例114 實現(xiàn)搜索文本框的效果 160
實例115 通過下拉菜單動態(tài)改變文本框背景顏色 162
實例116 自動計算金額 163
實例117 設(shè)置文本框的只讀屬性 165
實例118 限制多行文本域輸入的字符個數(shù) 167
實例119 自動選擇文本框/編輯框中的文字 169
實例120 按下回車鍵時自動切換焦點 170
實例121 獲取下拉列表/菜單的值 172
實例122 遍歷多選擇下拉列表 174
實例123 在下拉列表中進行多選移除 176
實例124 將數(shù)組中的數(shù)據(jù)添加到下拉菜單中 177
實例125 應(yīng)用下拉菜單選擇所要聯(lián)機的網(wǎng)站 179
實例126 多級級聯(lián)菜單 181
實例127 可以輸入文字的下拉菜單 182
實例128 根據(jù)下拉菜單的值顯示不同控件 184
實例129 選中單選按鈕后顯示其他表單元素 185
實例130 通過單選按鈕控制其他表單元素是否可用 187
實例131 不提交表單獲取復選框的值 188
實例132 控制復選框的全選或反選 189
實例133 只有一個復選框時控制復選框的全選或反選 191
實例134 通過JavaScript控制表單的提交與重置 192
實例135 防止表單重復提交 193
實例136 通過for循環(huán)獲取表單元素的中文名稱 195
實例137 可以提交到不同處理頁的表單 196
第5章　列表的使用 199
5．1 有序列表 200
實例138 使用ol來設(shè)置有序列表 200
實例139 使用type類型來設(shè)置有序列表 201
實例140 使用start來設(shè)置有序列表的起始數(shù)值 202
5．2 序列表 204
實例141 使用標簽來顯示序列表 204
實例142 使用type類型來設(shè)置序列表