[图灵程序设计丛书].HTML5秘籍.第2版【电子版】 ([美] Matthew MacDonald)（Z-Library）

【One-Line Pitch】 A practical, browser-first guide to HTML5 and CSS3 for web developers who want to adopt modern markup, forms, media, and styling today—without waiting for standards to finalize or worrying about legacy browser support. 【Book Arc】 - **Opening (~0%–10%)**: Introduces HTML5’s history, design principles (don’t break the web, practical over theoretical), and the basics of modern markup—doctype, character encoding, language attributes, and how to link stylesheets and scripts. Also covers the new, removed, and changed elements, plus how to check browser support and use Modernizr. - **Early (~10%–25%)**: Dives into semantic elements—`<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<figure>`—and how to retrofit an old-style `<div>`-based page into a meaningful HTML5 structure. Explains the HTML5 outline algorithm and how to avoid common heading/sectioning pitfalls. - **Early-to-Middle (~25%–40%)**: Covers more meaningful markup (`<time>`, `<mark>`, `<output>`), microformats and microdata for search engines, and then moves into building better web forms: new input types, validation attributes, CSS pseudo-classes for styling valid/invalid fields, and new form elements like `<datalist>` and `<progress>`. - **Middle (~40%–50%)**: Focuses on audio and video—using `<audio>` and `<video>`, choosing formats and codecs, encoding tools, fallback strategies for older browsers, and building custom players with JavaScript. Also touches on the `canPlayType()` method and accessibility considerations. - **Late (~50%–70%)**: Shifts to CSS3—vendor prefixes, box and text shadows, gradients, transitions, and web fonts via `@font-face`. Emphasizes progressive enhancement and how to use Modernizr to serve different styles to older browsers. - **Ending (~70%–100%)**: The excerpts do not cover the final chapters in detail, but the book continues with Canvas, advanced JavaScript integration, and responsive design techniques (media queries) as hinted in earlier sections. 【Key Takeaways】 - **HTML5 is a living standard—browser support matters more than spec status** (Opening): The W3C and WHATWG have different versioning approaches, but the practical takeaway is that you can use HTML5 features now if browsers support them. Don’t wait for the final recommendation. - **Semantic elements give your page structure that machines can understand** (Early): Using `<header>`, `<nav>`, `<main>`, `<article>`, and `<aside>` instead of generic `<div>`s helps screen readers, search engines, and future tools navigate your content. The `<main>` element is especially useful for letting assistive tech skip navigation and ads. - **The HTML5 outline algorithm is subtle—test your heading structure** (Early): The algorithm auto-creates sections from heading elements, which can lead to unexpected nesting (e.g., an `<aside>` pulling in `<h3>` elements). Understanding how sections are formed helps you avoid broken outlines. - **New form input types degrade gracefully** (Early-to-Middle): Types like `email`, `number`, and `date` fall back to plain text boxes in unsupported browsers, so you can adopt them safely. Supported browsers add validation, better keyboards on mobile, and editing aids. - **Form validation is now built-in—no JavaScript required** (Early-to-Middle): The `required` attribute, `pattern`, and pseudo-classes like `:invalid` and `:out-of-range` let you style and validate forms without custom scripts. Use `novalidate` or `formnovalidate` to bypass validation when needed. - **Audio and video are simple to embed, but format support is the real challenge** (Middle): `<audio>` and `<video>` share attributes like `controls`, `loop`, and `preload`. The hard part is choosing codecs (H.264 vs. WebM) and providing fallbacks—use `canPlayType()` to detect support and offer multiple sources. - **CSS3 effects are progressive enhancements—use vendor prefixes and fallbacks** (Late): Shadows, gradients, and transitions are easy to add, but older IE versions need prefixes or fallbacks. Modernizr helps you serve different styles, and you can layer effects so unsupported browsers still get a usable page. - **Web fonts via `@font-face` are finally practical** (Late): All modern browsers support `@font-face`, but they differ in font file formats (EOT, WOFF, etc.). Plan to serve multiple formats to cover all browsers. 【Reading Tips】 - **Skim Chapter 1 if you’re already familiar with HTML basics**—the history and principles are interesting but not essential for coding. Focus on the element tables and the Modernizr section. - **Deep-read Chapter 2 on semantic elements**—this is the core of the book’s markup philosophy. Build the sample page along with the author to internalize the structure. - **Chapter 4 on forms is a must-work-through**—try the new input types and validation in a real browser to see the behavior. Pay attention to the graceful degradation pattern. - **For Chapter 5 (media), skim the encoding tool list but study the fallback strategies**—the `canPlayType()` pattern and multi-source setup are what you’ll actually use. - **In Chapter 6 (CSS3), focus on the syntax patterns and vendor prefixes**—the examples are short, so copy them and experiment. Don’t memorize every property; learn how to look up and test. 【Coverage Limits】 The excerpts cover roughly the first half to two-thirds of the book (through CSS3 fonts and effects). Later chapters on Canvas, advanced JavaScript, and responsive design are mentioned but not detailed in this guide.