表格标签:
table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元
表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td>
rowspan 属性规定单元格可横跨的行数。
<td rowspan="2"></td>
form 表单
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
label 标签为 input 元素定义标注
<input type="checkbox" name="" id="a"/>
<label for="a">……</label>
checked 在页面加载时默认选定的 input 元素。
<input type="checkbox" name="" checked/>
disabled 属性规定应该禁用 input 元素。
<input type="checkbox" name="" disabled/>
select/option 下拉选框
对高度的支持不兼容;
textarea 文本域
各个浏览器下的默认滚动条显示不兼容
css3新增 resize 调整尺寸属性;
outline 轮廓线;
A标签轮廓线去除方法:
1、<a href="#" onfocus="this.blur();">……</a>
2、<a href="#" hidefocus>……</a>
表单元素兼容性问题
IE6下input背景滚动;
滑动门:
滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。
CSS精灵
CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得十分成熟。大部分公司要求前端工程师必须使用CSS 精灵,处理图片;
CSS精灵 优点:
利用CSS 精灵能很好地减少了网页的http请求次数,从而大大的提高了页面的性能,这也是CSS 精灵最大的优点;减少图片大小
CSS精灵 缺点:
降低开发效率;
维护难度加大;