2、表格和表单元素

最新推荐文章于 2024-08-19 17:04:41 发布

jasmine_qiqi

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量125

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123948131

版权

1、表格元素（table）

表格组成	标签
表格元素容器	`<table>`
表头行	`<thead>`
表头单元格	`<th>`
表体	`<tbody>`
表体行	`<tr>`
表体单元格	`<td>`
横向合并单元格	`colspan`属性
纵向合并单元格	`rowspan`属性

表格初始化：

		<!-- 表格元素的容器table -->
	<table border="1px;">
			<!-- 表头行：thead，表头单元格：th -->
		<thead>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</thead>
		<!-- 表体：tbody，行：tr，单元格：td -->
		<tbody>
			<tr>
				<td>1</td>
				<td>jasmine</td>
				<td>18</td>
			</tr>
		</tbody>
	</table>

2、表单元素(form)

表单组成	标签
表单容器	`<form>`
输入框	`<input>`
描述输入框	`<label>`
选择容器	`<select>`
选择项	`<option>`
按钮	`<button>`

表单初始化：

	<!-- 表单容器：form标签，提示输入信息：placeholder属性，
		描述文本框：label标签，标签指向id文本：for属性
	    选择器容器：select标签，选项：option
		提交按钮：submit，普通按钮：button-->
	<form action="">
		<label for="username">用户名</label>
		<input type="text" id="username" placeholder="请输入用户名">
		<label for="password">密码</label>
		<input type="text" id="password" placeholder="请输入密码">
		<select id="sex">
			<option value="男">男</option>
			<option value="女">女</option>
		</select>
		<button type="submit">提交</button>
		<button type="reset">重置</button>
		<button type="button">按钮</button>
	</form>

3、源代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表格和表单元素</title>
</head>

<body>
	<!-- 表格元素的容器table -->
	<table border="1px;">
		<!-- 表头行：thead，表头单元格：th，横向合并单元格：colspan -->
		<thead>
			<th colspan="4">学生信息列表</th>
		</thead>
		<thead>
			<th>序号</th>
			<th>班级</th>
			<th>姓名</th>
			<th>年龄</th>
		</thead>
		<!-- 表体：tbody，行：tr，单元格：td，纵向合并单元格：rowspan -->
		<tbody>
			<tr>
				<td>1</td>
				<td rowspan="3">web3</td>
				<td>jasmine</td>
				<td>18</td>
			</tr>
			<tr>
				<td>2</td>
				<td>QiQi</td>
				<td>19</td>
			</tr>
			<tr>
				<td>3</td>
				<td>jasmine_qiqi</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>

	<!-- 表单容器：form标签，提示输入信息：placeholder属性，
		描述文本框：label标签，标签指向id文本：for属性
	    选择器容器：select标签，选项：option
		提交按钮：submit，普通按钮：button-->
	<form action="">
		<label for="username">用户名</label>
		<input id="username" type="text" placeholder="请输入用户名">
		<label for="password">密码</label>
		<input id="password" type="password" placeholder="请输入密码">
		<input type="radio" name="" id="">
		<select name="" id="">
			<option value="男">男</option>
			<option value="女">女</option>
		</select>
		<input type="submit" value="登陆">
		<input type="button" value="登陆">
	</form>

</body>

</html>

jasmine_qiqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2、表格和表单元素

1、表格元素（table）表格组成标签表格元素容器<table>表头行<thead>表头单元格<th>表体<tbody>表体行<tr>表体单元格<td>横向合并单元格colspan属性纵向合并单元格rowspan属性表格初始化：  <table border="1px;">
复制链接

扫一扫