Thông tin tài liệu
HTML5 Cookbook
HTML5 Cookbook
Christopher Schmitt and Kyle Simpson
Beijing
•
Cambridge
•
Farnham
•
Köln
•
Sebastopol
•
Tokyo
HTML5 Cookbook
by Christopher Schmitt and Kyle Simpson
Published by O'Reilly Media, Inc., , , .
Printing History:
ISBN: 978-1-449-39679-4
1315931630
Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
1. Fundamental Syntax & Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Introduction 1
Specifying the DOCTYPE 1
Problem 1
Solution 1
Discussion 2
See Also 2
Specifying the Character Set 2
Problem 2
Solution 2
Discussion 2
See Also 4
Specifying the Language 4
Problem 4
Solution 4
Discussion 4
See Also 4
Optimizing scripts and links 4
Problem 4
Solution 4
Discussion 5
See Also 5
Adding Document Structure With HTML5’s New Elements 5
Problem 5
Solution 5
Discussion 6
See Also 9
Choosing Between article and section 9
Problem 9
Solution 9
v
Discussion 11
See Also 11
Checking Your Document Outline 11
Problem 11
Solution 11
Discussion 11
See Also 14
Modifying the Document Outline 14
Problem 14
Solution 14
Discussion 14
See Also 14
Emphasizing Text 15
Problem 15
Solution 15
Discussion 15
See Also 15
Adding Importance to Text 16
Problem 16
Solution 16
Discussion 16
See Also 16
Highlighting Text for Reference 17
Problem 17
Solution 17
Discussion 17
See Also 17
Marking Up Small Print 17
Problem 17
Solution 18
Discussion 18
See Also 18
Defining Acronyms & Abbreviations 18
Problem 18
Solution 18
Discussion 19
See Also 19
Adding Links to Block-Level Content 19
Problem 19
Solution 19
Discussion 20
See Also 20
Marking Up Figures and Captions 20
vi | Table of Contents
Problem 20
Solution 20
Discussion 20
See Also 21
Marking Up Dates and Times 21
Problem 21
Solution 21
Discussion 22
What About Microformats? 22
Publication Dates 23
See Also 23
Setting the Stage for Native Expanding and Collapsing 23
Problem 23
Solution 23
Discussion 24
See Also 24
Controlling the Numbering of Your Lists 25
Problem 25
Solution 25
Discussion 25
See Also 26
Hide Content to Show Later 26
Problem 26
Solution 26
Discussion 26
See Also 27
Making Portions of a Page Editable 27
Problem 27
Solution 27
Discussion 27
See Also 28
Set the Stage for Native Drag and Drop 28
Problem 28
Solution 28
Discussion 28
See Also 29
2. Progressive Markup & Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Introduction 31
Adding More Semantic Meaning 31
Problem 31
Solution 32
Discussion 32
Table of Contents | vii
See Also 32
Picking a Markup Style 33
Problem 33
Solution 33
Discussion 33
See Also 34
Understanding Browser Support for HTML5 34
Problem 34
Solution 34
Discussion 35
See Also 35
Making Internet Explorer Recognize HTML5 Elements 35
Problem 35
Solution 35
Discussion 37
See Also 37
Detecting HTML5 Features with JavaScript 38
Problem 38
Solution 38
Discussion 42
See Also 42
Using HTML5 Boilerplate 42
Problem 42
Solution 42
Discussion 44
See Also 45
Validating HTML5 45
Problem 45
Solution 45
Discussion 47
See Also 47
Mapping HTML5 Elements to id and class Names 48
Problem 48
Solution 48
Discussion 50
See Also 51
3. Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Introduction 53
Displaying a Search Input Field 53
Problem 53
Solution 53
Discussion 54
viii | Table of Contents
See Also 55
Contact Information Input Fields 55
Problem 55
Solution 55
Discussion 56
See Also 58
Utilizing Date and Time Input Fields 58
Problem 58
Solution 58
Discussion 59
See Also 61
Number Inputs 61
Problem 61
Solution 61
Discussion 62
See Also 63
Selecting From a Range of Numbers 64
Problem 64
Solution 64
Discussion 64
See Also 65
Selecting Colors 65
Problem 65
Solution 65
Discussion 65
See Also 67
Creating an Editable Drop-down 67
Problem 67
Solution 67
Discussion 67
See Also 69
Requiring a Form Field 69
Problem 69
Solution 69
Discussion 70
See Also 71
Auto-focusing a Form Field 71
Problem 71
Solution 71
Discussion 71
See Also 72
Displaying Placeholder Text 72
Problem 72
Table of Contents | ix
Solution 72
Discussion 73
See Also 73
Disabling Autocomplete 74
Problem 74
Solution 74
Discussion 74
See Also 75
Restricting Values 75
Problem 75
Solution 75
Discussion 75
See Also 77
Making HTML5 Work in Older Browsers 77
Problem 77
Solution 77
Discussion 80
See Also 80
Validating Form Data in Older Browsers with JavaScript 81
Problem 81
Solution 81
Discussion 82
Example: Sample Form 82
Problem 82
Solution 82
Discussion 83
4. Native Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Introduction 85
Adding HTML5 Audio 85
Problem 85
Solution 85
Discussion 88
See Also 90
Manipulating the Audio Stream 90
Problem 90
Solution 90
Discussion 91
See Also 92
Generating audio Using JavaScript 92
Problem 92
Solution 93
Discussion 93
x | Table of Contents
[...]... http://www .oreilly. com/catalog/9781449396794 To comment or ask technical questions about this book, send email to: bookquestions @oreilly. com For more information about our books, courses, conferences, and news, see our website at http://www .oreilly. com Find us on Facebook: http://facebook.com /oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia... What? HTML5 isn't an all or nothing proposition You can pick and choose what works best for you So on HTML5 Elsewhere Feed your HTML5 fix with resources from our partners: Loving HTML5 Semantic Sally Copyright © 2011 HTM5,... has a natural heading See Also HTML5 Doctor has a handy flow chart to help choose the right HTML5 structural elements at http://html5doctor.com/happy-1st-birthday-us/#flowchart Checking Your Document Outline Problem You want to view your document’s content outline Solution Run your page through the HTML5 Outliner tool: http://gsnedders .html5. org/outliner/ Discussion HTML5 has an outline algorithm that... running with HTML5 basics Covering the fundamental recipes, from declaring the DOCTYPE and character set to dealing with ambiguities of the new HTML5 semantics, this chapter helps lay the groundwork for the rest of the book Specifying the DOCTYPE Problem You want to create an HTML5 page Solution Specify the HTML5 DOCTYPE at the very beginning of your page: HTML5, for... "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict With HTML5, the version is dropped from the DOCTYPE This allows HTML5 to be backwards compatible in terms of syntax and, hopefully, makes the transition to HTML5 easier Let’s say you have a site that is valid HTML 4.0, but you want to transition to HTML5 Start with just the DOCTYPE change, and you not only have a valid site, but also a valid HTML5 site Additionally, all browsers... standards mode There are some elements that have changed between HTML4 and HTML5, so some now removed or deprecated parts of your HTML4 document For example, ) might not technically validate as HTML5 See Also The W3C Working Draft discussion on differences between HTML 4 and HTML5 includes DOCTYPE at http://www.w3.org/TR /html5- diff/#doctype Specifying the Character Set Problem You need to define... usually includes the title, author, publisher, and ISBN For example: HTML5 Cookbook by Christopher Schmitt and Kyle Simpson (O’Reilly) Copyright 2011 Christopher Schmitt and Kyle Simpson, 978-1-449-39679-4.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions @oreilly. com xx | Preface How to Contact Us Please address comments... but still validates older documents that do include the attribute See Also The W3C Working Draft discussion on differences between HTML 4 and HTML5 includes changed attributes at http://www.w3.org/TR /html5- diff/#changed-attributes Adding Document Structure With HTML5 s New Elements Problem You want to define your document structure with the new header, footer, nav, aside, section and article elements... DOCTYPE, Now What? Simplified links and scripts HTML5' s more flexible and simplified syntax Block-Level Links With HTML5, as can contain block Looking Back In earlier versions of HTML, you had to Add Structure HTML5 gives us several new elements to add This example utilizes heading... would appear in the document outline is HTML5, for Fun & Profit” from the h1 Even reversing the source order of the two headings still only pulls the highest ranked h1 content into the document outline: Tips, Tricks and Resources HTML5, for Fun & Profit See Also Emily Lewis' in-depth discussion of headings, hgroup and the HTML5 outline at http: //ablognotlimited.com/articles/the-beauty-of-semantic-markup-part-3-headings . HTML5 Cookbook
HTML5 Cookbook
Christopher Schmitt and Kyle Simpson
Beijing
•
Cambridge
•
Farnham
•
Köln
•
Sebastopol
•
Tokyo
HTML5 Cookbook
by. 34
Understanding Browser Support for HTML5 34
Problem 34
Solution 34
Discussion 35
See Also 35
Making Internet Explorer Recognize HTML5 Elements 35
Problem 35
Solution
Ngày đăng: 21/03/2014, 11:57
Xem thêm: oreilly html5 cookbook (2011), oreilly html5 cookbook (2011), Chapter 1. Fundamental Syntax & Semantics, Chapter 2. Progressive Markup & Techniques, Chapter 6. Microdata and Custom Data