JAVA学习10_19学习总结

最新推荐文章于 2024-08-07 09:14:10 发布

五目炒饭

最新推荐文章于 2024-08-07 09:14:10 发布

阅读量139

点赞数

分类专栏： Java学习--一阶段文章标签： java 学习

本文链接：https://blog.csdn.net/weixin_53118395/article/details/127415949

版权

Java学习--一阶段专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML中的表格元素，包括table、tr、th、td等，以及如何设置表格属性如边框、间距、对齐和背景色。还展示了单元格合并的方法，通过rowspan和colspan属性实现。接着讨论了HTTP的GET和POST提交方式的区别，如数据可见性、保密性和数据量限制。最后，给出了一个包含文本框、密码框、单选按钮、复选框、下拉列表、文本域和表单按钮的完整表单示例，并展示了如何美化表单布局。

摘要由CSDN通过智能技术生成

1.表格标签

table 表格标签
               table标签属性：
                   表格边框线：border (单位像素，越大边框越粗)
                   单元格和边框线之间的空隙：cellspacing (如果设置为0，则与单元格重合)
                   宽度：width
                   高度：heigth
                   设置表格对齐方式：align
                       居中：center(常用)(整个表格居中)
                   设置表格背景颜色：bgcolor
                   给表格设置标题：caption
           行标签：<tr> </tr>
               属性：align 设置行内容如何对齐
                   居中：center(常用) <tr align="center"></tr>
           单元格标签(列标签)：<td> </td>
           单元格表头信息：<th> </th>(自动居中加粗)

<body>
		<table border="1" cellspacing="0" width="600px" height="600px" align="center" bgcolor="aqua">
			<caption>人员信息表</caption>
			<tr>
				<th>姓&ensp;&ensp;名</th>
				<th>性&ensp;&ensp;别</th>
				<th>年&ensp;&ensp;龄</th>
				<th>住&ensp;&ensp;址</th>
				<th>联系方式</th>
			</tr>
			<tr align="center">
				<td>张三</td>
				<td>男</td>
				<td>20</td>
				<td>西安市</td>
				<td>123</td>
			</tr>
			<tr align="center">
				<td>李四</td>
				<td>男</td>
				<td>20</td>
				<td>西安市</td>
				<td>456</td>
			</tr>
			<tr align="center">
				<td>王五</td>
				<td>女</td>
				<td>15</td>
				<td>西安市</td>
				<td>789</td>
			</tr>
			<tr align="center">
				<td>赵六</td>
				<td>女</td>
				<td>15</td>
				<td>西安市</td>
				<td>147</td>
			</tr>
		</table>
	</body>

2.单元格合并

单元格合并
                   td属性：
                       合并行：rowspan
                       合并列(合并单元格)：colspan

<body>
		<table border="1" cellspacing="0" width="600px" height="600px" align="center" bgcolor="aqua">
			<caption><b><i><font color="coral">人员信息表</font></i></b></caption>
			<tr>
				<th>姓&ensp;&ensp;名</th>
				<th>性&ensp;&ensp;别</th>
				<th>年&ensp;&ensp;龄</th>
				<th>住&ensp;&ensp;址</th>
				<th>联系方式</th>
				<th>成&ensp;&ensp;绩</th>
			</tr>
			<tr align="center">
				<td>张三</td>
				<td rowspan="2">男</td>
				<td rowspan="2">20</td>
				<td>西安市</td>
				<td>123</td>
				<td>10</td>
			</tr>
			<tr align="center">
				<td>李四</td>
				<!-- <td>男</td> -->
				<!-- <td>20</td> -->
				<td>西安市</td>
				<td>456</td>
				<td>10</td>
			</tr>
			<tr align="center">
				<td>王五</td>
				<td rowspan="2">女</td>
				<td rowspan="2">15</td>
				<td>西安市</td>
				<td>789</td>
				<td>10</td>
			</tr>
			<tr align="center">
				<td>赵六</td>
				<!-- <td>女</td> -->
				<!-- <td>15</td> -->
				<td>西安市</td>
				<td>147</td>
				<td>10</td>
			</tr>
			<tr align="center">
				<td colspan="5">平均成绩</td>
				<td>10</td>
			</tr>
		</table>
	</body>

3.get&post面试题

get&post提交方式有什么区别?
                           get提交方式：
                                   1.get提交的数据会显示在地址栏上
                                   2.get提交数据不具有保密性，不适合提交用户的私密数据
                                   3.get提交数据是提交在地址栏上，所以提交的数据量有限，当提供数据量过大时，会出错！
                           post提交方式：
                                   1.post提交数据到服务器，不会显示在地址栏上
                                   2.post提交数据不会显示在地址栏，所以保密性相对于get方式要好
                                   3.post提交数据到服务器，所以提交数据的大小没有限制！

4.表单标签

form 表单标签
                   属性：
                       链接服务器地址：action
                               提交方式：method
                                           get&post
           表单标签中的元素，都必须填name="自定义名称" ,方便服务器获取用户输入信息
               输入类型元素：input
                       属性：
                           文本框：type="text"
                           密码输入框：type="password"
                           单项按钮：type="radio"
                           复选框：type="checkbox"
                           日期组件：type="date"
                           文件上传组件：type="file"
                           普通按钮：type="button" (结合默认属性值value使用)
                           特殊按钮：type="submit" (特殊的提交按钮，结合value使用，将用户信息提交到action)
                           重置按钮：type="reset" (字面意思)
                           隐藏域：type="hidden" (没有显示效果，可以提交数据)
               下拉标签：select
                       子标签：
                           下拉选项：option
               文本域：textarea
                       指定书写的行数：rows
                       一行能写多少字符：cols
               提示标签：placeholder(没有输入内容时，文本框内的提示信息)
               输入框默认值：value

<body>
		<form action="04_get&post面试题.html" method="get">
			用户名：<input type="text" name="userName" placeholder="请输入用户名" /><br />
			密&ensp;&ensp;码：<input type="password" name="passWord" placeholder="请输入密码" /><br />
			性&ensp;&ensp;别：<input type="radio" name="Sex" value="1" />男
							<input type="radio" name="Sex" value="0" />女
		<br />
			爱&ensp;&ensp;好：<input type="checkbox" name="看书" value="看书" />看书
							<input type="checkbox" name="篮球" value="篮球" />篮球
							<input type="checkbox" name="足球" value="足球" />足球
							<input type="checkbox" name="打游戏" value="打游戏" />打游戏
		<br />
			籍&ensp;&ensp;贯：<select value="请选择">
							<option>请选择</option>
							<option>西安</option>
							<option>兰州</option>
							<option>北京</option>
							<option>上海</option>
			</select>
		<br />
			自我介绍：<textarea rows="6" cols="10" placeholder="请展示自己"></textarea>
		<br />
			<input type="reset" value="清空" /><input type="submit" value="提交" />
		</form>
	</body>

5.好看的表单

自己写的实例

<body background="img/钟离%20.png">
		<form action="04_get&post面试题.html" method="get">
			<table border="1" cellspacing="0" width="600px" height="600px" bgcolor="aliceblue" align="center">
				<tr align="center">
					<th colspan="3">
						<b><font color="burlywood">用户注册界面</font></b>
					</th>
				</tr>
				<tr align="center">
					<td>
						<font color="burlywood">用户名：</font>
					</td>
					<td colspan="2">
						<input type="text" name="userName" placeholder="请输入用户名" />
					</td>
				</tr>
				<tr align="center">
					<td>
						<font color="burlywood">密&ensp;&ensp;码：</font>
					</td>
					<td colspan="2">
						<input type="password" name="passWord" placeholder="请输入密码" />
					</td>
				</tr>
				<tr align="center">
					<td>
						<font color="burlywood">性&ensp;&ensp;别：</font>
					</td>
					<td colspan="2">
						<input type="radio" name="Sex" value="1" /><font color="burlywood">男</font>
						<input type="radio" name="Sex" value="0" /><font color="burlywood">女</font>
					</td>
				</tr>
				<tr align="center">
					<td>
						<font color="burlywood">籍&ensp;&ensp;贯：</font>
					</td>
					<td colspan="2">
						<select value="请选择">
							<option>请选择</option>
							<option>西安</option>
							<option>北京</option>
							<option>南京</option>
							<option>上海</option>
						</select>
					</td>
				</tr>
				<tr align="center">
					<td>
						<font color="burlywood">邮&ensp;&ensp;箱：</font>
					</td>
					<td colspan="2">
						<input type="email" placeholder="请输出邮箱地址" />
					</td>
				</tr>
				<tr align="center">
					<td>
						<font color="burlywood">申请理由：</font>
					</td>
					<td colspan="2">
						<textarea placeholder="请认真说明！" rows="10" cols="20"></textarea>
					</td>
				</tr>
				<tr align="center">
					<td colspan="3">
						<input type="reset" value="清空" />
						<input type="submit" value="提交" />
					</td>
				</tr>
			</table>
		</form>
	</body>