2020-03-13   manu /Front-end/HTML/3.表格和表单.html 99+   8 分钟   1.2 k0次访问

表格与表单

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="1px" align="center">
    <tr>
        <th>a1</th>
        <th>a2</th>
        <th colspan="2">a3</th>
    </tr>
    <tr>
        <td>b1</td>
        <td>b2</td>
        <td>b3</td>
        <td rowspan="2">b4</td>
    </tr>
    <tr>
        <td>c1</td>
        <td>c2</td>
        <td>c3</td>
    </tr>
</table>

用table(块)创建表格

  • tr(row)代表一行

  • td(data cell)代表单元格

  • th(header cell)表头单元格

  • colspan纵向合并

  • rowspan横向合并

  • table和td之间默认有一个距离，使用border-spacing可以设置这个距离
  • border-collapse可以合并表格的边框，设置之后border-spacing失效

合并单元格

1
<td rowspan="2">b4</td>

隔行变色

1
2
3
4
5
6
7
tr:nth-child(even){
    background-color:yellowgreen;
}
tr:hover{
    background-color:red;
}
/*IE8不支持*/

长表格

当表格过长时，需要将表格分为三部分，表头，表格的主题，表格底部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table border="1px" align="center">
	<thead>
 		   <tr>
			<th>a1</th>
			<th>a2</th>
			<th>a3</th>
			<th>a4</th>
   		     </tr>
	</thead>
	<tbody>
		<tr>
			<td>b1</td>
			<td>b2</td>
            <td>b3</td>
			<td >b4</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
			<td>c4</td>
		</tr>
	</tfoot>
</table>

三个标签来表示

  • thead表头
  • tbody主体
  • tfoot表格底部

特点

  • 区分表的不同部分

  • 都是table的子标签

  • 三者随便排序，它们总会按顺序显示

  • 如果没写tbody，浏览器会自己默认写上并将所有tr放入tbody

已经过时的布局方式，表格列数以td最多的决定，表格可以嵌套，耦合程度高，不易维护

完善clearfix

解决了高度塌陷和父子元素垂直外边距重叠问题

1
2
3
4
5
6
7
.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
	clear:both;
}
/*table对父子外边距重叠有效，也对高度塌陷有效*/

表单

作用

向服务器提交信息

  • 比如：注册 登录 百度搜索

  • 使用from标签创建表单，用它提交不同的表单项

格式

1
2
3
4
5
6
7
8
User<input type="text" name="username" />
<br />
Password<input type="password"/>
<br/>
<!-- submit表示提交，value可以自定义提交按钮名字。
在文本框里也可以指定value，它会作为默认值写在框里
-->
<input type="submit" value="注册"/>

  • form必须指定action这个属性，它指向一个服务器地址，表单会提交给这个服务器

  • 用户填写的信息会在url地址后面以查询字符串的形式发给服务器

    • url?字符串
1
http://127.0.0.1:8848/demo01/target.html?username=ffff

  • 多个名值对时

    • 属性名(name)=属性值&属性名=属性值

  • input为内联元素

  • 也可以用button创建提交按钮(type值为submit)

单选按钮

1
2
3
性别<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女
<br><br>
  • input创建单选按钮，type为radio
  • 通过name分组
  • 需要用户选择的表单项，要有value(给服务器)，不然无法区分

多选框

1
2
3
4
5
爱好 <input type="checkbox" name="language" value="Java">Java
<input type="checkbox" name="language" value="C">C
<input type="checkbox" name="language" value="C++">C++
<input type="checkbox" name="language" value="Python">Python
<br><br>
  • 使用input的type为checkbox创建

下拉列表

1
2
3
4
5
6
7
编程难受吗
<select name="coding">
 <option value ="ok">还行</option>
 <option value ="ok2">可以</option>
 <option value ="?">想哭</option>
 <option value ="??">难受</option>
</select>
  • 通过select创建,option创建列表项
  • name给select设置，value给option设置

默认选中

  • 只需要将option添加selected=’selected’即可
1
<option value ="ok2" selected='selected>可以</option>
  • 或者在input加checked=’check’
1
<input type="checkbox" name="language" value="Java" checked='check'>Java
  • 在select中添加multiple=’multiple’，变成多选下拉列表
1
<select name="coding" multiple='multiple'>

在select中使用optgroup（添加label进行分组名）对项进行分组，将option包起来

1
2
3
4
5
6
7
8
9
10
11
12
13
编程难受吗
<select name="coding">

    <optgroup label="自我感觉良好">
        <option value ="ok">还行</option>
        <option value ="ok2">可以</option>
    </optgroup>

    <optgroup label="啥玩意">
        <option value ="?">想哭</option>
        <option value ="??">难受</option>
    </optgroup>
</select>

标签创建文本域

使用textarea可以输入多行文本

1
<textarea></textarea>

按钮

1
2
3
<button type="button">普通的按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>

重置按钮

  • input的type值为reset
  • button的type属性值为reset

普通的按钮

input的type值为button创建按钮

button的type值为button创建按钮

由于button是成对出现的标签，所以更加灵活

其他

  • 提示文字一般都用label包起来，label有一个属性for，通过设值与文本的id值结合，点击文字也可以进入输入框
1
2
<label for="um">User</label>
<input id="um" type="text" name="username" />
  • 使用fieldset标签对表单进行分组
    • legend标签编辑分组名
1
2
3
4
5
6
7
<fieldset>
	<legend>用户信息</legend>
		<label for="um">User</label>
    		<input id="um" type="text" name="username" />
    		<br /><br>
			Password<input type="password"/>
</fieldset>

框架集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset cols="30%,*, 30%">
		<frame src="float.html" >
		<frame src="form.html" >
		<frameset rows="50%,50%">
			<frame src="long table.html" >
			<frame src="navigation_bars.html" >
		</frameset>
	</frameset>
</html>

  • 和内联框架相似，使用frameset创立

  • 特点是可以引入多个页面（利用子标签frame）

  • ros水平排列

  • clos垂直排列

  • 必须设置一个，不然只能加载一个页面

  • 框架集与body不能共存
  • frameset可以嵌套使用
  • 内容不会被检索，而且不能有自己的内容，而且每单独加载一个页面就要加载一个请求

毒瘤IE6不支持png24，需要使用png8才能透明

条件hack

1
2
3
<!--[if IE 6]>
	<p>请远离IE6，谢谢配合</p>
<![endif]-->

因为有一些代码在某些浏览器需要执行，儿某些浏览器不需要执行，这时用

到css-hack

  • 只对IE10以下有效，其他浏览器会识别为注释

  • if后面可以加一个lt，gt，lte，gte，!

属性hack

针对IE浏览器的，尽量不用，具体查w3cschool

1
2
3
_background-color:red;
*background-color:red;
background-color:red\0;

表格与表单

http://yangchaohe.github.io/Front-end/HTML/3.表格和表单.html

作者

manu

发布于

2020-03-13

更新于

2023-01-06

许可协议

# 相关文章
  1.基础
# 推荐文章
  1.ALTER
  2.数据库笔记
  3.微信小程序笔记
  4.动态调试-OD
  5.winPE结构
  6.git指令

喜欢这篇文章？打赏一下作者吧

通知

  • 2021.6.28 公告测试
关注我

:D 一言句子获取中...

最新文章

标签

英语15
语法12
技能大赛-信息安全11
CS6200-28X-EI8
manjaro4
DCFW-1800E-N30023
数据库3
正则表达式3
系统优化3
CPU2
DHCP2
Linux2
MySQL2
PHP2
TCP2
UDP2
bash2
内存2
函数2
剪辑2
查看全部>>
×