通過你能夠在項目中直接使用的眾多實用配方,這本手冊可以幫助你贏得HTML5的多個功能的實踐經(jīng)驗。從標記語義、Web表單以及音頻和視頻元素到諸如地理定位和富JavaScript API之類的相關(guān)技術(shù),你將應(yīng)用各種知識來獲取解決問題的明確方案。
《HTML5 Cookbook(影印版)》每個內(nèi)容豐富的配方都包括示例代碼和針對方案為何和如何生效的詳細討論。對于中等水平的人來說,這本手冊是成長為高級Web和移動互聯(lián)網(wǎng)開發(fā)者的最佳選擇,它可以讓你選擇適合你的HTML5特性——并且?guī)椭闶煜て溆嗟牟糠帧?
《HTML5 Cookbook(影印版)》內(nèi)容包括:測試瀏覽器的HTML5支持度,并且使用特定技術(shù)來應(yīng)用不支持的特性、了解HTML5如何使得Web表單的實現(xiàn)變得更加簡單、克服實現(xiàn)本地音頻和視頻元素的挑戰(zhàn)、學(xué)習(xí)在ARIA無障礙訪問原則下使用HTML5的技術(shù)、探索各種示例,包括在你的應(yīng)用中使用地理定位數(shù)據(jù)、利用繪制圖像、使用透明特性、增加漸變色和模式等等、通過多個高級javascript API把HTML5特性帶入現(xiàn)實生活中。
Happy Cog,交互開發(fā)部主管Christopher Schmitt是Heatvision.com公司的首席工程師。這是一家處理新媒體事件、設(shè)計和發(fā)布的公司。他從1993年就開始從事與Web相關(guān)的工作,同時也是《CSS Cookbook》(O'Reilly)的作者。
Kyle Simpson,是來自于德克薩斯州Austin公司的JavaScript系統(tǒng)架構(gòu)師。他主要關(guān)注于JavaScript、Web性能優(yōu)化和“中端”應(yīng)用架構(gòu)。Kyle還維護著若干個開源項目,包括LABjs。
Preface
1.FundamentaISyntaxand Semantics
1.1 Specifying the DOCTYPE
1.2 Specifying the Character Set
1.3 Specifying the Language
1.4 Optimizing s and s
1.5 Adding Document Structure with HTML5's New Elements
1.6 Choosing Between and
1.7 Checking Your Document Outline
1.8 Modifying the Document Outline
1.9 Emphasizing Text
1.10 Addinglmportance to Text
1.11 Highlighting Text for Reference
1.12 Marking Up Sma I IP rint
1.13 Defining Acronyms and Abbreviations
1.14 Adding Links to Block-Level Content
1.15 Marking Up Figures and Captions
1.16 Marking Up Dates and Times
1.17 Setting the Stage for Native Expanding and Collapsing
1.18 Controlling the Numbering of Your Lists
1.19 Hiding Content to Show Later
1.20 Making Portions of a Page Editable
1.21 Setting the Stage for Native Drag-and-Drop
2.Progressive Markup and Techniques
2.1 Adding More Seruantic Meaning
2.2 Picking a.Markup Style
2.3 Understanding Browser Support for HTML5
2.4 Making Internet Explorer Recognize HTML5 Elements
2.5 Detecting HTML5 Features with java Script
2.6 Using HTML5 Boilerplate
2.7 Validating HTML5
2.8 Mapping HTML5 Elements to ID and Class Names
3. Forms
3.1 Displaying a Search Input Field
3.2 Contact Information Input Fields
3.3 Utilizing Date and Time Input Fields
3.4 Numberlnputs
3.5 Selecting from a Range of Numbers
3.6 Selecting Colors
3.7 Creating an Editable Drop-Down
3.8 Requiring a Form Field
3.9 Auto focusing a Form Field
3.10 Displaying Placeholder Text
3.11 Disabling Auto complete
3.12 Restricting Values
3.13 Making HTML5 Work in Older Browsers
3.14 Validating Form Data in Older Browsers with java Script
3.15 Example: Sample Form
4.Native Audio
4.1 Adding HTML5 Audio
4.2 Manipulating the Audio Stream
4.3 Generating Using java Script
4.4 Visualizing Using
4.5 Sample Design: Custom Audio Player
5.Native Video
5.1 Adding HTML5 Video
5.2 Ensuring Multi-Browser Video Support
5.3 Setting Video Dimensions
5.4 Displaying a Placeholder Image Before Video Plays
5.5 Making Video Loop
5.6 Sample Design: Manipulating Video with
6.Mkrodata and Custom Data
6.1 Adding Micro data to Markup
6.2 Using Micro data and Schema.org
6.3 Adding Custom Data to Markup
6.4 Accessing Custom Data with java Script
6.5 Manipulating Custom Data
6.6 Example: Creating a Map Application Using Custom Data
……
7.Accessibility
8.Geolocation
9.
10.Advanced HTML5 JavaScript
Appendix: HTML5 Resources
Index
Discussion Browsers render the video player according to the dimensions you assign, not the resolution of your actual video. Using different dimensions might lead to a loss in quality by expanding a video beyond its native resolution; the same goes for scaling down a large video simply to fit into a small space.
So, when possible, use the same dimension values for the video element as for the vide of ile itself, and don't resize your video with width and height. Technically speaking, the width and height of a video element do not need to be set as browsers default to inheriting the dimensions of the video file itself. The drawback to this approach is that if the dimensions are not set, browsers won't know what space to reserve for your video and may have to redraw your page after downloading the videodata, The width and height values need to be set in CSS pixels as integers and not aspercentages or other values. Adding dimension values helps browsers more efficiendyrender your pages, which usually results in a better user experience. Since you probably don't want to use width and height to resize your video to something other than its native dimensions, you can instead use encoding software to specify ther esolution.
……