从零开始，轻松掌握HTML5核心知识：图文并茂，实战案例教学

在数字化时代，HTML5作为网页开发的核心技术，已经成为了许多初学者和专业人士必备的技能。本文将带你从零开始，通过图文并茂的方式，结合实战案例，轻松掌握HTML5的核心知识。

第一节：HTML5 简介

1.1 HTML5 的诞生

HTML5是HTML的第五个版本，自2014年正式发布以来，它已经成为网页开发的主流标准。相比之前的版本，HTML5在性能、安全性和可用性方面都有了显著的提升。

1.2 HTML5 的特点

语义化标签：如<header>, <footer>, <nav>等，使网页结构更加清晰。
多媒体支持：原生支持视频、音频等多媒体元素，无需插件。
离线应用：通过HTML5的离线存储功能，可以创建离线应用。
图形和动画：支持Canvas和SVG，实现丰富的图形和动画效果。

第二节：HTML5 基础语法

2.1 文档结构

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2.2 标签和属性

标签：如<h1>到<h6>表示标题，<p>表示段落，<a>表示链接等。
属性：如href、title、src等，用于描述标签的功能。

2.3 文本格式化

<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<em>强调</em>
<del>删除线</del>

第三节：HTML5 多媒体元素

3.1 视频

<video controls>
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持视频播放。
</video>

3.2 音频

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放。
</audio>

第四节：HTML5 图形和动画

4.1 Canvas

Canvas是一个画布，可以使用JavaScript进行绘图。

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 100);

4.2 SVG

SVG是一种基于可扩展标记语言的矢量图形，可以用来创建复杂的图形和动画。

<svg width="200" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

第五节：实战案例

5.1 制作一个简单的网页

创建一个名为index.html的文件。
在文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页。</p>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>
</body>
</html>

保存文件并打开，即可看到效果。

5.2 制作一个简单的动画

创建一个名为animation.html的文件。
在文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个动画</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 2;
        var dy = -2;

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();

            if (x + dx > canvas.width || x + dx < 0) {
                dx = -dx;
            }

            if (y + dy > canvas.height - 30 || y + dy < 0) {
                dy = -dy;
            }

            x += dx;
            y += dy;
        }

        setInterval(draw, 10);
    </script>
</body>
</html>

保存文件并打开，即可看到动画效果。

通过以上学习，相信你已经对HTML5有了初步的了解。在接下来的学习中，你可以继续深入研究HTML5的高级特性，如CSS3、JavaScript等，从而成为一名优秀的网页开发者。祝你在学习路上越走越远！