了解HTML5
HTML5，作为现代网页设计的基石，自从推出以来就受到了广泛关注。它不仅提供了丰富的标签和API，还使得网页开发变得更加高效和强大。对于初学者来说，HTML5是一个很好的起点，因为它相对简单，易于上手。
HTML5的基本结构
HTML5的基本结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
这个结构包含了文档类型声明（<!DOCTYPE html>）、根元素（<html>）、头部（<head>）和主体（<body>）。
HTML5新特性
HTML5带来了许多新特性和改进，以下是一些重要的：
新标签
HTML5引入了许多新标签，如<article>、<section>、<nav>、<aside>和<footer>等，这些标签使得文档结构更加清晰。
增强的表单元素
HTML5增加了许多新的表单元素，如<input type="email">、<input type="date">等，使得表单验证更加简单。
媒体元素
HTML5提供了原生的媒体元素<audio>和<video>，使得嵌入音频和视频变得更加容易。
Canvas和SVG
HTML5引入了<canvas>和<svg>元素，使得网页上的图形绘制和动画制作成为可能。
实战项目准备
在开始实战项目之前，你需要准备以下工具和资源：
编辑器
选择一个合适的文本编辑器，如Visual Studio Code、Sublime Text或Atom等。
浏览器
安装主流的浏览器，如Chrome、Firefox和Safari等，以便测试你的网页。
学习资源
可以通过在线教程、书籍或视频教程来学习HTML5。
实战项目一：个人博客
以下是一个简单的个人博客项目，我们将使用HTML5来构建它。
项目结构
blog/
├── index.html
├── about.html
└── contact.html
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的博客</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<!-- 更多文章 -->
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>关于我</title>
</head>
<body>
<header>
<h1>关于我</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>个人简介</h2>
<p>这里是我的个人简介...</p>
</article>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>联系我</title>
</head>
<body>
<header>
<h1>联系我</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>联系方式</h2>
<p>这里是我的联系方式...</p>
</article>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
实战项目二：响应式网页设计
响应式网页设计是HTML5的一个重要应用，它使得网页在不同设备上都能良好地显示。
媒体查询
媒体查询是响应式网页设计的核心，它允许你根据不同的屏幕尺寸和分辨率来应用不同的样式。
@media screen and (max-width: 600px) {
/* 当屏幕宽度小于600px时应用的样式 */
}
实战示例
以下是一个简单的响应式网页设计示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>响应式网页设计</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
@media screen and (max-width: 600px) {
.container {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>响应式网页设计</h1>
</div>
</header>
<div class="container">
<p>这里是一些内容...</p>
</div>
</body>
</html>
总结
通过以上实战项目，你可以了解到HTML5的基本结构和特性，以及如何使用HTML5来构建响应式网页。希望这些内容能帮助你轻松上手HTML5，并开始你的网页开发之旅。