HTML5入门与多媒体应用实战

需积分: 10 70 浏览量更新于2024-07-22 收藏 7.6MB PDF 举报

"Jump Start HTML5" 是一本深入浅出的教程，专为学习和掌握HTML5技术的读者精心设计。该系列书籍强调实践性和简洁性，适合那些已经熟悉Bootstrap基础但希望进一步探索HTML5特性的读者。作者在讲解中将复杂的技术分解为易于理解的部分，使学习者能够迅速上手。本系列内容涵盖了HTML5的核心概念，从基础出发，逐步深入。首先，"Basics: What is HTML5?" 引导读者了解HTML5的历史背景、目的和主要特性。接着，"The Anatomy of HTML5" 解析HTML5文档结构，包括新的元素和属性，如`<header>`, `<footer>`, 和 `<section>` 等，提升页面的可访问性和结构清晰度。 "HTML5 Forms" 部分介绍了如何利用HTML5增强表单功能，如`<input type="date">` 和 `<select multiple>`。多媒体是HTML5的一大亮点，"Multimedia, Audio, and Video" 部分指导读者如何利用HTML5原生支持的音频和视频标签处理媒体内容，以及如何优化媒体资源的准备和播放。 "Canvas & SVG" 是关于矢量图形和绘图技术的章节，包括canvas API和SVG（Scalable Vector Graphics）的基础介绍，如何创建动态图形、处理浏览器兼容性问题，以及使用它们来制作复杂的视觉效果。 "Offline Apps" 部分着重于离线应用开发，讲解如何利用HTML5的离线存储机制（Application Cache 和 Web Storage），以及客户端数据库来存储数据，确保网站即使在无网络连接时也能提供基本服务。这部分内容对于构建响应式和用户体验良好的应用程序至关重要。最后，"APIs" 节目介绍了Web Workers和Geolocation API等高级特性，帮助读者理解如何利用Web平台提供的各种接口扩展网站功能，提升交互性和数据获取能力。 "Jump Start HTML5" 是一个全面且实用的指南，无论是初学者还是有一定经验的开发者，都能从中找到适合自己的学习路径，快速掌握HTML5的最新技术和最佳实践。通过阅读和实践这些章节，读者将能够构建更加现代和功能丰富的网页应用。

Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Inspecting Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Testing for Web Storage Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Setting Up Our HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Saving Values With localStorage.setItem() . . . . . . . . . . . . . . . . 201

Adding an Event Listener . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Using localStorage.setItem to Update Existing Values . . . . 203

Retrieving Values With localStorage.getItem() . . . . . . . . . . . . . 203

Alternative Syntaxes for Setting and Getting Items . . . . . . . . . . . 205

Looping Over Storage Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Clearing the Storage Area With localStorage.clear() . . . . . . . . 207

Storage Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Listening for the Storage Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

The StorageEvent Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Storage Events Across Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Determining Which Method Caused the Storage Event . . . . . . . . 209

Storing Arrays and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Limitations of Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Chapter 25 Offline Apps: Storing Data With

Client-side Databases . . . . . . . . . . . . . . . . . . 215

The State of Client-side Databases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

About IndexedDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Setting up Our HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Creating a Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Adding an Object Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Adding a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Retrieving and Iterating Over Records . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Creating a Cursor Transaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Retrieving a Subset of Records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Retrieving or Deleting Individual Entries . . . . . . . . . . . . . . . . . . . . . . . . . 228

Updating a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Deleting a Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Wrapping Up and Learning More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Chapter 26 APIs: Overview . . . . . . . . . . . . . . . . . . . . . . . . . . 233

A Quick Tour of the HTML5 APIs Covered . . . . . . . . . . . . . . . . . . . . . . . . 233

What You Are Going to Learn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Checking Browser Compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

Setting Up the Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Chapter 27 APIs: Web Workers . . . . . . . . . . . . . . . . . . . . . 239

Introduction and Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Passing JSON data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Web Worker Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

More Advanced Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Inline Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Creating Subworkers Inside Workers . . . . . . . . . . . . . . . . . . . . . . . . 246

Using External Scripts within Workers . . . . . . . . . . . . . . . . . . . . . . 246

Security Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Polyfills for Older Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Chapter 28 APIs: The Geolocation API . . . . . . . . . . 249

Hitting the Surface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Continuously Monitoring Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

Accuracy of Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

xvi

Chapter 29 APIs: Server Sent Events . . . . . . . . . . . . . 255

The Motivation for SSEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

The API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

The EventStream Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

How About a Little JSON? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Associating an Event ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Creating Your Own Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Handling Reconnection Timeout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Closing a Connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

A Sample Event Source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Chapter 30 APIs: The WebSocket API . . . . . . . . . . . 263

The JavaScript API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Sending Binary Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Sample Server Implementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Chapter 31 APIs: The Cross-document

Messaging API . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

The JavaScript API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Basic Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Detecting the Readiness of the Document . . . . . . . . . . . . . . . . . . . . . . . 275

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

xvii

Preface

HTML (HyperText Markup Language) is the predominant language of web pages.

Whenever you read or interact with a page in your browser, chances are it’s an

HTML document. Originally developed as a way to describe and share scientific

papers, HTML is now used to mark up all sorts of documents and create visual in-

terfaces for browser-based software.

With HTML5, however, HTML has become as much an of API (Application Pro-

cessing Interface) for developing browser-based software as it is a markup language.

In this book, we’ll talk about the history of HTML and HTML5 and explore some

of its new features.

HTML5 also improves existing elements. With its new input types, we can create

rich form controls without the need for a JavaScript library. For example, if you

want a slider input control, you can use <input type=range>. Input types such as

email and url add client-side validation to the mix. New audio and video elements

let us embed audio and video media directly in our documents. Both elements also

have scripting interfaces that we can use to create custom media players or clever

visual effects. And we can do this without the need for a plugin in supporting

browsers.

We can draw in HTML5 with the addition of the canvas element and support for

inline Scalable Vector Graphics (or SVG). The canvas element is a powerful bitmap

drawing API that lets us create 2D or 3D images, charts, and games. SVG, on the

other hand, uses vector graphics to create reusable, scalable, scriptable images that

work across devices and screens.

Perhaps the biggest shift of HTML5 is this: APIs that are part of HTML's document

object model, but don't have corresponding markup elements. They are purely DOM

APIs that we can use with JavaScript to share and consume data, or create location-

aware applications. Web Workers, mimics multi-threaded JavaScript and background

tasks. The Geolocation API lets our apps take location into context. With cross-

document messaging, we can send data between documents, even across domains,

without exposing the full DOM of either. Finally, Server-Sent Events and WebSockets

enable near-real time communication between client and server.

剩余312页未读，继续阅读

iamfjg

粉丝: 1

HTML5入门与多媒体应用实战

英文原版-Jump Start PHP 1st Edition

JUMP START HTML5 BASICS

Jump Start HTML5

《Jump Start HTML5》英文原版 Kindle - mobi格式

Jump Start UI for Eclipse-开源

jump-start:前端开发快速入门

XSLT Jumpstarter(Pragmatic,2015)

ump Start JavaScript SitePoint 2013

[HTML5] HTML5 基础教程 英文版

HTML5 and CSS3 Transition, Transformation, and Animation

最新资源

[HTML5] HTML5 基础教程英文版