編輯推薦
HTML5不僅僅是一種標記語言,它還指代多種獨立的Web標準。你的運氣不錯:這本書涵蓋瞭關於HTML5的一切!本書通過循序漸進的教程和真實的示例,嚮你介紹如何構建Web應用,包括視頻控件、動態圖形、地理定位、離綫功能和針對移動設備的響應式Web設計等。
內容簡介
不依賴插件添加音頻和視頻,構建適用於所有瀏覽器的播放頁麵。
用Canvas創建吸引人的視覺效果,繪製圖形、圖像、文本,播放動畫,運行交互遊戲。
用CSS3將頁麵變活潑,比如添加新奇的字體,利用變換和動畫添加吸引人的效果。
設計更齣色的Web錶單,利用HTML5新增的錶單元素更加高效地收集訪客信息。
一次開發,多平颱運行,實現響應式設計,創建適配桌麵計算機、平闆電腦和智能手機的網站。
讓Web應用擁有桌麵應用的特性,通過開發自給自足的離綫應用,無論用戶能否上網,都可以在本地保存用戶信息。
作者簡介
Matthew MacDonald,著名科技作傢、程序員,撰寫過十幾部技術專著,包括《ASP.NET 4高級程序設計》《精通ASP.NET 4.5(第5版)》,以及Missing Manual係列圖書之Creating a Website、WordPress、Access 2013、Office 2013、Excel 2013、Your Brain和Your Body等。
內頁插圖
精彩書評
★“這本書寫作風格獨樹一幟,內容組織環環相扣,示例精彩,語言通俗易懂。”
——讀者評論
★“這本書真是太棒瞭!它幫助我理解瞭新的HTML5標簽、規則,以及HTML編碼風格的大轉變。如果你從事Web開發,想牢固、全麵地掌握HTML5,我推薦你看看這本書。”
——讀者評論
目錄
前言
第一部分 現代標記
第1章 HTML5 簡介
1.1 HTML5 的故事
1.1.1 XHTML 1.0:更嚴格的標準
1.1.2 XHTML 2:意想不到的失敗
1.1.3 HTML5:起死迴生
1.1.4 HTML:活著的語言
1.2 HTML5 的三個主要原理
1.2.1 不破壞Web
1.2.2 修補牛蹄子路
1.2.3 實用至上
1.3 HTML5標記初體驗
1.3.1 HTML5文檔類型
1.3.2 字符編碼
1.3.3 頁麵語言
1.3.4 添加樣式錶
1.3.5 添加JavaScript
1.3.6 最終結果
1.4 HTML5 語法
1.4.1 放鬆的規則
1.4.2 HTML5 驗證
1.4.3 XHTML 的迴歸
1.5 HTML5 元素傢族
1.5.1 新增的元素
1.5.2 刪除的元素
1.5.3 改變的元素
1.5.4 調整的元素
1.5.5 標準化的元素
1.6 今天開始用HTML5
1.6.1 瞭解瀏覽器支持情況
1.6.2 瀏覽器裝機情況統計
1.6.3 通過Modernizr 檢測功能
1.6.4 使用"膩子腳本"填補功能缺陷
第2章 用語義元素構造網頁
2.1 語義元素
2.2 改造傳統的HTML 頁麵
2.2.1 構造頁麵的老辦法
2.2.2 使用HTML5 構造頁麵
2.2.3 用
添加插圖
2.2.4 用
添加附注
2.3 瀏覽器對語義元素的支持情況
2.3.1 為語義元素添加樣式
2.3.2 使用HTML5"墊片"
2.3.3 Modernizr:一站式解決方案
2.4 使用語義元素設計站點
2.4.1 理解
2.4.2 用
標注導航鏈接
2.4.3 理解區塊
2.4.4 理解
2.4.5 使用標識主要內容
2.5 HTML5 綱要
2.5.1 如何查看綱要
2.5.2 基本綱要
2.5.3 分塊元素
2.5.4 解決一個綱要問題
第3章 編寫更有意義的標記
3.1 迴顧語義元素
3.1.1 使用標注日期和時間
3.1.2 使用標注JavaScript返迴值
3.1.3 使用標注突顯文本
3.2 其他語義標準
3.2.1 ARIA
3.2.2 RDFa
3.2.3 微格式
3.2.4 微數據
3.3 實例:改進"About Me"頁麵
3.4 搜索引擎如何使用元數據
3.4.1 Google Rich Snippets
3.4.2 增強搜索結果
3.4.3 食譜搜索引擎
第4章 構建更好的Web 錶單
4.1 理解錶單
4.2 傳統錶單翻新
4.2.1 通過占位符文本添加提示
4.2.2 焦點:挑選正確的起點
4.3 驗證:阻止錯誤
4.3.1 HTML5 驗證的原理
4.3.2 關閉驗證
4.3.3 驗證樣式掛鈎
4.3.4 使用正則錶達式
4.3.5 自定義驗證
4.4 瀏覽器對Web 錶單和驗證的支持
4.4.1 用Modernizr 檢測支持情況
4.4.2 用HTML5Forms 兼容
4.5 新的輸入控件
4.5.1 電子郵件地址
4.5.2 網址
4.5.3 搜索框
4.5.4 電話號碼
4.5.5 數值
4.5.6 滑動條
4.5.7 日期和時間
4.5.8 顔色
4.6 新元素
4.6.1 使用
4.6.2 進度條和計量條
4.6.3 使用和
創建工具條和菜單
4.7 網頁中的HTML 編輯器
4.7.1 使用contenteditable 編輯元素
4.7.2 使用designMode 編輯頁麵
第二部分 視頻、圖形和特效
第5章 音頻與視頻
5.1 網絡視頻的演變
5.2 HTML5 音頻與視頻
5.2.1 使用
5.2.2 預加載媒體文件
5.2.3 自動播放
5.2.4 循環播放
5.2.5 瞭解
5.3 HTML5 媒體格式
5.3.1 談談格式
5.3.2 瀏覽器對媒體格式的支持情況
5.4 後備措施:如何討好每一款瀏覽器
5.4.1 支持多種格式
5.4.2 添加Flash 後備措施
5.5 使用JavaScript 控製播放器
5.5.1 添加音效
5.5.2 創建自定義視頻播放器
5.5.3 JavaScript 媒體播放器
5.6 視頻字幕
5.6.1 標記時間的文本軌道和WebVTT
5.6.2 使用添加字幕
5.6.3 瀏覽器對視頻字幕的支持情況
第6章 美妙的CSS3 字體和特效
6.1 使用CSS3
6.1.1 選擇一:用能用的
6.1.2 選擇二:將CSS 功能作為增強
6.1.3 選擇三:Modernizr
6.1.4 有開發商前綴的特定於瀏覽器的樣式
6.2 多變的盒子
6.2.1 透明
6.2.2 圓角
6.2.3 背景
6.2.4 陰影
6.2.5 漸變
6.3 創建過渡效果
6.3.1 基本的顔色過渡
6.3.2 更多的過渡思路
6.3.3 用JavaScript 觸發過渡
6.3.4 變換
6.3.5 使用變換的過渡
6.4 Web 字體
6.4.1 Web 字體格式
6.4.2 給網站找個字體
6.4.3 從Font Squirrel 獲取免費字體
6.4.4 準備一個網絡字體
6.4.5 用榖歌更簡單地使用Web字體
6.4.6 多欄文本
第7章 CSS3 與響應式Web 設計
7.1 響應式設計基礎
7.1.1 流式布局
7.1.2 流式圖片
7.1.3 流式排版
7.1.4 理解視口
7.2 使用媒體查詢適配布局
7.2.1 媒體查詢
7.2.2 創建簡單的媒體查詢
7.2.3 構建移動設備友好的布局
7.2.4 媒體查詢的高級條件
7.2.5 替換整個樣式錶
7.2.6 識彆特定的移動設備
第8章 基本Canvas 繪圖
8.1 Canvas 起步
8.1.1 畫直綫
8.1.2 路徑與形狀
8.1.3 繪製麯綫
8.1.4 變換
8.1.5 透明度
8.1.6 閤成操作
8.2 構建基本的畫圖程序
8.2.1 準備工作
8.2.2 在畫布上繪圖
8.2.3 將畫布保存為圖像
8.3 瀏覽器對Canvas 的支持情況
8.3.1 用ExplorerCanvas 兼容Canvas
8.3.2 用FlashCanvas 兼容Canvas
8.3.3 Canvas 後備及功能檢測
第9章 高級Canvas 技術:交互性和動畫
9.1 高級Canvas 繪圖
9.1.1 繪製圖像
9.1.2 裁剪、切割和伸縮圖片
9.1.3 繪製文本
9.2 陰影與填充
9.2.1 添加陰影
9.2.2 填充圖案
9.2.3 填充漸變
9.2.4 綜閤示例:繪製圖解
9.3 賦予圖形交互能力
9.3.1 記錄繪製的內容
9.3.2 基於坐標的碰撞檢測
9.4 給Canvas 添加動畫
9.4.1 基本的動畫
9.4.2 多物體動畫
9.5 實例:迷宮遊戲
9.5.1 布置迷宮
9.5.2 讓笑臉動起來
9.5.3 基於像素顔色的碰撞檢測
第三部分 構建Web 應用
第10章 數據存儲
10.1 Web 存儲簡介
10.1.1 存儲數據
10.1.2 實戰:保存遊戲中的最後位置
10.1.3 瀏覽器對Web 存儲的支持情況
10.2 深入Web 存儲
10.2.1 刪除數據項
10.2.2 查找所有數據項
10.2.3 保存數值和日期
10.2.4 保存對象
10.2.5 響應存儲變化
10.3 讀取文件
10.3.1 取得文件
10.3.2 用讀取文本文件
10.3.3 替換標準的上傳控件
10.3.4 一次讀取多個文件
10.3.5 通過拖曳讀取圖片文件
10.3.6 瀏覽器對File API 的支持情況
10.4 IndexDB:瀏覽器的數據庫引擎
10.4.1 數據對象
10.4.2 創建並連接數據庫
10.4.3 在數據庫中保存數據
10.4.4 在數據錶中查詢所有數據
10.4.5 查詢單條數據
10.4.6 刪除一條數據
10.4.7 瀏覽器對IndexedDB 的支持情況
第11章 離綫應用
11.1 通過描述文件緩存資源
11.1.1 創建描述文件
11.1.2 使用描述文件
11.1.3 把描述文件放到Web 服務器
11.1.4 更新描述文件
11.1.5 瀏覽器對離綫應用的支持情況
11.2 實用緩存技術
11.2.1 訪問未緩存的文件
11.2.2 添加後備內容
11.2.3 檢測連接
11.2.4 用JavaScript 監聽更新
第12章 與Web 服務器通信
12.1 嚮Web 服務器發送消息
12.1.1 XMLHttpRequest 對象
12.1.2 嚮Web 服務器提問
12.1.3 取得新內容
12.2 服務器發送事件
12.2.1 消息格式
12.2.2 通過服務器腳本發送消息
12.2.3 在網頁中處理消息
12.2.4 輪詢服務器端事件
12.3 Web Socket
12.3.1 Web Socket 服務器
12.3.2 簡單的Web Socket 客戶端
12.3.3 使用現成的Web Socket服務器
第13章 地理定位、Web Worker 和曆史管理
13.1 地理定位
13.1.1 地理定位的基本原理
13.1.2 查找訪客的坐標
13.1.3 處理錯誤
13.1.4 設置地理定位選項
13.1.5 顯示地圖
13.1.6 跟蹤訪客移動
13.1.7 瀏覽器對地理定位的兼容情況
13.2 Web Worker
13.2.1 費時的任務
13.2.2 把任務放在後颱
13.2.3 處理Worker 錯誤
13.2.4 取消後颱任務
13.2.5 傳遞復雜消息
13.2.6 瀏覽器對Web Worker 的兼容情況
13.3 曆史管理
13.3.1 URL 問題
13.3.2 以往的解決方案:hashbang URL
13.3.3 HTML5 的方案:會話曆史
13.3.4 瀏覽器對會話曆史的支持情況
第四部分 附 錄
附錄A CSS 基礎
附錄B JavaScript:頁麵的大腦
精彩書摘
HTML5簡介
如果說HTML是一部電影,那HTML5就是一次大轉摺。HTML本來是不會活過21世紀的。官方Web標準組織W3C早在1998年就已經對HTML撒手不管瞭。W3C把未來都寄托在XHTML這個更具現代特色的後續標準身上,XHTML被視為HTML的嚴肅整潔版。 但XHTML舉步維艱,是一群被剝奪瞭話語權的人,讓HTML起死迴生並為本書將要探討的功能奠定瞭基礎。
在本章裏,你會瞭解HTML死亡的原因,以及它又是怎樣復活的;瞭解HTML5的設計原理與功能;還將見識惱人的瀏覽器支持問題。在這一章,你將第一次看到真正的HTML5文檔。
1.1 HTML5的故事
HTML的基本思想——使用元素為內容添加結構——從Web誕生以來就沒有變過。事實上,即使是最陳舊的網頁,在最新的瀏覽器中仍然可以得到完美的呈現。
年長和成功也會帶來風險,那就是所有人都想取代你!1998年,W3C停止瞭對HTML的維護,作為對它的改進,開始製定一個基於XML的後續版本——XHTML 1.0。
1.1.1 XHTML 1.0:更嚴格的標準
XHTML與HTML的語法絕大部分都是相同的,隻不過要求更嚴格。很多以前不夠嚴謹的HTML標記,在XHTML中都變成瞭不能接受的。
例如,假設你想把標題中的最後一個詞標記為斜體,本來應該寫:
The Life of a Duck
但你一不小心放錯瞭最後兩個標簽的位置:
The Life of a Duck
瀏覽器在遇到這個稍微有點亂的標記之後,能明白你想乾什麼。於是,它就一聲不吭地把最後一個詞變成斜體。可是,標簽不匹配違反瞭XHTML的規定。如果把頁麵復製到一個XHTML驗證器中(或使用Dreamweaver之類的網頁設計工具時),你就會看到一個警告,告訴你哪裏有錯誤。從Web設計的角度看,XHTML基於嚴格規則的這種提示很有用,因為你可以發現微小的錯誤,這些錯誤會導緻在不同瀏覽器中顯示結果不一緻(這些錯誤在編輯和增強頁麵時還可能導緻更嚴重的問題)。
最初,XHTML獲得瞭成功。由於厭倦瞭瀏覽器的古怪行為和怎麼寫都可以通過的不正常狀態,專業的Web開發人員對XHTML還是非常擁護的。後來,XHTML標準又強迫他們養成更好的習慣,同時放棄HTML中那些並不完善的格式化功能。可是,與XML工具協同,降低自動化程序處理頁麵的難度,方便地移植到移動平颱,以及XHTML語言自身的可擴展性等這些預期的好處,從來沒有在XHTML身上實現過。
即便如此,XHTML仍然成為最嚴肅的Web設計師所遵循的標準。盡管看起來所有人都挺滿意的,但實際上卻存在一個潛規則:瀏覽器雖然理解XHTML標記,但卻不會嚴格地按照標準執行錯誤檢查。這就意味著頁麵仍然可以不遵守XHTML規則,瀏覽器則視而不見。事實上,沒有什麼可以阻止Web開發人員把亂糟糟的標記和陳舊的HTML內容混在一起,然後還說這是XHTML頁麵。世界上根本就沒有一個瀏覽器站齣來反對這種行為。這種情況讓那些負責XHTML標準的人深感不安。
1.1.2 XHTML 2:意想不到的失敗
解決方案就是通過XHTML 2來扭轉這個亂糟糟的局麵。這個新版本規定瞭嚴格的錯誤處理規則,強製要求瀏覽器拒絕無效的XHTML 2頁麵,同時也摒棄瞭很多從HTML沿襲下來的怪異行為和編碼慣例。比如,以編號方式(
、
、
等)區分標題的方法被一個新的元素取代,這個元素的重要性取決於它在網頁中的位置。類似地,由於允許Web開發人員將任何元素轉換為鏈接,元素的地位一落韆丈。而元素因為增加瞭一種提供替代內容的新方式,也喪失瞭原有的alt屬性。
這些變化是XHTML 2的典型特徵。從理論上看,這些改變的目的是讓網頁更整潔也更有邏輯性。而從實踐角度說,這就要求Web設計人員必須改變以前編寫網頁的方式(已經存在的網頁必須更新),但付齣這些代價卻沒有增加任何新功能,讓這種改變失去瞭價值。與此同時,XHTML 2還宣布作廢瞭幾個眾所周知的元素,比如用於加粗文本的、用於變斜體的和用於在網頁中嵌入另一個網頁的
但最糟糕的,還是慢得要死的製定過程。XHTML 2的製定過程整整拖瞭5年纔完成,開發人員的激情早已蕩然無存瞭。
1.1.3 HTML5:起死迴生
幾乎與此同時,從2004年開始就有一群人從另外一個角度展望Web的未來。他們想的不是從HTML中挑齣各式各樣的毛病(或者乾脆說是主張“不純粹的哲學觀”),而是它還缺少什麼Web開發人員編碼時急需的功能。
歸根結底,HTML最早是作為顯示文檔的手段齣現的。輔之以JavaScript,它其實已經演變成瞭一個係統,可以開發搜索引擎、網上商店、在綫地圖、郵件客戶端以及其他各種能夠想象得到的Web應用。雖然設計巧妙的Web應用可以實現很多令人贊嘆的功能,但開發這樣的應用遠非易事。多數Web應用都得手動編寫大量JavaScript代碼,還要用到一個或多個流行的JavaScript工具包,乃至在Web服務器上運行的服務器端模塊。要讓所有這些方麵在不同的瀏覽器中都能緊密配閤不齣差錯是一個挑戰。即使是贏得瞭挑戰,你還要記住把這些方麵聯係到一起的那些錯綜復雜的細節。
開發瀏覽器的人對這種情況特彆關注。於是,來自Opera Software(開發Opera瀏覽器的公司)和Mozilla Foundation(開發Firefox瀏覽器的組織)的一些具有超前意識的人紛紛建言,希望XHTML能加入一些對開發人員更有用的功能。但他們的建議並沒有被采納,結果Opera、Mozilla和蘋果公司自發地組建瞭WHATWG(Web Hypertext Application Technology Working Group,Web超文本應用技術工作組),緻力於尋找新的解決方案。
WHATWG的目的不是拋棄HTML,而是考慮以無障礙、嚮後兼容的方式去擴展它。這個組織最早的工作成果包
HTML5秘籍(第2版) 下載 mobi epub pdf txt 電子書