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

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