第一部分表格与表单

猛女永不落泪

已于 2023-11-26 14:55:30 修改

阅读量145

点赞数 3

分类专栏： Web前端基础笔记文章标签：前端 javascript html

于 2023-11-26 14:42:13 首次发布

本文链接：https://blog.csdn.net/weixin_71027798/article/details/134627560

版权

Web前端基础笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Form当中method的post和get的区别?

示例代码：

0020 table表格的基本结构

<table><!-- 创建表格  -->
    <tr><!-- tr 表示行 -->
        <td>1</td><!-- td 表示单元格  -->
        <td>2</td>
    </tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

快捷操作：

table>tr>td+enter=创建表格
table>tr>td*2+enter=创建一行两列的表格
table>(tr>td*2)*2+enter=创建两行两列的表格

0021 table表格的属性

1.宽度 width

2.高度 height

3.边框 border

4.边框颜色 bordercolor

5.背景颜色 bgcolor

6.水平对齐 align="left或right或center”

7.cellspacing=”单元格与单元格之间的间距”

8.cellpadding=“单元格与内容之间的空隙”

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<!-- width px,百分比 （相对于父元素的） -->
		<!-- height px,百分比 （相对于父元素的） -->
		<table border="1" width="50%" height="500px"
		align="center"
		bordercolor="red"
		bgcolor="yellow"
		cellspacing="20"
		cellpadding="18">
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

0022 tr的属性

高度 height
背景颜色 bgcolor
文字水平对齐 align="left或right或center”
文字垂直对齐 valign=“top或middle或bottom”

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<table border="1" width="300" height="300" bgcolor="yellow" align="center">
			<tr bgcolor="orange" height="200" align="center" valign="middle">
				<td>1</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

0023 td的属性

宽度width
高度 height
背景颜色 bgcolor
文字水平对齐 align="left或right或center”
文字垂直对齐 valign=“top或middle或bottom”

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<!-- td:如果一个单元格设置宽度，影响的是这一整列的宽度 -->
		<!-- td:如果一个单元格设置高度，影响的是这一整行的宽度 -->
		<table border="1" width="300" height="300" bgcolor="yellow" align="center">
			<tr>
				<td width="200">1</td>
				<td height="200">2</td>
			</tr>
			<tr>
				<td bgcolor="red">3</td>
				<td align="center" valign="top">4</td>
			</tr>
		</table>
	</body>
</html>

0024 表格合并

Colspan=”所要合并的单元格的列数”必须给td。

Rowspan=“所要合并的单元格的行数”必须给tr。

快捷操作：

table>tr*3>td*3+enter=创建一个三行三列的表格

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<table>
			<tr>
				<td>不毛</td>
				<td colspan="2" rowspan="2">魏国</td>
				<td>辽东</td>
			</tr>
			<tr>
				<td rowspan="2">蜀国</td>
				<!-- <td>西凉</td> -->
				<!-- <td>幽州</td> -->
			</tr>
			<tr>
				<!-- <td>南中</td> -->
				<td colspan="2">吴国</td>
				<!-- <td>荆州</td> -->
			</tr>
		</table>
		</table>
	</body>
</html>

0025 表格案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0" align="center">
			<tr height="50">
				<td width="100">会员姓名</td>
				<td width="150"></td>
				<td width="100">出生日期</td>
				<td width="150"></td>
			</tr>
			<tr height="50" align="center">
				<td>身份证号</td>
				<td colspan="3"></td>
				<!-- <td></td>
				<td></td> -->
			</tr>
			<tr height="50" align="center">
				<td>通信地址</td>
				<td colspan="3"></td>
				<!-- <td></td>
				<td></td> -->
			</tr>
			<tr height="50" align="center">
				<td>联系电话</td>
				<td colspan="3"></td>
				<!-- <td></td>
				<td></td> -->
			</tr>
			<tr height="50" align="center">
				<td>会员卡号</td>
				<td colspan="3"></td>
				<!-- <td></td>
				<td></td> -->
			</tr>
			
		</table>
		</table>
	</body>
</html>

0026 表单标签

A 属性 type定义输入框的类型

a)文本框 type="text” 密码框 type=”password”

b)提交框 type=”submit”和 <button>提交按钮</button>一样

c)按钮框 type=”button”单纯的按钮

d)重置框type=“reset”清空的效果

B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上

C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器

D.属性 value

</form>

Form当中method的post和get的区别?

1.get是从服务器上获取数据，post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程

3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据.

4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IS4 (internet Information Service 互联网信息服务)中最大量为80KB，IIS5中为100KB

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<form action="http://www.jd.com" method="POST">
			用户信息：<input type="text" placeholder="请输入你的用户名,注意大小写"
			name="username"/>
			<br>
			密码：<input type="password" placeholder="请输入你的密码" name="mima"/>
			<br>
			<!-- <input type="submit" value="登录"/> -->
			<button type="submit">登录</button>
			<!-- 提交信息到action指定的地址 -->
			
			
			<!-- <input type="reset" value="重新输一遍吧"/> -->
			<button type="reset">重新输一遍吧</button>
			
			<input type="button" value="aaaaa">
		</form>
	</body>
</html>