HTML常用标签02

最新推荐文章于 2021-06-08 10:25:13 发布

perfectmatch_G

最新推荐文章于 2021-06-08 10:25:13 发布

阅读量220

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/perfectmatch_G/article/details/89060980

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.表格嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格的嵌套</title>
	</head>
	<body>
		<table border="1px" align="center" width="400px" height="300px">
			<caption>xxx学校高数平均成绩</caption>
			<tr>
				<th>姓名</th>
				<th>班级</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>
					<!--嵌套一个表格-->
					<table border="1px" width="100%" height="100%">
						<tr>
							<td>11</td>
							<td>12</td>
							<td>13</td>
						</tr>	
						<tr>
							<td>21</td>
							<td>22</td>
							<td>23</td>
						</tr>	
						<tr>
							<td>31</td>
							<td>32</td>
							<td>33</td>
						</tr>
					</table>
				</td>
				<td>78</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>二班</td>
				<td>79</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>一班</td>
				<td>67</td>
			</tr>
		</table>
	</body>
</html>

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

2.表单标签form

input标签中必填的属性：name（给后台标记当前input标签中的内容）

属性：

action：提交到地址的url
method：提交方式
1）get方式
2）post方式
二者区别：
-get：将用户的信息提交到了地址栏，不安全；提交的数据大小有限制，不超过4KB.
-post：不会讲用户的信息提交到地址栏：在浏览器Header中可看到实体内容；使用post方式居多，用来上传文件，提交的数据大小无限制。

表单项：
			input type = “text”：文本输入框
			input type = “password”：密码输入框
			input type = “radio”：单选按钮
			input type= “checkbox”：复选框
			select：下拉菜单
			option：下拉选项
			input type = “file”：上传文件
			input type = “date”：当前年月日时间
			input type = “date-local”：当前年月日--：--
			input type = “number”：只能输入数字
			h5中的属性：placeholder：当前input的默认值
			按钮：
			input type = “submit”：提交
			input type = “button”：普通按钮
			input type = “reset”：重置按钮
			textarea：文本域
			属性：rows（指定文本域的行数）cols（指定列数）
			input type =  “hidden”：隐藏域（没有任何效果显示）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签02</title>
	</head>
	<body>
		<form action = "#" method="get">
			用户名：<input type = "text" name = "username" placeholder="请输入用户名" />
			<br />
			密&nbsp;&nbsp;&nbsp;码：<input type = "password" name = "pwd"placeholder="请输入密码"  /><br />
			性别：
               <!--将type =  “ridio” 将他看成同一组信息
               	指定同一个name属性
               -->
			<input type = "radio"  name = "gender"/>男
			<input type = "radio" name = "gender"/>女<br />
			爱好：
			<input type="checkbox"  name = "hobit"/>足球
			<input type="checkbox"  name = "hobit"/>篮球
			<input type="checkbox"  name = "hobit"/>排球<br />
			籍贯：
			<!--select标签中也要指定name属性-->
			<select name = "籍贯">
				<option>请选择</option>
				<option>西安</option>
				<option>咸阳</option>
				<option>宝鸡</option>
			</select>
			上传文件:
			<input type = "file"  name = "photo"/><br />
			自我介绍：
			<textarea ros ="5" cols="10">本人............</textarea>
			出生日期：
			<input type = "date" name = "birth" />
			<input type = "datetime-local" name = "birth" /><br />
			联系电话：
			<input type = "number" name = "phone" /><br />
			<input type = "submit" value="提交"/>
			<input type="button" value="这是一个普通按钮" />
			<input type = "reset" value="重置" />
			
		</form>
	</body>
</html>

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

3.格式优雅的表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>格式优雅的表单</title>
	</head>
	<body>
		<form action="#" method="get">
			<table  border="1px" width ="300px"  align="center">
				<tr>
					<td>用户名</td>
					<td>
						<input type = "text" name = "username" />
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<input type = "password" name = "password" />
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<input type = "radio" name = "gender" />男
						<input type = "radio" name = "gender" />女
					</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<input type = "checkbox" name = "hobit" />足球
						<input type = "checkbox" name = "hobit" />篮球
						<input type = "checkbox" name = "hobit" />排球
					</td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td>
						<input type = "email" name = "email" />
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<input type = "date" name = "birth" />
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type = "text" name = "code" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center" >
						<input type = "submit" value="提交" style = "background-color: coral"/>
					</td>
				</tr>
			</table>	
		</form>
	</body>
</html>