在数字化时代，网页开发是一项基础而重要的技能。HTML5作为网页开发的基石，承载着构建丰富、互动网页的使命。本文将带你通过实战项目，轻松掌握HTML5，高效学习网页开发。

HTML5简介

HTML5是第五代超文本标记语言，它在原有HTML4的基础上进行了扩展和改进，增加了许多新特性和API，使得网页开发更加便捷和高效。HTML5支持多媒体、离线存储、图形绘制、动画等功能，是现代网页开发的核心技术。

实战项目一：制作个人博客

个人博客是一个展示个人观点、分享生活点滴的平台。通过制作个人博客，你可以学习到HTML5的基本结构、样式和交互。

1. 创建HTML5文档

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人博客</title>
</head>
<body>
    <header>
        <h1>我的个人博客</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">关于我</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    <footer>
        <p>版权所有 &copy; 2021 我的个人博客</p>
    </footer>
</body>
</html>

2. 添加CSS样式

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

3. 添加JavaScript交互

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var navItems = document.querySelectorAll('nav ul li a');
        for (var i = 0; i < navItems.length; i++) {
            navItems[i].addEventListener('click', function(event) {
                event.preventDefault();
                var target = event.target.getAttribute('href');
                document.querySelector(target).scrollIntoView();
            });
        }
    });
</script>

实战项目二：制作响应式网页

响应式网页能够适应不同设备和屏幕尺寸，提供更好的用户体验。通过制作响应式网页，你可以学习到HTML5的媒体查询、弹性布局等特性。

1. 使用媒体查询

@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
}

2. 使用弹性布局

<main>
    <div class="container">
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
        <aside>
            <h3>侧边栏</h3>
            <p>侧边栏内容...</p>
        </aside>
    </div>
</main>

.container {
    display: flex;
    flex-wrap: wrap;
}

article {
    flex: 1 1 50%;
    margin-bottom: 20px;
}

aside {
    flex: 1 1 30%;
    margin-bottom: 20px;
}

总结

通过以上实战项目，你可以轻松掌握HTML5的基本知识和技能。在实际开发中，不断积累经验，提高自己的技术水平，相信你会成为一名优秀的网页开发者。