H5-表格、表单
1、表格标签
a、table 表格
b、thead 表格头
c、tbody 表格主体
d、tr 表格行
e、th 元素定义表头
f、td 元素定义表格单元
2、表格样式重置
a、table{border-collapse:collapse;}单元格间隙合并(默认:separate分隔)
b、th,td{padding:0;}重置单元格默认填充
3、单元格合并
a、colspan属性规定单元格可横跨的列数。
<td colspan="2"></td>
b、a、colspan属性规定单元格可横跨的列数。
<td rowspan="2"></td>
4、纵向合并不要跨主体标签进行合并。比如从thead到tbody;给表格添加背景颜色,优先考虑给tr/td
二、表单
1、form 表单(action=“” method=“” post get delete put)(<form action="https://www.baidu.com/s">)
2、表单元素:<input type="类型" name="" value=""/>
a、text 文本框 (outline:none;光标移入效果去掉。)
b、password 密码
c、radio 单选
d、checkbox 复选
e、submit 提交
f、reset 重置
g、button 按钮
h、image 图片作为提交按钮<input type="image" src="图片地址" value="后台提交的文字">显示的文字
i、file 上传
j、hidden 隐藏 <input type="hidden">(<input type="hidden" name="marriage" value="未婚">)
k、date 日期选择框 (H5新增类型,不兼容)
l、time 时间选择框 (H5新增类型,不兼容)
3、IE6下 input 背景图兼容
input 的背景图片会跟随文字一起被挤走。
解决办法:不给input加背景,而是用一个额外的标签包含input,然后给这个标签加背景,并将input的背景、边框等设置为none。
4、input属性:
a、label标签为input元素定义标注
<input type="checkbox" name="" id="a">
<lable for="a">········</lable>
b、checked在页面加载时默认选定的input元素。
<input type="checkbox" name=""checked/>
c、disabled属性规定应该禁用input元素。
<input type="checkbox" name="" disabled/>
5、select/option下拉选框
对高度的支持不兼容;
6、textarea文本域
各个浏览器下的默认滚动条显示不兼容
css3新增resize调整尺寸样式属性;
7、outline轮廓线;
A标签轮廓线去除方法:
a、<a herf="#" onfocus="this.blur();">······</a>
b、<a herf="#"hidefocus>····</a>
8、表单提交数据的方式:method
a、.get 默认值
通过地址栏讲师局传输给后端服务器
get 方式可以提交的最大数据是1024字节。
只能提交文本信息
b、post
通过浏览器后台隐藏提交数据给后端服务器
post方式本身提交的数据是没有任何限制的,但是会受网络链接超时,或者服务器最大允许提交文件大小的限制
可以提交各种类型的数据。
9、 表单布局注意事项
1.不要挑战用户的习惯:比如像注册,重置等按钮,用户已经习惯这些按钮的顺序和位置,我们在开发过程中,不要轻易改变这些按钮的顺序和位置。
2.有风险的操作,都应当有的确认提示:比如重置按钮,有可能用户是误点。