第一章：HTML5 简介

1.1 HTML5 的背景

HTML5 是 HTML 的第五个版本，它于 2014 年正式发布。HTML5 是当前网页开发中最常用的标准之一，它带来了许多新特性和改进，使得网页开发更加高效和强大。

1.2 HTML5 的新特性

  • 语义化标签：如 <header>, <footer>, <article>, <section> 等，这些标签有助于提高网页的可读性和搜索引擎的优化。
  • 多媒体支持：HTML5 支持内嵌视频和音频，无需额外的插件。
  • 离线应用：通过 HTML5 的 Application Cache，可以实现离线应用。
  • 图形和动画：使用 <canvas> 和 <svg> 元素可以进行图形绘制和动画制作。

第二章：HTML5 文档结构

2.1 HTML5 文档的基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2.2 元素和属性

  • 元素：HTML5 中的元素是构成网页的基本单位，如 <p>, <div>, <span> 等。
  • 属性：元素可以拥有属性，用于描述元素的特征，如 class, id, style 等。

第三章：HTML5 语义化标签

3.1 常用语义化标签

  • <header>：表示页面的页眉部分。
  • <footer>：表示页面的页脚部分。
  • <article>：表示一个独立的、可被独立分发或引用的内容项。
  • <section>：表示页面中的一个区域，通常包含一个标题。

3.2 语义化标签的使用

<header>
    <h1>网站标题</h1>
</header>
<section>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</section>
<footer>
    <p>版权信息</p>
</footer>

第四章：HTML5 多媒体元素

4.1 视频 <video>

<video controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
</video>

4.2 音频 <audio>

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
</audio>

第五章：HTML5 其他新特性

5.1 Canvas

Canvas 是一个画布元素，可以用于绘制图形和动画。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 200, 100);
</script>

5.2 SVG

SVG 是可缩放矢量图形，它允许你创建矢量图形。

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

第六章：总结

HTML5 是当前网页开发中最常用的标准之一，它带来了许多新特性和改进。通过学习 HTML5，你可以轻松开启前端编程之旅。本文介绍了 HTML5 的简介、文档结构、语义化标签、多媒体元素和其他新特性。希望本文能帮助你更好地掌握 HTML5。