视频笔记:表格/表单

12 篇文章 0 订阅

//表格

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<table>
			<caption>表格标题</caption>
			<thead>
				<!-- 表格头部  -->
				<tr>
					<th>表格内容标题</th>
					<!-- 表格标题  -->
				</tr>
			</thead>
			<tbody>
				<!-- 表格头部  -->
				<tr>
					<td>内容</td>
				</tr>
			</tbody>
			<tfoot>
				<!-- 表格尾部  -->
				<tr>
					<td>尾部</td>
				</tr>
			</tfoot>
		</table>
	</body>

</html>

th,td都有1px的边距
table加边框只是表格最外层边框
th,td加边框是表格的每个单元格加边距;
table标签的属性(单元格间隙)border-collapse:collapse;(单元格间隙合并,
所有的间隙消失,并且单元格边框按照border设置合并,这时table的边框没有意义)
table标签基本特性:1. display:table;既不是块,也不是内联元素,就是本身属性,多个表格会换行显示;
2.单元格默认平分table的长度和宽度;
3.th中的内容默认加粗,并且左右上下居中;
4.th中的左右居左,上下居中;
5.table的宽度决定了整个表格的宽度(盒子),table里面的单元格宽度会转换为百分比;
6.表格里的每一列必须都有宽度,(否则会随内容的增加而改变表格单元格的宽度)
7.同一列继承最大宽度,同一行继承高度;
图片默认下方是有间隙的,所以显示在表格等中时,想要居中显示,就要设置图片的属性vertical-align:top;

表单:(inline-block)
所有的表单元素都有一个disabled属性,表示禁用

<form method="post" action=">"
            <input type="radio" name="sex" checked id="men"/>
		<label for="men">男</label>
		<input type="radio" name="sex" id="women" />
		<label for="women">女</label>
</form>

<form>标签有外边距,因此在使用时要清除外边距;
按钮,文本域有默认内外边距,下拉列表也有默认外边距;
select/option 下拉选框
对高度的支持不兼容;一般只设置宽度;

textarea 文本域,各个浏览器下的默认滚动条显示不兼容

都要加上:resize:none; 调整尺寸属性;(让textarea不在改变)
textarea在IE下会显示滚动条:如果要去掉,则设置overflow:auto;只有内容溢出时自动出现
outline:none;(焦点线)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值