HTML5作为现代网页制作的核心技术，已经成为了网页开发者的必备技能。在这个教程中，我们将带你轻松掌握HTML5网页制作技巧，让你在B站上也能成为网页制作高手。

一、HTML5基础知识

1.1 HTML5的基本结构

HTML5的基本结构包括<!DOCTYPE html>、<html>、<head>和<body>四个部分。下面是一个简单的HTML5文档结构示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的HTML5网页</title>
</head>
<body>
    <h1>欢迎来到我的HTML5网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

1.2 HTML5的新特性

HTML5相较于之前的版本，增加了很多新特性和元素，例如<article>、<section>、<nav>、<header>、<footer>等。这些元素使得网页结构更加清晰，易于维护。

二、HTML5页面布局

2.1 使用CSS进行页面布局

HTML5本身并不提供布局功能，但可以通过CSS来实现。以下是使用CSS进行页面布局的示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的HTML5网页</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 960px;
            margin: 0 auto;
        }
        .header, .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
        .content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="content">内容</div>
        <div class="footer">底部</div>
    </div>
</body>
</html>

2.2 使用HTML5的语义化标签

HTML5的语义化标签有助于提高网页的可读性和搜索引擎优化。例如，使用<header>表示页面头部，<nav>表示导航栏，<article>表示文章内容等。

三、HTML5多媒体应用

3.1 添加视频和音频

HTML5支持直接在网页中嵌入视频和音频，无需使用Flash插件。以下是添加视频和音频的示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的HTML5网页</title>
</head>
<body>
    <video controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
    <audio controls>
        <source src="music.mp3" type="audio/mpeg">
        您的浏览器不支持音频标签。
    </audio>
</body>
</html>

3.2 使用canvas绘制图形

HTML5的<canvas>元素允许我们在网页中绘制图形。以下是使用canvas绘制一个圆形的示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的HTML5网页</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
    </script>
</body>
</html>

四、总结

通过本教程，你已掌握了HTML5网页制作的基本技巧。在B站上，你可以找到更多关于HTML5的高级教程和实战案例，不断提高自己的网页制作水平。祝你在网页制作的道路上越走越远！