HTML的常用标签

HTML表格与表单详解

最新推荐文章于 2024-12-10 16:55:27 发布

原创最新推荐文章于 2024-12-10 16:55:27 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

1.表格标签
table: 声明一个表格

  border: 边框
  cellspacing: 设置表格和表格之间的间距  `**`
			cellpadding: 设置表格中内容距离当前表格边框之间的间距
		tr: 声明一个行
		td/th: 声明一个列 

水平对齐方式：align   `**`
align:默认靠左对其 left
	  center   居中
	  right    靠右对齐
	 如果给tr设置 设置当前行的所有
 如果给td/th  设置当前一列

valign: 默认垂直居中 `**`
	  top:靠上对其
	  bottom:靠下对其
单元格合并： `**`
跨行合并
	rowspan: 设置当前列 占几个行的高度
跨列合并
	colspan: 设置当前列占 几个列的宽度

下面的代码段基本全部覆盖了表格的一些基本标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	 <table border="1" cellspacing="0" width="600" height="300">
	 	<!-- 第一行 -->
		<tr align="center">
			<td>编号</td>
			<td align="right">姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td>简介</td>
			<td>描述</td>
		</tr>
		<!-- 第二行 -->
		<tr>
			<td>1</td>
			<td>吴昊</td>
			<td rowspan="2">男</td>
			<td>18</td>
			<td colspan="2">貌似潘安，身高八尺</td>
			<!-- <td>貌似潘安，身高八尺</td> -->
		</tr>
		<!-- 第三行 -->
		<tr valign="top">
			<td>2</td> 
			<td valign="bottom">王洋洋</td>
			<!-- <td>男</td> --> 
			<td>26</td>
			<td>暖水壶</td>
			<td>暖男一枚</td>
		</tr>
	 </table>

</body>
</html>

2.表单
form声明一个表单域。

属性：
		action:提交地址 如果不写，提交到当前页面
		method: 指定提交数据的方式
			get:默认是get提交
				将数据明文显示在地址栏 相对不太安全
				数据大小受浏览器限制
			post:
				不会将数据明文显示在地址栏 相对安全
				理论上数据大小不受限制	表单的数据是要提交给后台，提交数据的格式一般是键值对
	Uname=用户在用户名框输入的内容  所以表单控件除了按钮都要加name属性
	表单控件的属性：
		name: 必须添加 座位提交数据的key
		value: 代表值
		type: 指定你的控件类型
			text  普通文本输入框
			password 密码输入框
			radio   单选框
				同一组单选框的name属性的值必须相同
				必须设置默认值 value属性
			checkbox: 多选框
				同一组多选框的name属性的值必须相同
				必须设置默认值 value属性

			select>option: 下拉选框 option 选项
				select 必须添加name属性
				option 必须设置value
			textarea:
				文本域/多行文本输入框  双标签

			hidden: 隐藏域
				有些时候有些数据不希望用户看到和修改所以可以使用隐藏域

			提交按钮： type="submit"
				<button>按钮</button>
			单纯的按钮：
				在form 表单域中 type="button"   只是单纯的按钮 没有提交意义

checked 设置单选框和多选框的默认选中状态
	selected 设置下拉选框的默认选中状态  给option设置
	disabled 禁用

代码中都有对以上知识的体现，测试代码的时候需要把图片地址改一下就好了。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	 <form action="./1.py" method="post">
		用户名：<input type="text" name="uname" disabled > <br>
		密码： <input type="password" name="pwd" ;"> <br>
		性别： <input type="radio" name="gender" value="1" checked> 男
			   <input type="radio" name="gender" value="0" > 女
			   <br>
		爱好： <input type="checkbox" name="like" value="1" checked> 女
		       <input type="checkbox" name="like" value="2"> 男
		       <input type="checkbox" name="like" value="3" checked> 学习
				<br>
		地址： 
			<select name="address">
				<option value="0">--请选择地址--</option>
				<option value="1">--商丘--</option>
				<option value="2" selected>--睢县--</option>
			</select>
		<br>
		自我介绍：
			<textarea name="info">我的优快云是A白D</textarea>
		<br>
		小秘密： <input type="hidden" name="uid" value="110">

		<br>
		提交按钮： <input type="submit" value="提交1" disabled> 
				<button>提交2</button>
		<br>
		单纯的按钮：
				<input type="button" value="按钮">
		<br>
 		重置按钮：
 			<input type="reset" value="重置">
 		<br>
 		图片按钮：
 			<input type="image" src="../img/0.jpg">
	 </form>
</body>
</html>

表格中标注*号的是比较重要的且常用的，一定要牢记。
有问题请留言，谢谢