Skip to content
W3S101

HTML5 - 概览

HTML5 - 概述

Section titled “HTML5 - 概述”

HTML5 代表了定义 HTML（HyperText Markup Language，超文本标记语言）标准的最新演进。它不仅仅是一个单一版本，而是一个“活标准”（living standard），由 Web Hypertext Application Technology Working Group (WHATWG) 持续更新并被 World Wide Web Consortium (W3C) 采纳。

HTML5 旨在通过支持最新的多媒体来改进语言，同时保持语言易于人类阅读，并且能够被计算机和网络浏览器一致地理解。它提供了一种标准的方式来结构化和呈现万维网（World Wide Web）上的内容。

HTML5 的主要目标包括引入新的特性，例如原生视频和音频播放、用于二维绘图的 Canvas，以及改进的表单控件（form controls），这些特性减少了对 Adobe Flash 或 Microsoft Silverlight 等专有浏览器插件（这些插件现已弃用）的需求。

浏览器支持

Section titled “浏览器支持”

所有主流 Web 浏览器的现代版本（Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edge）都对 HTML5 特性提供了优秀的支持。iOS 和 Android 上的移动 Web 浏览器也拥有强大的 HTML5 支持。

虽然支持广泛，但在开发时，特别是对于非常新或高级的特性，始终建议使用像 Can I use (https://caniuse.com/) 这样的资源检查特定功能的兼容性。

主要特性

Section titled “主要特性”

HTML5 引入了众多新的元素、属性和 JavaScript API，用于构建现代化的交互式 Web 应用程序。以下是一些主要特性：

  • 新的语义元素（Semantic Elements）：<article>、<section>、<nav>、<header>、<footer>、<aside> 和 <main> 等元素提供了更清晰的文档结构。
  • 增强的表单控件（Form Controls）：新的输入类型（例如 email、url、date、number）、属性（required、pattern、placeholder）以及 datalist 元素改善了用户体验和验证。
  • 持久本地存储（Persistent Local Storage）：localStorage 和 sessionStorage 提供了超越传统 cookie 的客户端数据存储机制。
  • WebSocket API：允许客户端和服务器通过单个长连接实现全双工、双向通信。
  • Server-Sent Events (SSE)：允许服务器通过标准 HTTP 连接向客户端推送数据更新。
  • Canvas API：提供一个依赖于分辨率的位图 Canvas，可以使用 JavaScript 实时渲染图表、游戏图形或其他视觉图像。
  • 音频和视频元素（Audio & Video Elements）：<audio> 和 <video> 标签允许原生嵌入和播放多媒体内容，无需外部插件。
  • 地理位置 API（Geolocation API）：允许 Web 应用程序访问用户的地理位置（需用户授权）。
  • 微数据和结构化数据（Microdata & Structured Data）：尽管存在 HTML Microdata 属性（itemscope、itemtype、itemprop），但现代方法通常更倾向于使用 JSON-LD 和 Schema.org 等词汇表来实现更丰富的语义标记，尤其对于 SEO（搜索引擎优化）而言。
  • 拖放 API（Drag and Drop API）：提供在网页内部或网页之间拖放元素的原生支持。
  • Web Workers API：允许在后台线程中运行 JavaScript 执行，防止长时间任务阻塞用户界面。
  • IndexedDB API：一个低级别的 API，用于在客户端存储大量结构化数据，包括文件/二进制大对象（blobs）。它是已弃用的 Web SQL Database 的现代替代方案。

向后兼容性

Section titled “向后兼容性”

HTML5 被设计为向后兼容。不识别新 HTML5 元素的旧浏览器通常会将它们视为通用的内联元素或块级元素。开发者通常可以提供回退内容（fallback content）或使用 JavaScript 功能检测（Polyfill，垫片）来确保在不同浏览器中的功能可用性。

最佳实践是使用 JavaScript 检查（例如，检查特定方法或属性是否存在）来检测单个 HTML5 功能的支持情况，而不是进行浏览器嗅探（browser sniffing）。

如果你是 HTML 新手，建议在深入研究高级 HTML5 特性之前，先掌握 HTML 结构和语法的基本知识。MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/HTML) 等资源非常宝贵。