Html表单标签的学习1.0

吃辣容易口渴

于 2022-07-23 12:21:10 发布

阅读量240

点赞数

分类专栏： Html 文章标签： html 学习前端

本文链接：https://blog.csdn.net/hzsd_ygdcs/article/details/125943160

版权

Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.tabe表单

HTML表格由table标签以及一个或多个tr、th或td标签组成：
table标签用来定义表格，整个表格包含在<table>和</table>标签中；
tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示；

td标签和th标签用来定义单元格，所有单元格都在tr标签内，每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示，具体的表格内容放置在这一对td标签或th标签之中，其中th标签中的内容默认以粗体、居中的方式显示。其语法如下：
<table>是<tr>的上层标签
<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.
<table>标示一个表格,<tr>标示这个表格中间的一个行，<td>、<th>标示行中的一个列,需要嵌套在<tr></tr>中间。
用table创建了一个表，但是这个表没有东西，需要我们去继续创建，我们能在表中创建了行，但是这个行里面什么也没有，也是需要我们去继续创建，接着就需要我们去创建列，创建完成后，我们这个基本的结构创建完成了，但是我们还要去设置这些单元格的格式，边框、边框颜色、边框宽度、背景颜色等等
例：

<html>
	<head>
		<title>表格</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<!--
		表示的是一个表格
		-->
		<table border="1" width="600" cellspacing="0" cellpadding="10">
			<tr align="center">
			<th>姓名</td>
			<th>住址</td>
			<th>年龄</td>
			<th>手机号</td>
			</tr>
			<tr align="center">
			<td>张三</td>
			<td>西安</td>
			<td>18</td>
			<td>1273832842</td>
			</tr>
			<tr align="center">
			<td>李四</td>
			<td>广州</td>
			<td>19</td>
			<td>148793845234</td>
			</tr>
		</table>
		<hr/>
		<table border="1" width="600" cellspacing="0" cellpadding="4">
			<tr>
			<th>名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>小计</th>
			<th>操作</th>
			</tr>
			<tr align="center">
			<td>苹果</td>
			<td rowspan="2">5</td>
			<td>20</td>
			<td>100</td>
			<td><img src="imgs/del.webp" width="20" height="20" alt="这是一个删除操作"/></td>
			</tr>
			<tr align="center">
			<td>菠萝</td>
			<!--<td>5</td>-->
			<td>50</td>
			<td>200</td>
			<td><img src="imgs/del.webp" width="20" height="20" alt="这是一个删除操作"/></td>
			</tr>
			<tr align="center">
			<td>香蕉</td>
			<td>6</td>
			<td>30</td>
			<td>180</td>
			<td><img src="imgs/del.webp" width="20" height="20" alt="这是一个删除操作"/></td>
			</tr>
			<tr align="center">
			<td >总计</td>
			<td colspan="4"> 480</td>
			</tr>
		</table>
	</body>
</html>

效果展示如图：
在这里插入图片描述

表格 table
行 tr
列 td
标头列可以用 th 自动居中加粗
table中有如下属性：(已经淘汰了，可以了解一下）
-border：表格边框的粗细
-width：表格的宽度
-cellspacing：单元格间距
-cellpadding：单元格填充
tr中有一个属性： align->center(居中),left(左对齐),right(右对齐)
表示列合并在<td>中加colspan=“”
表示行合并在<td>中加rowspan=“”

2.form表单

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这个form表也就相当于我们日常使用的QQ登陆页面和微信登陆页面以及日常使用的各种登陆系统。

<html>
	<head>
		<title>表单标签的学习</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<form action="demo03.html" >
			昵称:<input type="text"  name="nickName" value="请输入你的昵称"/><br/>
			密码:<input type="password" name="pwd"/><br/>
			性别:<input type="radio" name="gender" value="male" checked/>男
				<input type="radio" name="gender" value="female"/>女
				<input type="radio" name="gender" value="both"/>both<br/>
			爱好:<input type="checkbox" name="hobby" value="basketball"/>篮球
				<input type="checkbox" name="hobby" value="football"/>足球
				<input type="checkbox" name="hobby" value="ping_pang"/>乒乓球
				<input type="checkbox" name="hobby" value="badminton" checked/>羽毛球<br/>
			星座:<select name="star">
				<option value="1" >白羊座</option>
				<option value="2" selected>金牛座</option>
				<option value="3">双子座</option>
				<option value="4">巨蟹座</option>
				<option value="5">狮子座</option>
				<option value="6">处女座</option>
				<option value="7">天秤座</option>
				<option value="8">天蝎座</option>
				<option value="9">射手座</option>
				<option value="10">魔羯座</option>
				<option value="11">水瓶座</option>
				<option value="12">双鱼座</option>
				</select><br/>
			备注:<textarea name="remark" rows="4" cols="50" ></textarea><br/>
			<input type="submit" value="注册"/>
			<input type="reset" value="重置"/>
			<input type="button" value="这是一个普通按键"/>

		</form>
	</body>
</html>

效果演示
在这里插入图片描述
在点击提交之后就会跳转界面
代码：

<html>
	<head>
		<title>表单标签的学习</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<h1><font color='red'>注册成功</font></h1>
	</body>
</html>

效果展示如图：
在这里插入图片描述

1、input type=“text” 表示文本框
2、input type=“password” 表示密码框
3、input type=“redio” 表示单选按钮，需要注意的是，name属性需要保持一致，才会产生互斥效果，否则会认为两个不同的单选按钮
4、input type=“checkbox” 表示复选框，即多选框，name属性值建议保持一致，这样将来服务器获取的时候获取的是一个数组
5、select 表示下拉列表。每一个选项是option，其中value选项是发给服务器的值，selected表示默认选中的项
6、textarea 表示多行文本框或者说是文本域<textarea name="remark" rows="4" cols="50" ></textarea><br/>这个不要轻易的换行，就是不要将这一对标签轻易分开
rows表示显示的行数，cols表示显示的列数（即一行有多少个字）
7、input type=“submit” 表示注册按钮
8、input type=“reset” 表示重置按钮
9、input type=“button” 表示普通按钮
下面是现在已经淘汰的标签，但是可能会碰到
frameset
iframe