从案例实战角度开始进行HTML相关知识点的讲解，动手实践出真知！
案例1代码：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h2>第一个网页</h2>
<hr>
<p>第一个案例</p>
<p>第一句话</p>
<p>第二句话</p>
<span>第三句话</span>
</body>
</html>
案例2代码：
<!DOCTYPE html>
<html>
<head>
<title>第二个案例</title>
</head>
<body>
<h2>我的第二个网页</h2>
<hr>
<p>第二个实例</p>
<!-- table表格标签的写法 -->
<table border="1">
<tr>
<td>文字</td>
<td>图片</td>
</tr>
<tr>
<td><a href="ex01.html">去看第一个网页</a></td>
<td><img src="test.jpg"></td>
</tr>
</table>
</body>
</html>
案例3代码：
<!DOCTYPE html>
<html>
<head>
<title>第三个案例</title>
</head>
<body>
<h2>第三个网页</h2>
<hr>
<!-- 表单写法 form -->
<form action="" method="post">
<table border="1">
<tr>
<td>用户姓名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>用户密码</td>
<td><input type="password" name="userpwd"></td>
</tr>
<tr>
<td><input type="submit" name="" value="提交"></td>
<td><input type="reset" name="" value="重填"></td>
</tr>
</table>
</form>
</body>
</html>
案例4代码：
<!DOCTYPE html>
<html>
<head>
<title>第四个案例</title>
<meta charset="utf-8">
</head>
<body>
<h2>第四个网页</h2>
<hr>
<!-- 列表的用法、DIV的用法 -->
<!-- division 区块,默认长方形，width.height=0 -->
<div style="width: 300px;height: 100px;background: #f0f0f0;">
<!-- ul 无序列表 ol 有序列表 li列表 -->
<ul>
<li>第一个网页</li>
<li>第二个网页</li>
<li><a href="https://www.baidu.com">百度</a></li>
</ul>
</div>
</body>
</html>