當前位置:經管資料網行業分類IT互聯網HTML5教程(2017)524頁

HTML5教程(2017)524頁

21.8 MB
中文
80
計點資料
2017
524頁
PDF [下載閱讀器]
2019-09-28 09:34:55
推薦星級
IT互聯網計算機 | 網頁設計
行業分類 | IT互聯網

HTML5教程(2017)簡介

內容系統而全面,詳盡地講解了HTML語言及HTML5的所有新功能與新特性,技術新穎,所有重要知識點均以多個實例進行講解,方便讀者動手實踐。每章最后設置習題,通過這些習題可以對本章學到的知識進行鞏固。本書不僅能滿足您全面而系統地學習理論知識的要求,還能滿足您充分實踐的需求。

內容共分 23 章,包括 HTML 基礎、HTML 文件基本標記、設計網頁文本內容、使用列表、使用超鏈接、使用圖像、表格的應用、層——div 標簽、編輯表單、多媒體頁面、HTML5 的新特性、HTML5 與 HTML4 的區別、HTML5 的結構、HTML5 中的表單、文件與拖放、多媒體播放、繪制圖形、本地存儲、離線應用程序、使用 Web Workers 處理線程、通信 API、獲取地理位置信息、旅游信息網前臺頁面等。

注:無附件、光盤
目錄
第 1 篇 HTML 基礎知識
第 1 章 HTML 基礎 2
視頻講解:21 分鐘
1.1 HTML 的基本概念 3
1.2 HTML 發展史與 HTML53
1.2.1 HTML 的發展歷史3
1.2.2 HTML 4.01 和 xHTML 4
1.2.3 從 xHTML 到 HTML5 5
1.3 迎接新的 Web 時代 5
1.3.1 部分代替了原來的 JavaScript 6
1.3.2 更明確的語義支持 6
1.3.3 增強了 Web 應用程序功能 7
1.3.4 HTML5 的目標 7
1.4 各瀏覽器對 HTML5 的支持 8
1.5 HTML5 要解決的 3 個問題 9
1.6 HTML 的基本結構 10
1.6.1 HTML 文件的編寫方法 10
1.6.2 文件開始標簽 11
1.6.3 文件頭部標簽 12
1.6.4 文件標題標簽12<br/>1.6.5 文件主體標簽<body> 12<br/>1.6.6 編寫文件的注意事項 13<br/>1.7 編寫第一個 HTML 文件 13<br/>1.7.1 HTML 文件的編寫方法 13<br/>1.7.2 手工編寫頁面 14<br/>1.7.3 使用可視化軟件制作頁面 15<br/>1.7.4 使用瀏覽器瀏覽 HTML 文件.18<br/>1.7.5 HTML 開發的明日圖書網 19<br/>1.8 小結 20<br/>1.9 習題 20<br/><strong>第 2 章 HTML 文件基本標記 22</strong><br/>2.1 HTML 頭部標記 23<br/>2.2 標題標記<title> 23<br/>2.3 元信息標記<meta> 24<br/>2.3.1 設置頁面關鍵字 24<br/>2.3.2 設置頁面描述 25<br/>2.3.3 設置編輯工具 25<br/>2.3.4 設定作者信息 26<br/>2.3.5 限制搜索方式 27<br/>2.3.6 設置網頁文字及語言 27<br/>2.3.7 設置網頁的定時跳轉 28<br/>2.3.8 設定有效期限 29<br/>2.3.9 禁止從緩存中調用 29<br/>2.3.10 刪除過期的 cookie.30<br/>2.3.11 強制打開新窗口 30<br/>2.3.12 設置網頁的過渡效果 31<br/>2.3.13 設定建立網站的日期 34<br/>2.3.14 設定網頁版權信息 34<br/>2.3.15 設定聯系人的郵箱 35<br/>2.4 基底網址標記<base href="http://www.gspfib.icu/"/> 35<br/>2.5 頁面的主體標記<body>37<br/>2.5.1 設置文字顏色—text 37<br/>2.5.2 背景顏色屬性—bgcolor 38<br/>2.5.3 背景圖像屬性—background 38<br/>2.5.4 設置鏈接文字屬性—link41<br/>2.5.5 設置邊距—margin 43<br/>2.6 頁面的注釋標記<!-- -> 44<br/>2.7 實例演練—創建基本的 HTML網頁 44<br/>2.8 小結 45<br/>2.9 習題 46<br/><strong>第 3 章 設計網頁文本內容 47</strong><br/>3.1 標題文字的建立.48<br/>3.1.1 標題字標記<H> 48<br/>3.1.2 標題文字的對齊方式—align.48<br/>3.2 設置文字格式 49<br/>3.2.1 設置文字字體—face 50<br/>3.2.2 設置字號—size50<br/>3.2.3 設置文字顏色—color 51<br/>3.2.4 粗體、斜體、下劃線—strong、em、u 52<br/>3.2.5 上標與下標—sup、sub 52<br/>3.2.6 設置刪除線—strike 53<br/>3.2.7 等寬文字標記—code 54<br/>3.2.8 空格—  54<br/>3.2.9 其他特殊符號 55<br/>3.3 設置段落格式 56<br/>3.3.1 段落標記—p 56<br/>3.3.2 取消文字換行標記—nobr 57<br/>3.3.3 換行標記—br 57<br/>3.3.4 保留原始排版方式標記—pre 58<br/>3.3.5 居中對齊標記—center 59<br/>3.3.6 向右縮進標記—blockquote.59<br/>3.4 水平線標記 60<br/>3.4.1 添加水平線—hr 60<br/>3.4.2 設置水平線寬度與高度屬性—width、height 61<br/>3.4.3 設置水平線的顏色—color 62<br/>3.4.4 設置水平線的對齊方式—align 63<br/>3.4.5 去掉水平線陰影—noshade 64<br/>3.5 其他文字標記 65<br/>3.5.1 文字標注標記—ruby 65<br/>3.5.2 聲明變量標記—var 66<br/>3.5.3 忽視 HTML 標簽標記—plaintext、xmp 67<br/>3.5.4 設置地址文字標記—address.68<br/>3.6 小結 68<br/>3.7 習題 69<br/><strong>第 4 章 使用列表 70</strong><br/>4.1 列表的標記 71<br/>4.2 使用無序列表 71<br/>4.2.1 無序列表標記—ul 71<br/>4.2.2 設置無序列表的類型—type 72<br/>4.3 使用有序列表 74<br/>4.3.1 有序列表標記—ol 74<br/>4.3.2 有序列表的類型—type 75<br/>4.3.3 有序列表的起始數值—start 76<br/>4.4 定義列表標記—dl 78<br/>4.5 菜單列表標記—menu81<br/>4.6 目錄列表—dir 82<br/>4.7 設置列表文字的顏色 83<br/>4.8 使用嵌套列表 84<br/>4.8.1 定義列表的嵌套 84<br/>4.8.2 無序列表和有序列表的嵌套 86<br/>4.8.3 有序列表之間的嵌套 88<br/>4.9 小結 89<br/>4.10 習題 89<br/><strong>第 5 章 使用超鏈接 90</strong><br/>5.1 超鏈接的基本知識 91<br/>5.1.1 超鏈接 91<br/>5.1.2 絕對路徑 91<br/>5.1.3 相對路徑 91<br/>5.2 超鏈接的建立 92<br/>5.2.1 超鏈接標記的基本語法 92<br/>5.2.2 建立文本超鏈接 92<br/>5.2.3 設置超鏈接的目標窗口 94<br/>5.3 內部鏈接 95<br/>5.4 書簽鏈接 98<br/>5.4.1 建立書簽 98<br/>5.4.2 鏈接到同一頁面的書簽 99<br/>5.4.3 鏈接到不同頁面的書簽 101<br/>5.5 外部鏈接 102<br/>5.5.1 通過 HTTP 協議 102<br/>5.5.2 通過 FTP 104<br/>5.5.3 發送 Email 104<br/>5.5.4 下載文件 106<br/>5.6 其他鏈接 107<br/>5.6.1 腳本鏈接 107<br/>5.6.2 空鏈接 108<br/>5.7 小結 108<br/>5.8 習題 109<br/><strong>第 6 章 使用圖像 110</strong><br/>6.1 圖片的基本格式 111<br/>6.2 添加圖像—img 111<br/>6.3 設置圖像屬性 112<br/>6.3.1 圖像高度—height 112<br/>6.3.2 圖像寬度—width 113<br/>6.3.3 圖像邊框—border 114<br/>6.3.4 圖像水平間距—hspace 115<br/>6.3.5 圖像垂直間距—vspace 117<br/>6.3.6 圖像相對于文字基準線的對齊方式—align 118<br/>6.3.7 圖像的提示文字—title 119<br/>6.3.8 圖像的替換文字—alt 120<br/>6.4 使用<img>標記插入 avi 文件 121<br/>6.4.1 avi 的源文件屬性 dynsrc 121<br/>6.4.2 設定 avi 文件循環次數屬性 loop 121<br/>6.4.3 設定 avi 文件播放方式屬性 start 123<br/>6.5 圖像的超鏈接 123<br/>6.5.1 設置圖像的超鏈接 124<br/>6.5.2 設置圖像熱區鏈接 125<br/>6.6 小結 128<br/>6.7 習題 128<br/><strong>第 7 章 表格的應用 130</strong><br/>7.1 創建表格 131<br/>7.1.1 表格的基本構成—table、tr、td 131<br/>7.1.2 設置表格的標題—caption.132<br/>7.1.3 表格的表頭—th 133<br/>7.2 設置表格基本屬性 134<br/>7.2.1 設置表格寬度—width 135<br/>7.2.2 設置表格高度—height 136<br/>7.2.3 設置表格對齊方式—align 138<br/>7.3 設置表格的邊框 139<br/>7.3.1 表格邊框寬度—border 139<br/>7.3.2 表格邊框顏色—bordercolor 140<br/>7.3.3 內框寬度—cellspacing 141<br/>7.3.4 表格內文字與邊框間距—cellpadding 142<br/>7.4 設置表格背景 144<br/>7.4.1 設置表格背景顏色—bgcolor 144<br/>7.4.2 設置表格的背景圖像—background 145<br/>7.5 設置表格的行屬性 146<br/>7.5.1 高度的控制—height 146<br/>7.5.2 邊框顏色—bordercolor 147<br/>7.5.3 行背景—bgcolor、background 148<br/>7.5.4 行文字的水平對齊方式—align 149<br/>7.5.5 行文字的垂直對齊方式—valign 151<br/>7.5.6 設置表格標題的垂直對齊方式—align 152<br/>7.6 調整單元格屬性 153<br/>7.6.1 單元格大小—width、height 153<br/>7.6.2 水平跨度—colspan 154<br/>7.6.3 垂直跨度—rowspan 155<br/>7.6.4 對齊方式—align、valign 157<br/>7.6.5 設置單元格的背景色 158<br/>7.6.6 設置單元格的邊框顏色—bordercolor 159<br/>7.6.7 設置單元格的亮邊框—bordercolorlight 161<br/>7.6.8 設置單元格的暗邊框—bordercolordark 162<br/>7.6.9 設置單元格的背景圖像—background 163<br/>7.7 表格的結構 165<br/>7.7.1 表格的表首標記—thead165<br/>7.7.2 表格的表主體標記—tbody 166<br/>7.7.3 表格的表尾標記—tfoot 168<br/>7.8 表格的嵌套 169<br/>7.9 小結 171<br/>7.10 習題 171<br/><strong>第 8 章 層—div 標簽 173</strong><br/>8.1 層 174<br/>8.1.1 層的分類 174<br/>8.1.2 定義數據塊 174<br/>8.2 <div>標簽 175<br/>8.2.1 <div>標簽 175<br/>8.2.2 <div>標簽的屬性 176<br/>8.2.3 <span>標簽與<div>標簽 183<br/>8.3 <iframe>標簽185<br/>8.3.1 <iframe>標簽 185<br/>8.3.2 <iframe>標簽的屬性 185<br/>8.4 應用 DIV 制作下拉菜單導航條 188<br/>8.5 小結 191<br/>8.6 習題 191<br/><strong>第 9 章 編輯表單 193</strong><br/>9.1 使用表單標記—form 194<br/>9.1.1 處理動作—action 194<br/>9.1.2 表單名稱—name194<br/>9.1.3 傳送方法—method 195<br/>9.1.4 編碼方式—enctype 196<br/>9.1.5 目標顯示方式—target 197<br/>9.2 添加控件 197<br/>9.3 輸入類的控件 198<br/>9.3.1 文字字段—text 198<br/>9.3.2 密碼域—password 199<br/>9.3.3 單選按鈕—radio 201<br/>9.3.4 復選框—checkbox 202<br/>9.3.5 普通按鈕—button 203<br/>9.3.6 提交按鈕—submit 204<br/>9.3.7 重置按鈕—reset.205<br/>9.3.8 圖像域—image 206<br/>9.3.9 隱藏域—hidden 207<br/>9.3.10 文件域—file 208<br/>9.4 使用 label 定義標簽 209<br/>9.5 使用 button 定義按鈕 210<br/>9.6 列表/菜單標記 211<br/>9.7 文本域標記 textarea 213<br/>9.8 id 標記 214<br/>9.9 在 Dreamweaver 中快速創建表單 215<br/>9.10 小結 217<br/>9.11 習題 217<br/><strong>第 10 章 多媒體頁面 219</strong><br/>10.1 設置滾動文字.220<br/>10.1.1 滾動文字標記—marquee.220<br/>10.1.2 滾動方向屬性—direction220<br/>10.1.3 滾動方式屬性—behavior 221<br/>10.1.4 滾動速度屬性—scrollamount 222<br/>10.1.5 滾動延遲屬性—scrolldelay.223<br/>10.1.6 滾動循環屬性—loop 224<br/>10.1.7 滾動范圍屬性—width、 height 224<br/>10.1.8 滾動背景顏色屬性—bgcolor 225<br/>10.1.9 滾動空間屬性—hspace、vspace 226<br/>10.2 添加背景音樂.227<br/>10.2.1 設置背景音樂—bgsound.227<br/>10.2.2 設置循環播放次數—loop 229<br/>10.3 添加多媒體文件 230<br/>10.3.1 添加多媒體文件標記—embed 230<br/>10.3.2 設置自動運行—autostart.230<br/>10.3.3 設置媒體文件的循環播放—loop 232<br/>10.3.4 隱藏面板—hidden 232<br/>10.3.5 添加其他類型的媒體文件 233<br/>10.4 <object>標簽 234<br/>10.4.1 插入音頻文件 234<br/>10.4.2 插入 Flash 動畫235<br/>10.4.3 插入背景透明的 Flash 動畫237<br/>10.4.4 插入視頻文件 238<br/>10.5 小結 239<br/>10.6 習題 240<br/>第 2 篇 HTML5 高級應用<br/><strong>第 11 章 HTML5 的新特性 242</strong><br/>視頻講解:5 分鐘<br/>11.1 誰在開發 HTML5 243<br/>11.2 HTML5 的新認識 243<br/>11.2.1 兼容性 243<br/>11.2.2 實用性和用戶優先 243<br/>11.2.3 化繁為簡 244<br/>11.3 無插件范式 244<br/>11.4 HTML5 的新特性 245<br/>第 12 章 HTML5 與 HTML4 的區別 246<br/>12.1 語法的改變 247<br/>12.1.1 HTML5 的語法變化 247<br/>12.1.2 HTML5 中的標記方法 247<br/>12.1.3 HTML5 語法中需要掌握的 3 個要點248<br/>12.1.4 標記示例 249<br/>12.2 新增的元素和廢除的元素 250<br/>12.2.1 新增的結構元素 250<br/>12.2.2 新增的塊級(block)的語義元素 251<br/>12.2.3 新增的行內(inline)的語義元素 252<br/>12.2.4 新增的嵌入多媒體元素與交互性元素.253<br/>12.2.5 新增的 input 元素的類型254<br/>12.2.6 廢除的元素 254<br/>12.3 新增的屬性和廢除的屬性 255<br/>12.3.1 新增的屬性 255<br/>12.3.2 廢除的屬性 257<br/>12.4 全局屬性 259<br/>12.4.1 contentEditable 屬性 259<br/>12.4.2 designMode 屬性 261<br/>12.4.3 hidden 屬性 262<br/>12.4.4 spellcheck 屬性 263<br/>12.4.5 tabindex 屬性 264<br/>12.5 小結 265<br/>12.6 習題 265<br/><strong>第 13 章 HTML5 的結構 266</strong><br/>13.1 新增的主體結構元素 267<br/>13.1.1 article 元素 267<br/>13.1.2 section 元素 269<br/>13.1.3 nav 元素 271<br/>13.1.4 aside 元素 273<br/>13.1.5 time 元素 274<br/>13.1.6 pubdate 屬性 275<br/>13.2 新增的非主體結構元素.275<br/>13.2.1 header 元素 275<br/>13.2.2 hgroup 元素 276<br/>13.2.3 footer 元素 277<br/>13.2.4 address 元素 278<br/>13.3 HTML5 結構 278<br/>13.3.1 大綱 278<br/>13.3.2 對結構元素使用樣式 282<br/>13.3.3 article 元素的樣式 283<br/>13.4 小結 284<br/>13.5 習題 284<br/><strong>第 14 章 HTML5 中的表單 285</strong><br/>視頻講解:47 分鐘<br/>14.1 新增元素與屬性 286<br/>14.1.1 新增的屬性 286<br/>14.1.2 增加與改良的 input 元素的種類 289<br/>14.1.3 output 元素的添加 295<br/>14.1.4 應用新增元素制作注冊表單.296<br/>14.2 對表單的驗證.297<br/>14.2.1 自動驗證 297<br/>14.2.2 checkValidity 顯式驗證法 298<br/>14.2.3 避免驗證 299<br/>14.2.4 使用 setCustomValidity 方法自定義錯誤<br/>信息 301<br/>14.3 增加的頁面元素 302<br/>14.3.1 新增的 figure 元素 302<br/>14.3.2 新增的 details 元素 303<br/>14.3.3 新增的 mark 元素 305<br/>14.3.4 新增的 progress 元素 307<br/>14.3.5 新增的 meter 元素 308<br/>14.3.6 改良的 ol 列表 309<br/>14.3.7 改良的 dl 列表 310<br/>14.3.8 加以嚴格限制的 cite 元素 311<br/>14.3.9 重新定義的 small 元素 312<br/>14.4 小結 312<br/>14.5 習題 312<br/><strong>第 15 章 文件與拖放 314</strong><br/>視頻講解:40 分鐘<br/>15.1 選擇文件 315<br/>15.1.1 通過 file 對象選擇文件 315<br/>15.1.2 使用 bIob 接口獲取文件的類型與大小 316<br/>15.1.3 通過類型過濾選擇的文件 317<br/>15.2 使用 FileReader 接口讀取文件 319<br/>15.2.1 檢測瀏覽器對 FileReader 接口 319<br/>15.2.2 FileReader 接口的方法 319<br/>15.2.3 使用 readAsDataURL 方法預覽圖片 320<br/>15.2.4 使用 readAsText 方法讀取文本文件.321<br/>15.2.5 FileReader 接口中的事件323<br/>15.3 拖放 API 324<br/>15.3.1 實現拖放的步驟 324<br/>15.3.2 通過拖放顯示歡迎信息 328<br/>15.3.3 使用拖放將商品拖入購物車.330<br/>15.4 dataTransfer 對象應用詳解 332</p><p>15.4.1 使用 effectAllowed 和 dropEffect 屬性設置拖放效果 333</p><p>15.4.2 使用 setDragImage 方法設置拖放圖標 334<br/>15.5 小結 335<br/>15.6 習題 335<br/><strong>第 16 章 多媒體播放 336</strong><br/>16.1 HTML5 多媒體的簡述 337<br/>16.1.1 HTML4 中多媒體的應用337<br/>16.1.2 HTML5 頁面中的多媒體337<br/>16.2 多媒體元素基本屬性 338<br/>16.3 多媒體元素常用方法 346<br/>16.3.1 媒體播放時的方法 346<br/>16.3.2 canPlayType(type)方法 348<br/>16.4 多媒體元素重要事件 350<br/>16.4.1 事件處理方式 350<br/>16.4.2 事件介紹 351<br/>16.4.3 事件示例 353<br/>16.5 小結 356<br/>16.6 習題 356<br/><strong>第 17 章 繪制圖形 358</strong><br/>17.1 canvas 的基礎知識 359<br/>17.1.1 canvas 的由來 359<br/>17.1.2 canvas 是什么 359<br/>17.1.3 替代內容 359<br/>17.1.4 CSS 和 canvas 360<br/>17.1.5 瀏覽器對 HTML5 Canvas 的支持 360<br/>17.1.6 在頁面中放置 canvas 元素 360<br/>17.1.7 繪制帶邊框矩形 362<br/>17.2 在畫布中使用路徑 364<br/>17.2.1 使用 arc 方法繪制圓形 364<br/>17.2.2 使用 moveTo 與 lineTo 路徑繪制火柴人 367<br/>17.2.3 貝塞和二次方曲線 369<br/>17.3 運用樣式與顏色 371<br/>17.3.1 fillStyle 和 strokeStyle 屬性 371<br/>17.3.2 透明度 globalAlpha 373<br/>17.3.3 線型 Line styles374<br/>17.4 繪制漸變圖形.376<br/>17.4.1 繪制線性漸變 376<br/>17.4.2 繪制徑向漸變 377<br/>17.5 繪制變形圖形.379<br/>17.5.1 坐標的變換 379<br/>17.5.2 坐標變換與路徑的結合 380<br/>17.5.3 矩陣變換 382<br/>17.6 組合多個圖形.385<br/>17.7 給圖形繪制陰影 388<br/>17.8 應用圖像 390<br/>17.8.1 繪制圖像 390<br/>17.8.2 圖像的局部放大 392<br/>17.8.3 圖像平鋪 393<br/>17.8.4 圖像裁剪 395<br/>17.8.5 像素的處理 396<br/>17.9 繪制文字 398<br/>17.10 保存與恢復狀態 400<br/>17.11 文件的保存 400<br/>17.12 對畫布繪制實現動畫 401<br/>17.13 綜合實例—桌面時鐘.404<br/>17.14 小結 407<br/>17.15 習題 407<br/><strong>第 18 章 本地存儲 408</strong><br/>視頻講解:49 分鐘<br/>18.1 初識 Web Storage 409<br/>18.1.1 Web Storage 是什么 409<br/>18.1.2 使用 WebStorage 中的 API.409</p><p>18.1.3 sessionStorage 和 localStorage 的實例—計數器 414</p><p>18.1.4 Web Storage 綜合實例—留言本 416<br/>18.1.5 JSON 對象的存數實例—用戶信息卡.418<br/>18.2 本地數據庫 420<br/>18.2.1 Web SQL 數據庫簡介 420<br/>18.2.2 使用 Web SQL Database API 421<br/>18.2.3 本地數據庫實例—用戶登錄 425<br/>18.3 小結 428<br/>18.4 習題 428<br/><strong>第 19 章 離線應用程序 430</strong><br/>19.1 HTML5 離線 Web 應用概述 431<br/>19.1.1 離線 Web 應用概述 431<br/>19.1.2 本地緩存與瀏覽器網頁緩存的區別 432<br/>19.2 創建 HTML5 離線應用 432<br/>19.2.1 緩存清單 432<br/>19.2.2 配置 IIS 服務器 434<br/>19.2.3 瀏覽 manifest 清單 434<br/>19.3 瀏覽器與服務器的交互過程 436<br/>19.4 判斷在線狀態.438<br/>19.5 applicationCache 對象441<br/>19.5.1 swapCache 方法 443<br/>19.5.2 applicationCache 對象的事件 445<br/>19.6 小結 448<br/>19.7 習題 448<br/>第 20 章 使用 Web Workers 處理線程 449<br/>20.1 Web Workers 概述 450<br/>20.1.1 創建和使用 Worker 450<br/>20.1.2 Web Workers 應用實例—求和運算 452<br/>20.1.3 與線程進行數據的交互 454<br/>20.2 在 Worker 內部能做什么.457<br/>20.3 多個 Javascript 文件的加載與執行.457<br/>20.4 線程嵌套 458<br/>20.4.1 單層嵌套 458<br/>20.4.2 在多個子線程中進行數據的交互 460<br/>20.5 小結 463<br/>20.6 習題 463<br/><strong>第 21 章 通信 API 464</strong><br/>視頻講解:4 分鐘<br/>21.1 跨文檔消息通信 465<br/>21.1.1 使用 postMessageAPI 465<br/>21.1.2 跨文檔消息傳輸 465<br/>21.1.3 跨域通信 468<br/>21.2 小結 470<br/><strong>第 22 章 獲取地理位置信息 471</strong><br/>22.1 Geolocation API 的概述.472<br/>22.1.1 使用 getCurrentPosition 獲取當前地理位置 472<br/>22.1.2 使用 watchPosition 持續監視當前地理位置的信息 474<br/>22.1.3 使用 clearWatch 停止獲取當前用戶的地理位置信息 474<br/>22.2 position 對象 474<br/>22.3 在 Google 地圖上顯示“我在這里”.477<br/>22.4 利用 HTML5 和百度地圖實現定位處理 479<br/>22.5 小結 481<br/>22.6 習題 481<br/>第 3 篇 HTML5 項目實戰<br/><strong>第 23 章 旅游信息網前臺頁面 484</strong><br/>23.1 概述 485<br/>23.2 網站預覽 485<br/>23.3 關鍵技術 489<br/>23.3.1 網站主題結構設計 489<br/>23.3.2 HTML5 結構元素的使用489<br/>23.4 網站公共部分設計 490<br/>23.4.1 設計網站公共 header 490<br/>23.4.2 設計網站公共 footer 497<br/>23.5 網站主頁設計.498<br/>23.5.1 顯示網站介紹及相關圖片 498<br/>23.5.2 主頁左側導航的實現 500<br/>23.6 “留下足跡”頁面設計.502<br/>23.6.1 播放音樂 503<br/>23.6.2 添加留言功能的實現 504<br/>23.7 小結 505<br/><strong>附錄 習題參考答案 506</strong></p> <div class="contbot"></div> <div class="all-ahow"><span class="">全部</span></div> </div> <div class="clear"></div><div id="enlarge_images"></div> </div> <br><div class="down-tags"><font color="green">資料標簽:</font><a href='/soft/tag.asp?name=HTML' target='_blank'>HTML</a> <a href='/soft/tag.asp?name=HTML5%BD%CC%B3%CC' target='_blank'>HTML5教程</a> <a href='/soft/tag.asp?name=%CD%F8%D2%B3%C9%E8%BC%C6' target='_blank'>網頁設計</a></div> </div> </div> <div class="container"> <div class="conMain right"> <div class="listBox detail-down"> <div> <a name="downloadb"> </a></div> <div class="caption"> </div> <div class="content"> <div class="down-url left"> <div class="dl-box"> <div class="dl-hd"><h3><a href="http://www.gspfib.icu/soft/show.asp?id=256959" target="_blank">HTML5教程(2017)524頁</a></h3></div> <div class="dl-bd"><ul> <li><i class="dl-ico"></i><a href="/soft/download.asp?softid=256959&downid=0&id=431235" target="_blank">進入下載頁面列表</a><br /> </li> </ul></div> </div> </div> <div class="clearfix"></div> </div> </div> <div class="box box2 detail-intro"> <div class="caption"> <div class="captionL"> <h3>熱門相關資料</h3> </div> </div> <div class="content relatedb"> <ul> <li><a href="/soft/show.asp?id=255698" title="T/BAGIA_0004—2019HTML5游戲引擎平臺對接接口15頁 ">T/BAGIA_0004—2019HTML5游戲引擎平臺對接接口15頁 </a></li> <li><a href="/soft/show.asp?id=254258" title="網頁設計:網頁界面布局與視覺表現及案例223頁 ">網頁設計:網頁界面布局與視覺表現及案例223頁 </a></li> <li><a href="/soft/show.asp?id=253380" title="網站前端開發技術:HTML和CSS應用技巧377頁 ">網站前端開發技術:HTML和CSS應用技巧377頁 </a></li> <li><a href="/soft/show.asp?id=252725" title="網頁設計:網站人性化評估185頁 ">網頁設計:網站人性化評估185頁 </a></li> <li><a href="/soft/show.asp?id=252629" title="網頁設計:ASP.NET開發學習教程485頁 ">網頁設計:ASP.NET開發學習教程485頁 </a></li> <li><a href="/soft/show.asp?id=251469" title="網頁設計與網站建設制作培訓教程847頁 ">網頁設計與網站建設制作培訓教程847頁 </a></li> <li><a href="/soft/show.asp?id=250474" title="HTML5與CSS3網頁設計與制作培訓教程——從入門到精通450頁 ">HTML5與CSS3網頁設計與制作培訓教程——從入門到精通450頁 </a></li> <li><a href="/soft/show.asp?id=249519" title="T/CAPT_001—2019基于HTML5的融媒體新聞技術規范64頁 ">T/CAPT_001—2019基于HTML5的融媒體新聞技術規范64頁 </a></li> <li><a href="/soft/show.asp?id=245025" title="網頁設計:電商網店設計(2017版)281頁 ">網頁設計:電商網店設計(2017版)281頁 </a></li> <li><a href="/soft/show.asp?id=244607" title="HTML5+CSS3交互設計開發253頁 ">HTML5+CSS3交互設計開發253頁 </a></li> <li>上一資料:<a href="show.asp?id=256958">2019年5G時代下的智能家居競爭格局 201909 64頁</a></li> <li>下一資料:<a href="show.asp?id=256960">2019國醫年鑒 201908 692頁</a></li> </ul> </div> </div> <div class="box box2 detail-comment"> <div class="caption"> <div class="captionL"> <ul> <li id="pl1" onmouseover="setTab('pl',1,2);" class="active">熱門評論</li> <li id="pl2" onmouseover="setTab('pl',2,2);" >全部評論</li> </ul> </div> </div> <div class="content"> <div class="commet-list-box"> <div id="con_pl_1"> <div id='commetcontent'> <ul class="comment-list">    評論摘要(共 <font color="red">0</font> 條,得分 <font color="red">0</font> 分,平均 <font color="red">0</font> 分) <a href="/soft/comment.asp?id=256959">查看完整評論</a> <hr align="center" width="96%" color="#eeeeee" noShade="noShade" size="1" class="HRcomt" /> </ul></div></div> <div id="con_pl_2" class="hide"> <div id='commetcontent2'>   評論摘要(共 <font color="red">0</font> 條,得分 <font color="red">0</font> 分,平均 <font color="red">0</font> 分) <a href="/soft/comment.asp?id=256959">查看完整評論</a> <hr align="center" width="96%" color="#eeeeee" noShade="noShade" size="1" class="HRcomt" /> </div> </div> </div> <div id="comment_post"> <h5>發表評論</h5> <div class="s-bd"> <div class="com-form left"> <dd id='commetcontentNew'></dd> <div id="postComment2"> <form action="/common/comment.asp" method="post" name="commentform"> <input type="hidden" name="postid" value="256959" /> <input type="hidden" name="channelid" value="2" /> <input type="hidden" name="modules" value="2" /> <input type="hidden" name="action" value="save" /> <input type="hidden" name="history" value="0" /> <div class="form-list"> <label for="your_name">昵稱:</label> <input type="text" name="username" value="游客" autocomplete="off" class="input-text input-text-com" id="your_name"><input type="hidden" name="notuser" id="dcmp-submit-guest" /> </div> <div class="form-list"> <label for="your_name">評分:</label><td bgcolor="#FAFAFA"><input type="radio" name="Grade" value="100" checked="">100<input type="radio" name="Grade" value="85">85分<input type="radio" name="Grade" value="70">70分<input type="radio" name="Grade" value="55">55分<input type="radio" name="Grade" value="40">40分<input type="radio" name="Grade" value="25">25分<input type="radio" name="Grade" value="10">10分</td> </div> <div class="form-list"> <label for="your_desc">內容:</label> <textarea class="input-text input-text-com" name="content" id="your_desc"></textarea> </div> <div class="form-list"> <label for="code">驗證碼:</label> <input type="text" name="checkcode" class="input-text input-text-com" id="code"> <div id="js_cache_box"> <img src= "/common/getcode.asp?" id="validateimg" style="cursor:pointer" onclick="this.src=this.src+'?'" title="點擊我更換圖片" alt="點擊我更換圖片" /> </div> </div> <div class="code-box"> <p> <input type="submit" value="" class="com-submit" id="js_com_submit1" onClick='PostComment()'> <input type="checkbox" value="1" id="report" name="apprize"> 勾選,報告編輯 </p> </div> </form> </div></div> <div class="comment-tag right"> <h3>熱門標簽</h3> <div id="hottags"> </div> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> <div class="downgrid01"> <div class="sideBar left"> <div class="sideBox catalog"> <div class="caption"> <h5>欄目分類</h5> </div> <div class="content"> <ul> <li id="tabmenu1"><a href="/soft/list.asp?classid=540" title="建筑土木"><span>建筑土木</span></a></li> <li id="tabmenu2"><a href="/soft/list.asp?classid=526" title="冶金鋼鐵礦產"><span>冶金鋼鐵礦產</span></a></li> <li id="tabmenu3"><a href="/soft/list.asp?classid=12" title="汽車行業"><span>汽車行業</span></a></li> <li id="tabmenu4"><a href="/soft/list.asp?classid=633" title="能源電力"><span>能源電力</span></a></li> <li id="tabmenu5"><a href="/soft/list.asp?classid=311" title="醫療藥品"><span>醫療藥品</span></a></li> <li id="tabmenu6"><a href="/soft/list.asp?classid=644" title="造紙印刷包裝"><span>造紙印刷包裝</span></a></li> <li id="tabmenu7"><a href="/soft/list.asp?classid=524" title="金融保險經濟"><span>金融保險經濟</span></a></li> <li id="tabmenu8"><a href="/soft/list.asp?classid=30" title="物流運輸"><span>物流運輸</span></a></li> <li id="tabmenu9"><a href="/soft/list.asp?classid=4" title="服裝紡織"><span>服裝紡織</span></a></li> <li id="tabmenu10"><a href="/soft/list.asp?classid=6" title="低壓電器"><span>低壓電器</span></a></li> <li id="tabmenu11"><a href="/soft/list.asp?classid=13" title="酒店餐飲"><span>酒店餐飲</span></a></li> <li id="tabmenu12"><a href="/soft/list.asp?classid=14" title="超市連鎖零售"><span>超市連鎖零售</span></a></li> <li id="tabmenu13"><a href="/soft/list.asp?classid=15" title="石油化工"><span>石油化工</span></a></li> <li id="tabmenu14"><a href="/soft/list.asp?classid=310" title="煙酒飲食"><span>煙酒飲食</span></a></li> <li id="tabmenu15"><a href="/soft/list.asp?classid=354" title="機械機電"><span>機械機電</span></a></li> <li id="tabmenu16"><a href="/soft/list.asp?classid=18" title="電子數碼"><span>電子數碼</span></a></li> <li id="tabmenu17"><a href="/soft/list.asp?classid=531" title="電信行業"><span>電信行業</span></a></li> <li id="tabmenu18"><a href="/soft/list.asp?classid=645" title="農林漁牧"><span>農林漁牧</span></a></li> <li id="tabmenu19"><a href="/soft/list.asp?classid=7" title="手機行業"><span>手機行業</span></a></li> <li id="tabmenu20"><a href="/soft/list.asp?classid=643" title="塑膠五金"><span>塑膠五金</span></a></li> <li id="tabmenu21"><a href="/soft/list.asp?classid=10" title="家具行業"><span>家具行業</span></a></li> <li id="tabmenu22"><a href="/soft/list.asp?classid=5" title="皮革鞋帽"><span>皮革鞋帽</span></a></li> <li id="tabmenu23"><a href="/soft/list.asp?classid=9" title="航空行業"><span>航空行業</span></a></li> <li id="tabmenu24"><a href="/soft/list.asp?classid=20" title="日化用品"><span>日化用品</span></a></li> <li id="tabmenu25"><a href="/soft/list.asp?classid=21" title="旅游行業"><span>旅游行業</span></a></li> <li id="tabmenu26"><a href="/soft/list.asp?classid=312" title="媒體廣告文化"><span>媒體廣告文化</span></a></li> <li id="tabmenu27"><a href="/soft/list.asp?classid=355" title="燈具照明"><span>燈具照明</span></a></li> <li id="tabmenu28"><a href="/soft/list.asp?classid=19" title="船舶行業"><span>船舶行業</span></a></li> <li id="tabmenu29"><a href="/soft/list.asp?classid=16" title="IT互聯網"><span>IT互聯網</span></a></li> <li id="tabmenu30"><a href="/soft/list.asp?classid=646" title="水泥行業"><span>水泥行業</span></a></li> <li id="tabmenu31"><a href="/soft/list.asp?classid=313" title="其它行業"><span>其它行業</span></a></li> <li id="tabmenu32"><a href="/sitemap.html" target="_blank" title="更多分類"><span>更多分類</span></a></li> </ul> </div> <div class="boot"></div> </div> <div class="sideBox related"> <div class="caption"> <h5>相關下載</h5> </div> <div class="content"> <ul> <li class="liimg" style=""><a href="/soft/show.asp?id=255698"><img src="http://img.168i.cn/Soft/UploadPic/2019/9/20199315542233690_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=255698">T/BAGIA_0004—2019HTML5游戲引擎平臺對接接口15頁 </a></li><li class="liimg" style=""><a href="/soft/show.asp?id=254258"><img src="http://img.168i.cn/Soft/UploadPic/2019/7/201971710463911177049_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=254258">網頁設計:網頁界面布局與視覺表現及案例223頁 </a></li><li class="liimg" style=""><a href="/soft/show.asp?id=253380"><img src="http://img.168i.cn/Soft/UploadPic/2019/6/20196291028112827270_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=253380">網站前端開發技術:HTML和CSS應用技巧377頁 </a></li><li class="liimg" style=""><a href="/soft/show.asp?id=252725"><img src="http://img.168i.cn/Soft/UploadPic/2019/6/2019614958452139713_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=252725">網頁設計:網站人性化評估185頁 </a></li><li class="liimg" style=""><a href="/soft/show.asp?id=252629"><img src="http://img.168i.cn/Soft/UploadPic/2019/6/20196111028091988717_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=252629">網頁設計:ASP.NET開發學習教程485頁 </a></li><li class="liimg" style=""><a href="/soft/show.asp?id=251469"><img src="http://img.168i.cn/Soft/UploadPic/2019/5/2019551023505769903_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=251469">網頁設計與網站建設制作培訓教程847頁 </a></li><li class="liimg" style=""><a href="/soft/show.asp?id=250474"><img src="http://img.168i.cn/Soft/UploadPic/2019/4/201948950392555706_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=250474">HTML5與CSS3網頁設計與制作培訓教程——從入門到精通450頁 </a></li><li class="liimg" style=""><a href="/soft/show.asp?id=249519"><img src="http://img.168i.cn/Soft/UploadPic/2019/3/201931416283594547_s.jpg" width="100" height="120" border="0" /></a><br /><a href="/soft/show.asp?id=249519">T/CAPT_001—2019基于HTML5的融媒體新聞技術規范64頁 </a></li> </ul> </div> <div class="boot"></div> </div> <div class="sideBox topDown"> <div class="caption"> <h5>熱門推薦下載</h5> </div> <div class="content"> <ul> <li class="list1"><a href="/soft/show.asp?id=257030" title="AutoCAD2018室內設計入門教程(中文版)443頁">AutoCAD2018室內設計入門教程(中文版)443頁</a></li> <li class="list2"><a href="/soft/show.asp?id=256982" title="互聯網公司數據化運營手冊267頁">互聯網公司數據化運營手冊267頁</a></li> <li class="list1"><a href="/soft/show.asp?id=256959" title="HTML5教程(2017)524頁">HTML5教程(2017)524頁</a></li> <li class="list2"><a href="/soft/show.asp?id=256953" title="大數據教學實驗手冊290頁">大數據教學實驗手冊290頁</a></li> <li class="list1"><a href="/soft/show.asp?id=256648" title="網絡用戶數據挖掘:Web文本挖掘技術研究108頁">網絡用戶數據挖掘:Web文本挖掘技術研究108頁</a></li> <li class="list2"><a href="/soft/show.asp?id=256638" title="PPT幻燈片制作高手教程236頁">PPT幻燈片制作高手教程236頁</a></li> <li class="list1"><a href="/soft/show.asp?id=256586" title="數字圖像處理技術253頁">數字圖像處理技術253頁</a></li> <li class="list2"><a href="/soft/show.asp?id=256533" title="電腦維修技術培訓教程207頁">電腦維修技術培訓教程207頁</a></li> </ul> </div> <div class="boot"></div> </div> <div class="sideBox topDown"> <div class="caption"> <h5>本類最新更新</h5> </div> <div class="content"> <ul> <li class="list1"><a href="/soft/show.asp?id=257401" title="數據管理工具——Excel表格與Access數據庫193頁">數據管理工具——Excel表格與Access數據庫193頁</a></li> <li class="list2"><a href="/soft/show.asp?id=257277" title="Web開發:基于知識管理的網頁開發(2018)203頁">Web開發:基于知識管理的網頁開發(2018)203頁</a></li> <li class="list1"><a href="/soft/show.asp?id=257201" title="互聯網創業——網絡直播292頁">互聯網創業——網絡直播292頁</a></li> <li class="list2"><a href="/soft/show.asp?id=257030" title="AutoCAD2018室內設計入門教程(中文版)443頁">AutoCAD2018室內設計入門教程(中文版)443頁</a></li> <li class="list1"><a href="/soft/show.asp?id=256982" title="互聯網公司數據化運營手冊267頁">互聯網公司數據化運營手冊267頁</a></li> <li class="list2"><a href="/soft/show.asp?id=256959" title="HTML5教程(2017)524頁">HTML5教程(2017)524頁</a></li> <li class="list1"><a href="/soft/show.asp?id=256953" title="大數據教學實驗手冊290頁">大數據教學實驗手冊290頁</a></li> <li class="list2"><a href="/soft/show.asp?id=256816" title="公安部:2019全國網民網絡安全感滿意度調查統計報告170頁">公安部:2019全國網民網絡安全感滿意度調查統計報告170頁</a></li> </ul> </div> <div class="boot"></div> </div> </div> </div> </div> <div class="footwrap"> <div class="footer"> <table width="100%" align="center" class="tablestyle"> <tr> <td class="ftd2"> <p class="ftac"><a rel="nofollow" href="/support/about.asp">關于我們</a> | <a rel="nofollow" href="/support/help.asp" target="_blank">幫助(?)</a> | <a rel="nofollow" href="/support/declare.asp" target="_blank">版權聲明</a> | <a href="/soft/shownew.asp" target="_blank">最近更新</a> | <a href="/soft/showbest.asp" target="_blank">推薦資料</a> | <a href="/soft/showhot.asp" target="_blank">熱門資料</a> | <a href="/sitemap.html" target="_blank">網站地圖</a> | <a href="/tags/" target="_blank">TAGS</a> | <a href="/soft/rssfeed.asp">RSS</a> | <a id="clearcookies" href="javascript:void(0)" >清除Cookies</a> | <a href="#">返回頂端</a></p> <p class="fcop">Copyright © 2006-2019 <a href="http://www.gspfib.icu" target="_blank"><font face=Verdana, Arial, Helvetica, sans-serif><b><font color="#CC0000">www.gspfib.icu</font></b></font></a><span>服務郵箱:kefu+168i.cn (+號換成@)</span><br><a rel="nofollow" href="http://www.miitbeian.gov.cn/" target="_blank">蘇ICP備07006633號 </a><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32132202000486" style="display:inline-block;"><img src="http://img.168i.cn/images/gongan.png" style="float:left;"/>蘇公網安備 32132202000486號</a> </p> </td> </tr> </table> </div> </div> <script type="text/javascript" src="http://img.168i.cn/js/content.js"></script> <script type="text/javascript" src="http://img.168i.cn/js/headertop.js"></script> <script type="text/javascript" src="http://img.168i.cn/js/newLoginModal.js"></script> <script> //搜索下拉 niu(xlnav); (function(){ var bp = document.createElement('script'); bp.src = '//push.zhanzhang.baidu.com/push.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <a href="http://www.gspfib.icu/"><span class="STYLE1">狮鹫兑换码2019</span></a> <script>(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?9ed1f3a8f9c3ff069b7b95c01474c743":"https://jspassport.ssl.qhimg.com/11.0.1.js?9ed1f3a8f9c3ff069b7b95c01474c743"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html> <script type="text/javascript" src="/count.asp?cid=2"></script> <script type="text/javascript" src="http://img.168i.cn/js/kf.js"></script>