H5学习---html，css---css优化，浏览器兼容，表单表格

css优化

css方面
	1.提取公共的css样式作为一个单独的css文件引入
页面头部
	1.描述
		<meta name="Description" content="天天低价手机"/>
	2.关键字
		<meta name="Keywords" content="低价,促销,折扣,正品"/>
图片优化(alt属性，title属性)
超链接优化
	建议纯文本
CSS Reset / css重置
css命名优化
合理的代码结构

图片整合

- CSS Sprites/雪碧图/精灵图
	将小图标拼合在一整张大图上，使用背景定位方式引入
- 优势
	1.通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。
	2.通过整合图片来减小图片的体积
- 图片整合原则
	1.根据实际需求，小图标尽量上下排列(防止后面不必要的背景图)
	2.小图标之间尽量留出足够的空间
	3.整合大图片的背景一定是透明的
	4.列表符号的图标尽量放在图片最右侧
	5.一般情况下，小图标才会做整合

浏览器兼容

- ***五大浏览器内核
	Trident:IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
	Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台
	Webkit :代表作品Safari、Chrome ， 是一个开源项目。
	Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎
		它也是世界上公认的渲染速度最快的引擎。
	Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

- IETester:IE6--11
- CSS Hack指一种兼容CSS在不同浏览器中正确显示的技巧方法：
	1.图片间隙
		img设置display:block;或者vertical-align:不为baseline;
		父元素设置font-size:0;
	2.浮动双倍外边距(IE6会碰到)
		display:inline;
	3.表单元素高度及对齐方式不一致
		浮动起来,再调节高度
	4.a标签包裹图片
	5.透明写法
		opacity:0~1;IE8以上的浏览器
		filter:alpha(opacity=1~100); IE9及IE9以下的浏览器
	6.cursor鼠标移入效果
		pointer小手/hand(IE)
- 特殊符号进行IE浏览器的兼容
	IE6识别_-
	ie6,7识别*+#
	ie8识别\0
	ie9识别在属性后\9\0

表单

- 单选按钮
	<input type="radio" name="gender" value="secret" checked/>秘密
- 复选框
	<input type="checkbox" name="hobby" value="bb"/>篮球
	相同的name值不同的value值
	checked代表默认被选中,checked="checked"可以简写成checked
- label关联文本
	第一种方法：label的for属性不要写
	<label>
		<input type="checkbox" name="agree" value="sign"/>我同意
	</label>
	第二种方法：label的for属性关联控件的id属性
	<label for="box">我同意开通此协议</label>
	<input type="checkbox" name="agree" value="sign" id="box"/>
- 下拉菜单
	<select name="cities" size="5">
		<option value="cd">成都</option>
		<option value="ls">乐山</option>
		<option value="dz">达州</option>
		<option value="nc">南充</option>
	</select>
	size属性值为显示的条数
- 多行文本域
	<textarea name="txt" rows="5" cols="40" class="intro">请自我介绍</textarea>
	- rows行数
	- cols列的字符数
	- css提供resize:none;禁止用户更改尺寸
- 文件上传
	<input type="file" />
- 表单字段集
	<fieldset id="">
		<legend>标题</legend>
		<p>内容内容内容内容内容内容内容内容内容</p>
	</fieldset>

表格

1.表格外边距border-spacing(给table添加)
2.单元格合并
***	border-collapse:collapse合并;(给table添加)
3.隐藏无内容的单元格
	empty-cells:hide;  
	不能进行单元格合并border-collapse:collapse
	使用合并不会隐藏无内容单元格
4.表格布局方式
	table-layout:auto自动/fixed固定;
自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的
	缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）
	优点：灵活
固定表格布局
	优点：加快运行的速度,允许浏览器更快的对表格进行布局
	缺点:不太灵活
	-table加宽度，每一列也加宽度就能固定
5.标题<caption></caption>
	caption-side: bottom;可以控制表格标题位置
6.表格行分组
	表头thead--tr--th(居中并且加粗)
	表主体tbody--tr--td
	表尾tfoot--tr--td