1. 创建一个简单的网页布局
目标：学会使用HTML标签创建基本的网页结构。
任务：创建一个包含标题、段落、列表和图片的简单网页。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<img src="image.jpg" alt="图片描述">
</body>
</html>
2. 使用内联CSS样式美化网页
目标：了解如何使用内联CSS样式来美化网页。
任务：给上述网页添加一些内联CSS样式，如字体大小、颜色和背景。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">欢迎来到我的网页</h1>
<p style="font-size: 16px; color: green;">这是一个段落。</p>
<ul>
<li style="font-size: 14px; color: red;">列表项1</li>
<li style="font-size: 14px; color: red;">列表项2</li>
<li style="font-size: 14px; color: red;">列表项3</li>
</ul>
<img src="image.jpg" alt="图片描述" style="width: 200px; height: auto;">
</body>
</html>
3. 使用外部CSS文件美化网页
目标：学习如何将CSS样式从HTML中分离出来，并使用外部文件。
任务：创建一个CSS文件，并在HTML中引用它。
代码示例：
CSS文件（styles.css）：
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
font-size: 24px;
}
p {
font-size: 16px;
color: green;
}
ul li {
font-size: 14px;
color: red;
}
img {
width: 200px;
height: auto;
}
HTML文件（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<img src="image.jpg" alt="图片描述">
</body>
</html>
4. 使用HTML5的<header>, <footer>, <nav>和<article>标签
目标：掌握HTML5中的新标签，以更好地组织网页内容。
任务：将上述网页的HTML结构进行重构，使用<header>, <footer>, <nav>和<article>标签。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<nav>
<!-- 导航菜单 -->
</nav>
<article>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<img src="image.jpg" alt="图片描述">
</article>
<footer>
<!-- 页脚内容 -->
</footer>
</body>
</html>
5. 使用HTML5的<section>和<aside>标签
目标：了解如何使用<section>和<aside>标签来组织内容。
任务：在上述网页中添加<section>和<aside>标签。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<nav>
<!-- 导航菜单 -->
</nav>
<article>
<section>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<img src="image.jpg" alt="图片描述">
</section>
<aside>
<!-- 侧边栏内容 -->
</aside>
</article>
<footer>
<!-- 页脚内容 -->
</footer>
</body>
</html>
6. 创建一个响应式网页布局
目标：学会使用HTML和CSS创建响应式网页布局。
任务：使用媒体查询（Media Queries）创建一个响应式网页布局。
代码示例：
CSS文件（styles.css）：
/* 基本样式 */
body {
font-family: Arial, sans-serif;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
/* 响应式布局 */
@media (max-width: 600px) {
body {
padding: 0;
}
header, footer {
padding: 5px;
}
img {
width: 100%;
height: auto;
}
}
HTML文件（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>响应式网页</h1>
</header>
<nav>
<!-- 导航菜单 -->
</nav>
<article>
<img src="image.jpg" alt="图片描述">
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</article>
<footer>
<!-- 页脚内容 -->
</footer>
</body>
</html>
7. 使用HTML5的<canvas>标签绘制图形
目标：学习如何使用HTML5的<canvas>标签来绘制图形。
任务：在网页中添加一个<canvas>元素，并使用JavaScript绘制一个简单的图形。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas绘图</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.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 100);
</script>
</body>
</html>
8. 使用HTML5的<audio>和<video>标签嵌入音频和视频
目标：了解如何使用HTML5的<audio>和<video>标签嵌入音频和视频。
任务：在网页中添加音频和视频元素。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频和视频</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频元素。
</video>
</body>
</html>
9. 使用HTML5的<input>标签创建表单
目标：学习如何使用HTML5的<input>标签创建表单。
任务：创建一个简单的表单，包含文本输入框、密码输入框、单选按钮和复选框。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">订阅邮件</label><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
10. 使用HTML5的<iframe>标签嵌入其他网页
目标：了解如何使用HTML5的<iframe>标签嵌入其他网页。
任务：在网页中添加一个<iframe>元素，用于嵌入其他网页。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入其他网页</title>
</head>
<body>
<iframe src="https://www.example.com" width="500" height="300"></iframe>
</body>
</html>
通过以上10个实战练习题，你可以快速掌握HTML代码的基础知识和网页制作技巧。祝你学习愉快！