HTML5精粹:利用HTML5開發令人驚奇的Web站點和革命性應用( 簡體 字) | |
作者:(美) J.D. Gauchat | 類別:1. -> 程式設計 -> 網路編程 -> HTML |
出版社:機械工業出版社 | 3dWoo書號: 33800 詢問書籍請說出此書號! 有庫存 NT售價: 295 元 |
出版日:10/1/2012 | |
頁數:289 | |
光碟數:0 | |
站長推薦: | |
印刷:黑白印刷 | 語系: ( 簡體 字 ) |
ISBN:9787111397717 | 加入購物車 │加到我的最愛 (請先登入會員) |
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證, 繁體書的下載亦請直接連絡出版社) | |
譯者序
前言 第1章 HTML5文檔1 1.1 基本組成1 1.2 全局結構1 1.2.1 Doctype2 1.2.2 <html>2 1.2.3 <head>3 1.2.4 <body>3 1.2.5 <meta>4 1.2.6 <title>5 1.2.7 <link>5 1.3 正文結構6 1.3.1 組織7 1.3.2 <header>9 1.3.3 <nav>9 1.3.4 <section>10 1.3.5 <aside>11 1.3.6 <footer>12 1.4 深入正文13 1.4.1 <article>14 1.4.2 <hgroup>16 1.4.3 <figure>和<figcaption>18 1.5 新舊元素20 1.5.1 <mark>20 1.5.2 <small>20 1.5.3 <cite>21 1.5.4 <address>21 1.5.5 <time>21 1.6 快速參考—HTML5文檔22 第2章 CSS樣式設置與框模型24 2.1 CSS與HTML24 2.2 樣式與結構24 2.2.1 塊級元素25 2.2.2 框模型25 2.3 樣式設置基礎26 2.3.1 內聯樣式26 2.3.2 嵌入樣式27 2.3.3 外部文件27 2.3.4 引用28 2.3.5 通過關鍵字引用28 2.3.6 通過id屬性引用29 2.3.7 通過class屬性引用29 2.3.8 通過任意屬性引用30 2.3.9 通過偽類引用31 2.3.10 新選擇器34 2.4 在模板上應用CSS35 2.5 傳統框模型35 2.5.1 模板35 2.5.2 全局選擇器*37 2.5.3 新的標題層次結構38 2.5.4 聲明新的HTML5元素38 2.5.5 居中顯示正文39 2.5.6 創建主框39 2.5.7 標頭40 2.5.8 導航欄40 2.5.9 節與邊欄41 2.5.10 頁腳42 2.5.11 最后一步44 2.5.12 框尺寸44 2.6 彈性框模型45 2.7 理解彈性框模型52 2.7.1 display53 2.7.2 box-orient53 2.7.3 box-direction54 2.7.4 box-ordinal-group54 2.7.5 box-pack56 2.7.6 box-flex57 2.7.7 box-align60 2.8 快速參考—CSS樣式設置與框模型61 2.8.1 彈性框模型61 2.8.2 偽類與選擇器62 第3章 CSS3屬性63 3.1 新規則63 3.1.1 強大的CSS363 3.1.2 模板63 3.1.3 圓角65 3.1.4 陰影效果66 3.1.5 文字陰影68 3.1.6 @font-face69 3.1.7 線性漸變70 3.1.8 放射漸變71 3.1.9 RGBA71 3.1.10 HSLA72 3.1.11 輪廓73 3.1.12 邊框圖像73 3.1.13 轉換與轉變74 3.1.14 一次實現全部轉換77 3.1.15 動態轉換78 3.1.16 過渡78 3.2 快速參考—CSS3屬性79 第4章 JavaScript81 4.1 JavaScript相關性81 4.2 引入JavaScript81 4.2.1 內聯腳本81 4.2.2 嵌入腳本 82 4.2.3 外部文件84 4.3 新選擇器84 4.3.1 querySelector()85 4.3.2 querySelectorAll()85 4.4 事件處理程序86 4.4.1 內聯事件處理程序87 4.4.2 在屬性中添加事件處理程序87 4.4.3 addEventListener()方法87 4.5 API88 4.5.1 Canvas API89 4.5.2 拖放API89 4.5.3 地理位置API89 4.5.4 存儲API89 4.5.5 文件API90 4.5.6 通信API90 4.5.7 Web Workers API90 4.5.8 歷史API90 4.5.9 離線API91 4.6 外部庫91 4.6.1 jQuery91 4.6.2 Google Maps91 4.7 快速參考—JavaScript92 4.7.1 元素92 4.7.2 選擇器92 4.7.3 事件92 4.7.4 API92 第5章 視頻與音頻94 5.1 在HTML5中播放視頻94 5.1.1 <video>元素95 5.1.2 <video>屬性95 5.2 編程實現視頻播放器96 5.2.1 設計96 5.2.2 編碼98 5.2.3 事件98 5.2.4 方法99 5.2.5 屬性100 5.2.6 實際代碼100 5.3 視頻格式103 5.4 在HTML5中播放音頻103 5.5 編程實現音頻播放器105 5.6 快速參考—視頻與音頻105 5.6.1 元素105 5.6.2 內嵌屬性106 5.6.3 視頻屬性106 5.6.4 事件106 5.6.5 方法106 5.6.6 屬性107 第6章 表單與表單API108 6.1 HTML網頁表單108 6.1.1 <form>元素108 6.1.2 <input>元素109 6.1.3 電子郵件類型 109 6.1.4 搜索類型109 6.1.5 URL類型110 6.1.6 電話號碼類型110 6.1.7 數字類型110 6.1.8 范圍類型110 6.1.9 日期類型111 6.1.10 周類型111 6.1.11 月份類型111 6.1.12 時間類型111 6.1.13 日期與時間類型112 6.1.14 本地日期與時間類型112 6.1.15 顏色類型112 6.2 新屬性112 6.2.1 placeholder屬性113 6.2.2 required屬性113 6.2.3 multiple屬性113 6.2.4 autofocus屬性113 6.2.5 pattern屬性114 6.2.6 form屬性114 6.3 新的表單元素114 6.3.1 <datalist>元素115 6.3.2 <progress>元素115 6.3.3 <meter>元素115 6.3.4 <output>元素115 6.4 表單API115 6.4.1 setCustomValidity()116 6.4.2 無效事件117 6.4.3 實時驗證119 6.4.4 有效性約束121 6.4.5 willValidate122 6.5 快速參考—表單與表單API122 6.5.1 類型122 6.5.2 屬性122 6.5.3 元素123 6.5.4 方法123 6.5.5 事件124 6.5.6 狀態124 第7章 Canvas API125 7.1 準備Canvas125 7.1.1 <canvas>元素125 7.1.2 getContext()126 7.2 在Canvas上繪圖126 7.2.1 繪制矩形126 7.2.2 顏色127 7.2.3 漸變128 7.2.4 創建路徑129 7.2.5 線型134 7.2.6 文字135 7.2.7 陰影136 7.2.8 轉換137 7.2.9 恢復狀態139 7.2.10 globalCompositeOperation139 7.3 處理圖像141 7.3.1 drawImage()141 7.3.2 圖像數據142 7.3.3 圖案144 7.4 在Canvas上實現動畫145 7.5 在Canvas上處理視頻146 7.6 快速參考—Canvas API148 7.6.1 方法149 7.6.2 屬性151 第8章 拖放API152 8.1 Web拖放152 8.1.1 新的事件152 8.1.2 dataTransfer155 8.1.3 dragenter、dragleave與dragend156 8.1.4 選擇有效的源157 8.1.5 setDragImage()158 8.1.6 文件160 8.2 快速參考—拖放API161 8.2.1 事件161 8.2.2 方法162 8.2.3 屬性162 第9章 地理位置API163 9.1 定位163 9.1.1 getCurrentPosition(location)163 9.1.2 getCurrentPosition(location, error)165 9.1.3 getCurrentPosition(location, error, configuration)166 9.1.4 watchPosition(location, error, configuration)167 9.1.5 Google Maps實戰168 9.2 快速參考—地理位置API169 9.2.1 方法169 9.2.2 對象170 第10章 Web存儲API171 10.1 兩個存儲系統171 10.2 sessionStorage172 10.2.1 數據存儲的實現172 10.2.2 創建數據173 10.2.3 讀取數據174 10.2.4 刪除數據175 10.3 localStorage176 10.3.1 storage事件177 10.3.2 存儲空間178 10.4 快速參考—Web存儲 API178 10.4.1 存儲類型179 10.4.2 方法179 10.4.3 屬性179 10.4.4 事件179 第11章 IndexedDB API180 11.1 底層API180 11.1.1 數據庫180 11.1.2 對象和對象庫181 11.1.3 索引181 11.1.4 事務182 11.1.5 對象庫方法182 11.2 實現IndexedDB183 11.2.1 模板183 11.2.2 打開數據庫184 11.2.3 數據庫版本185 11.2.4 對象庫和索引186 11.2.5 添加對象186 11.2.6 獲取對象187 11.2.7 完成代碼并測試188 11.3 列出數據188 11.3.1 游標188 11.3.2 修改順序190 11.4 刪除數據192 11.5 搜索數據192 11.6 快速參考—IndexedDB API195 11.6.1 環境接口(IDBEnvironment和IDBFactory)195 11.6.2 數據庫接口(IDBDatabase)195 11.6.3 對象庫接口(IDBObjectStore)196 11.6.4 游標接口(IDBCursor)196 11.6.5 事務接口(IDBTransaction)197 11.6.6 范圍接口(IDBKeyRange-Constructors)197 11.6.7 錯誤接口(IDBDatabase-Exception)197 第12章 文件199 12.1 文件存儲199 12.2 處理用戶文件199 12.2.1 模板200 12.2.2 讀取文件201 12.2.3 文件屬性202 12.2.4 blob203 12.2.5 事件205 12.3 創建文件206 12.3.1 模板206 12.3.2 硬盤207 12.3.3 創建文件208 12.3.4 創建目錄209 12.3.5 列出文件210 12.3.6 處理文件213 12.3.7 移動213 12.3.8 復制215 12.3.9 刪除216 12.4 文件內容217 12.4.1 寫入內容217 12.4.2 添加內容219 12.4.3 讀取內容220 12.5 真實的文件系統221 12.6 快速參考—文件API225 12.6.1 Blob 接口(文件API)225 12.6.2 File接口(文件API)225 12.6.3 FileReader 接口(文件API)225 12.6.4 LocalFileSystem 接口(文件API:目錄和系統)226 12.6.5 FileSystem 接口(文件API:目錄和系統)226 12.6.6 Entry接口(文件API:目錄和系統)226 12.6.7 DirectoryEntry接口(文件API:目錄和系統)226 12.6.8 DirectoryReader 接口(文件API:目錄和系統)227 12.6.9 FileEntry接口(文件API:目錄和系統)227 12.6.10 BlobBuilder接口(文件API:寫入器)227 12.6.11 FileWriter 接口(文件API:寫入器)227 12.6.12 FileError 接口(文件API和擴展)228 第13章 通信API229 13.1 Ajax Level 2229 13.1.1 獲取數據229 13.1.2 響應屬性231 13.1.3 事件231 13.1.4 發送數據233 13.1.5 跨源請求235 13.1.6 上傳文件 235 13.1.7 真實應用程序237 13.2 跨文檔消息傳遞240 13.2.1 構造函數240 13.2.2 消息事件和屬性240 13.2.3 發送消息241 13.2.4 篩選器和跨源243 13.3 Web套接字245 13.3.1 WS服務器的配置245 13.3.2 構造函數246 13.3.3 方法246 13.3.4 屬性246 13.3.5 事件247 13.3.6 模板247 13.3.7 開始通信248 13.3.8 完整應用程序249 13.4 快速參考—通信API250 13.4.1 XMLHttpRequest Level 2250 13.4.2 Web消息傳遞API252 13.4.3 WebSocket API252 第14章 Web Workers API253 14.1 需要做的艱巨工作253 14.1.1 創建worker253 14.1.2 發送和接收消息253 14.1.3 檢測錯誤256 14.1.4 終止worker257 14.1.5 同步API258 14.1.6 導入腳本259 14.1.7 共享worker 260 14.2 快速參考—Web Workers API263 14.2.1 worker263 14.2.2 專用worker264 14.2.3 共享worker264 第15章 歷史API265 15.1 History 接口265 15.1.1 Web導航265 15.1.2 新增方法265 15.1.3 偽造URL266 15.1.4 跟蹤268 15.1.5 實例269 15.2 快速參考—歷史API272 第16章 脫機API273 16.1 緩存代碼清單273 16.1.1 代碼清單文件273 16.1.2 分類274 16.1.3 注釋274 16.1.4 使用代碼清單文件275 16.2 脫機API276 16.2.1 錯誤276 16.2.2 聯機和脫機277 16.2.3 緩存過程278 16.2.4 進度280 16.2.5 更新緩存281 16.3 快速參考—脫機API283 16.3.1 代碼清單文件283 16.3.2 屬性283 16.3.3 事件284 16.3.4 方法284 結束語285 在當前的環境下,移動應用需求的爆炸性增長在某種程度上加速了HTML5技術的推廣和HTML5標準的進一步成熟。在移動領域中,硬件方面:各種品牌、各種功能、各種尺寸的智能手機和平板電腦等移動設備可謂五花八門;軟件方面:移動操作系統平臺也依然是iOS、Android和Windows Phone三分天下。這種局面為移動應用開發者帶來了巨大的挑戰,如果使用各個平臺原生的技術來開發應用,不僅一款應用只能在一個平臺上運行,而且要完成適配各種型號的硬件設備這一無比繁瑣的任務,開發者在重復發明輪子的同時也限制了自己的創造性。HTML5技術的特性能很好地解決這些問題,這也是全球各大互聯網企業爭相支持和完善HTML5技術和標準的重要原因之一。
作為開發者,掌握HTML5技術已經是大勢所趨,對于有一定HTML基礎的開發者而言,如何才能迅速掌握最新的HTML5技術并提升自己的開發水平?學習并掌握本書的內容,也許是一條捷徑。它是專門為這類開發者量身打造的,系統講解和分析了HTML5的所有新特性和核心技術,極具針對性,極大地降低了學習成本。 本書核心內容: HTML5文檔的基本組成、全局結構、主體,以及新舊元素對比。 CSS的樣式設置與框模型。 CSS3的核心新屬性和新規則。 JavaScript的核心知識。 HTML5中的音頻和視頻特性,以及如何在HTML5中創建視頻和音頻。 HTML5中的各種表單(包含新增表單元素)及其新屬性,以及表單API。 Canvas的特性及其使用,以及Canvas的API。 HTML5中的拖放操作及其API。 HTML5中的地理位置信息及其API。 HTML5中的各種Web存儲方法,以及Web存儲API。 索引數據庫(IndexedDB)的具體操作、實現原理,以及它的API。 HTML5中的文件操作和文件系統,以及文件API。 HTML5中的Ajax、跨文檔消息傳遞、Web套接字等通信技術的原理,以及它們的API。 HTML5中Web Workers的使用方法和實現原理,以及它的API。 HTML5中的歷史接口及其API。 HTML5中的脫機功能及其API。 HTML5并不是舊標記語言的新版本—甚至也不是對已“過時”技術的改進,而是移動設備、云計算和網絡時代的一種網站和應用程序開發新概念。
很久之前,使用簡單版本的HTML,就可以創建基本網頁結構、組織內容和共享信息。最初,這種語言和Web主要是用于實現基于文本的通信方式。 由于HTML的使用范圍有限,因此許多企業都開發了新的語言和軟件,以便在Web中添加新的特性。這些最初的開發逐漸成為強大和流行的插件。簡單游戲和動畫效果很快轉變成復雜的應用程序,給人們帶來全新的體驗,并從此改變了Web的概念。 在所有插件中,Java和Flash是最成功的。它們應用廣泛,并且被認為是互聯網的未來。但是,隨著用戶的增長,而且互聯網從最初的計算機愛好者之間的互聯工具轉變為以商業和社交互動為主的場所,這兩種技術的局限性最終使它們越來越不受歡迎。 Java和Flash最主要的問題在于缺乏集成性。兩者從一開始便以插件形式出現,有時候還需要插入文檔結構中,但是實際上只是與該結構共享屏幕的一部分空間。在應用程序和文檔之間不存在通信能力和集成性。 缺乏集成性的問題越來越嚴重,也為語言的演變做好了準備,使之共享HTML文檔的空間,成為不受插件限制影響的組件。JavaScript是嵌入在瀏覽器中的一種解釋性語言,同時也是一種改善用戶體驗和實現Web功能的方法。然而,在過去幾年里,由于推廣及濫用問題,市場并沒有完全接受這種語言,而且其流行性也有逐漸下降。批評者有著很好的理由反對這種語言。在那段時間里,JavaScript無法替代Flash和Java的功能。甚至,有一個很明顯的現實情況是,Java和Flash限制了Web應用程序的范圍,并且隔離了Web內容,而一些流行特性(如流式視頻)正成為Web的重要組成部分,并且只有通過這些技術才能有效地實現。 盡管取得了很大的成功,但是Java也存在一些缺陷。這種語言具有非常復雜的特性,發展緩慢,缺乏集成性,這些問題都直接限制Java在目前主流Web應用程序中的應用。如果不使用Java,人們只能使用Flash。然而,Flash實際上與其競爭對手具有相同的Web特征,因此注定會退出市場。 同時,訪問Web的軟件在不斷發展。除了增加新特性和提高互聯網訪問速度,瀏覽器還不斷改進其JavaScript引擎。增強的功能帶來了更多的機會,而這種腳本語言也已經做好了準備。 從某種程度上講,那些不使用Java或者Flash的開發人員在這個過程中可以為越來越多的用戶提供創建應用程序所需要的工具。這些開發人員開始在他們的應用程序中以全新的方式編寫JavaScript代碼。這種創新及其令人吃驚的結果引起了越來越多程序員的注意。很快,所謂的“Web 2.0”開始出現,開發者社區對于JavaScript的認識也發生了根本性改變。 顯然,JavaScript是一種允許開發者在網頁上創新和實現特殊效果的語言。近幾年來,全世界的程序員和網頁設計人員使用了很多方法,希望克服這種技術的局限性及一直存在的可移植性問題。JavaScript、HTML和CSS顯然是引領Web變革的最佳組合。 事實上,HTML5正是對這個組合的改進,是將整合這一切的黏合劑。HTML5標準涉及Web的各個方面,也清晰定義每一種技術的用途。從現在開始,HTML負責設置文檔結構(結構元素),CSS則關注于如何將結構轉換為可視化效果和可用性,而JavaScript則負責實現功能和開發完整的Web應用程序。 網站與應用程序之間的界限已經完全消失。所需要的技術也一應具備。網頁的未來是光明的,而將這三種技術(HTML、CSS和JavaScript)演變和整合為一個強大的規范便是將Internet轉化成一個主導的開發平臺。HTML5顯然是朝著這個方向發展的。 重要提示:目前,并非所有的瀏覽器都支持HTML5特性,而且大多特性仍處于設計階段。我們建議您閱讀各個章節,并在最新版本的Google Chrome、 Safari、Firefox或 Internet Explorer上執行示例代碼。Google Chrome基于WebKit,這是一個開源瀏覽器引擎,幾乎支持所有的HTML5特性,因此Google Chrome是一個很好的測試平臺。Firefox是一個很適合開發者使用的優秀瀏覽器,它采用Gecko引擎,同樣也完全支持HTML5。最后,新版本的Internet Explorer(IE9)已經支持HTML5及大部分新特性。 不管使用哪種瀏覽器,一定要注意:優秀的開發者必須在市面上所有瀏覽器上安裝和測試所編寫的代碼。要在每一個瀏覽器上測試本書所提供的示例代碼。 通過以下鏈接可以下載最新版本的瀏覽器: www.google.com/chrome www.apple.com/safari/download www.mozilla.com windows.microsoft.com www.opera.com 本書最后提供了多種兼容舊版瀏覽器的設計方法,使未支持HTML5的瀏覽器也能夠正常訪問網站與應用程序。 |