HTML实战(2)：认识HTML控件

xwLink1996

已于 2024-05-14 11:10:47 修改

阅读量286

点赞数 5

分类专栏： HTML 文章标签： html 前端

于 2024-05-14 10:57:48 首次发布

本文链接：https://blog.csdn.net/nianfen/article/details/138844310

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下面通过教学样例认识HTML控件，如何应用以下示例？参考上篇文章HTML实战(1)，1.4 修改test.html

3.HTML实例

实例一：登录界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新建HTML</title>
	</head>
	<body>
		<form action="/" method="post">
			<!-- 文本输入框 -->
			<label for="name">用户名:</label>
			<input type="text" id="name" name="name" required>
			<br>
			<!-- 密码输入框 -->
			<label for="password">密码:</label>
			<input type="password" id="password" name="password" required>
			<br>
			<!-- 单选按钮 -->
			<label>性别:</label>
			<input type="radio" id="male" name="gender" value="male" checked>
			<label for="male">男</label>
			<input type="radio" id="female" name="gender" value="female">
			<label for="female">女</label>
			<br>
			<!-- 复选框 -->
			<input type="checkbox" id="subscribe" name="subscribe" checked>
			<label for="subscribe">订阅推送信息</label>
			<br>
			<!-- 下拉列表 -->
			<label for="country">国家:</label>
			<select id="country" name="country">
				<option value="cn">CN</option>
				<option value="usa">USA</option>
				<option value="uk">UK</option>
			</select>
			<br>
			<!-- 提交按钮 -->
			<input type="submit" value="提交">
		</form>
	</body>
</html>

此实例中有form，label，input，select，option等标签，有type，id，name，value等属性，请参考HTML标签参考手册，进行研究。

实例二：HTML表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新建HTML</title>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>列标题1</th>
					<th>列标题2</th>
					<th>列标题3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>行1，列1</td>
					<td>行1，列2</td>
					<td>行1，列3</td>
				</tr>
				<tr>
					<td>行2，列1</td>
					<td>行2，列2</td>
					<td>行2，列3</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

此实例完整展示了网页表格相关的控件

实例三：HTML布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新建HTML</title>
	</head>
	<body>
		<div id="container" style="width:500px">
			<div id="header" style="background-color:#FFA500;">
				<h1 style="margin-bottom:0;">主要的网页标题</h1>
			</div>
			<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
				<b>菜单</b><br>HTML<br>CSS<br>JavaScript
			</div>
			<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div>
			<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div>
		</div>
	</body>
</html>

应用这些实例后，发现页面很丑，别着急，下一节讲html实战样例。