第1页 / 共519页
第2页 / 共519页
第3页 / 共519页
第4页 / 共519页
第5页 / 共519页
第6页 / 共519页
第7页 / 共519页
第8页 / 共519页
HTML5: The Missing Manual, 2nd Edition.pdf
Contents
The Missing Credits
Introduction
Part One: Modern Markup
Chapter 1: Introducing HTML5
The Story of HTML5
Three Key Principles of HTML5
Your First Look at HTML5 Markup
A Closer Look at HTML5 Syntax
HTML5’s Element Family
Using HTML5 Today
Chapter 2: Structuring Pages with Semantic Elements
Introducing the Semantic Elements
Retrofitting a Traditional HTML Page
Browser Compatibility for the Semantic Elements
Designing a Site with the Semantic Elements
The HTML5 Outlining System
Chapter 3: Writing More Meaningful Markup
The Semantic Elements Revisited
Other Standards That Boost Semantics
A Practical Example: Retrofitting an “About Me” Page
How Search Engines Use Metadata
Chapter 4: Building Better Web Forms
Understanding Forms
Revamping a Traditional HTML Form
Validation: Stopping Errors
Browser Support for Web Forms and Validation
New Types of Input
New Elements
An HTML Editor in a Web Page
Part Two: Video, Graphics,
and Glitz
Chapter 5: Audio and Video
The Evolution of Web Video
Introducing HTML5 Audio and Video
Understanding the HTML5 Media Formats
Fallbacks: How to Please Every Browser
Controlling Your Player with JavaScript
Video Captions
Chapter 6: Fancy Fonts and Effects with CSS3
Using CSS3 Today
Building Better Boxes
Creating Effects with Transitions
Web Fonts
Chapter 7: Responsive Web Design with CSS3
Responsive Design: The Basics
Adapting Your Layout with Media Queries
Chapter 8: Basic Drawing with the Canvas
Getting Started with the Canvas
Building a Basic Paint Program
Browser Compatibility for the Canvas
Chapter 9: Advanced Canvas: Interactivity and Animation
Other Things You Can Draw on the Canvas
Shadows and Fancy Fills
Making Your Shapes Interactive
Animating the Canvas
A Practical Example: The Maze Game
Part Three: Building Web Apps
Chapter 10: Storing Your Data
Web Storage Basics
Deeper into Web Storage
Reading Files
IndexedDB: A Database Engine in a Browser
Chapter 11: Running Offline
Caching Files with a Manifest
Practical Caching Techniques
Chapter 12: Communicating with the Web Server
Sending Messages to the Web Server
Server-Sent Events
Web Sockets
Chapter 13: Geolocation, Web Workers, and History Management
Geolocation
Web Workers
History Management
Part Four: Appendixes
Appendix A: Essential CSS
Adding Styles to a Web Page
The Anatomy of a Style Sheet
Slightly More Advanced Style Sheets
A Style Sheet Tour
Appendix B: JavaScript: The Brains of Your Page
How a Web Page Uses JavaScript
A Few Language Essentials
Interacting with the Page
Index
HTML5
2nd Edition
The book that should have been in the box®
Matthew MacDonald
Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo
HTML5: The Missing Manual, 2nd Edition
by Matthew MacDonald
Copyright © 2014 Matthew MacDonald. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc.,
1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use.
Online editions are also available for most titles (http://my.safaribooksonline.com).
For more information, contact our corporate/institutional sales department:
(800) 998-9938 or corporate@oreilly.com.
August 2011:
December 2013: Second Edition
First Edition.
Revision History for the Second Edition:
2013-12-09
First release
See http://oreil.ly/html5tmm_2e for release details.
The Missing Manual is a registered trademark of O’Reilly Media, Inc. The Missing
Manual logo, and “The book that should have been in the box” are trademarks of
O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to
distinguish their products are claimed as trademarks. Where those designations
appear in this book, and O’Reilly Media is aware of a trademark claim, the
designations are capitalized.
While every precaution has been taken in the preparation of this book, the publisher
and author assume no responsibility for errors or omissions, or for damages resulting
from the use of the information contained in it.
ISBN-13: 978-1-4493-6326-0
[LSI]
Contents
The Missing Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Part One: Modern Markup
CHAPTER 1:
Introducing HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Story of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Three Key Principles of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Your First Look at HTML5 Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
A Closer Look at HTML5 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
HTML5’s Element Family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Using HTML5 Today . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
CHAPTER 2: Structuring Pages with Semantic Elements . . . . . . . . . . . . . . . 37
Introducing the Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38
Retrofitting a Traditional HTML Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39
Browser Compatibility for the Semantic Elements . . . . . . . . . . . . . . . . . . . . . 51
Designing a Site with the Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 53
The HTML5 Outlining System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65
CHAPTER 3: Writing More Meaningful Markup . . . . . . . . . . . . . . . . . . . . . . . . . 75
The Semantic Elements Revisited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Other Standards That Boost Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
A Practical Example: Retrofitting an “About Me” Page . . . . . . . . . . . . . . . . .88
How Search Engines Use Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
CHAPTER 4: Building Better Web Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Understanding Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Revamping a Traditional HTML Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Validation: Stopping Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Browser Support for Web Forms and Validation . . . . . . . . . . . . . . . . . . . . . . 119
New Types of Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
New Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
An HTML Editor in a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
iii
Part two: video, Graphics, and Glitz
CHAPTER 5: Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
143
The Evolution of Web Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Introducing HTML5 Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Understanding the HTML5 Media Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Fallbacks: How to Please Every Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Controlling Your Player with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Video Captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
CHAPTER 6: Fancy Fonts and Effects with CSS3. . . . . . . . . . . . . . . . . . . . . . . 177
Using CSS3 Today. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Building Better Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Creating Effects with Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
CHAPTER 7: Responsive Web Design with CSS3 . . . . . . . . . . . . . . . . . . . . . . 221
Responsive Design: The Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
Adapting Your Layout with Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
CHAPTER 8: Basic Drawing with the Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Getting Started with the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246
Building a Basic Paint Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263
Browser Compatibility for the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
CHAPTER 9: Advanced Canvas: Interactivity and Animation . . . . . . . . . . 275
Other Things You Can Draw on the Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . .275
Shadows and Fancy Fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Making Your Shapes Interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293
Animating the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
A Practical Example: The Maze Game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307
Part three: Building Web Apps
CHAPTER 10: Storing Your Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Web Storage Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320
Deeper into Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326
Reading Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
IndexedDB: A Database Engine in a Browser . . . . . . . . . . . . . . . . . . . . . . . . 340
CHAPTER 11: Running Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Caching Files with a Manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .356
Practical Caching Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366
iv
COntents
CHAPTER 12: Communicating with the Web Server . . . . . . . . . . . . . . . . . . . . 375
Sending Messages to the Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .376
Server-Sent Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .386
Web Sockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .393
CHAPTER 13: Geolocation, Web Workers, and History Management . . . 401
Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
History Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .425
Part Four: Appendixes
APPENDIX A: Essential CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Adding Styles to a Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .435
The Anatomy of a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .436
Slightly More Advanced Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
A Style Sheet Tour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
APPENDIX B: JavaScript: The Brains of Your Page . . . . . . . . . . . . . . . . . . . . . 451
How a Web Page Uses JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .452
A Few Language Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .459
Interacting with the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
COntents
v
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
