1.1 什么是HTML5
定义与核心概念
HTML5（HyperText Markup Language version 5）是构建和呈现网页内容的最新标准标记语言，由万维网联盟（W3C）于2014年正式发布。它不仅是HTML4的简单升级，更是一套包含HTML、CSS和JavaScript在内的完整技术体系。
三大核心组成部分：
- HTML - 定义内容结构
- CSS - 控制内容表现
- JavaScript - 实现交互行为
与传统HTML的主要区别
| 特性 | HTML4/XHTML | HTML5 |
|---|---|---|
| 文档声明 | 复杂冗长 | <!DOCTYPE html> 简单明了 |
| 语法要求 | 严格XML格式 | 宽松但规范的语法 |
| 语义元素 | 通用div容器 | 专用语义标签(header,nav等) |
| 多媒体 | 依赖Flash插件 | 原生audio/video支持 |
| 图形 | 仅静态图片 | Canvas/SVG动态图形 |
| 存储 | Cookie | Web Storage/IndexedDB |
HTML5的革命性特性
- 语义化标签新增<header>, <footer>, <article>, <section>等元素，使文档结构更清晰。html复制下载运行<article> <header> <h1>文章标题</h1> <p>发布日期：<time datetime="2023-08-15">8月15日</time></p> </header> <section> <p>这里是文章内容...</p> </section> </article>
- 多媒体原生支持无需插件即可播放音视频：html复制下载运行<video controls width="600"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持HTML5视频 </video>
- 图形与动画<canvas>元素实现动态绘图SVG矢量图形支持
- 增强表单功能新增输入类型和属性：html复制下载运行<input type="email" required placeholder="请输入邮箱"> <input type="date" min="2023-01-01">
- 本地存储能力localStorage/sessionStorageIndexedDB客户端数据库
- 设备API集成支持地理位置、陀螺仪、摄像头等硬件访问。
浏览器支持现状
现代浏览器（Chrome、Firefox、Safari、Edge等）已全面支持HTML5特性。对于旧版浏览器，可以使用Polyfill技术实现兼容：
<!-- 让IE9以下支持HTML5语义标签 -->
<!--[if lt IE 9]>
<script src="https://js.viuoo.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->HTML5的应用场景
- 响应式网站 - 适配各种设备屏幕
- Web应用 - 媲美原生应用的体验
- 游戏开发 - 基于Canvas/WebGL
- 多媒体展示 - 无需插件的音视频
- 数据可视化 - 动态图表和图形
实践案例：创建一个基本的HTML5文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML5页面</title>
</head>
<body>
<header>
<h1>欢迎来到HTML5世界</h1>
<nav>
<a href="#about">关于</a> |
<a href="#features">特性</a>
</nav>
</header>
<main>
<article id="about">
<h2>HTML5简介</h2>
<p>这里是内容段落...</p>
</article>
</main>
<footer>
<p>© 2023 HTML5学习网站</p>
</footer>
</body>
</html>