WEB/APP开发基础之旅--HTML入门1

从案例实战角度开始进行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>
posted @ 2019-09-09 17:10  AlexKing007  阅读(113)  评论(0编辑  收藏  举报