关于按钮

#按钮的设置

##提交按钮&重置按钮

使用提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮，它的type属性值是submit
在提交按钮中可以通过value来指定按钮上的文字
<input type="submit" value="注册" / >

可以创建一个重置按钮，点击重置按钮以后表单中内容将会恢复默认值
<input type="reset"/>

##万能小按钮

<input type="button" value="按钮" / >
<button>按钮<button>
1、原理来讲：button元素和 type=“button”实际应用还是有区别的，button要比input的按钮功能多一些，button元素可以当任何按钮来用，使用范围广
2、input button通常和js一起使用并作为绑定事件处理

##单选按钮 即radio型的input元素

使用input来创建一个单选按钮，他的type属性是radio
单选按钮通过name属性进行分组，name属性相同是一组按钮
需要用户选择但不需要用户直接填写内容的表单，
还必须指定一定value属性，这样被选中的表单value属性会提交给服务器
checked属性，用于该选项的选中状态
性别 <input type="radio" name="gender" value="male" /> 男 

##多选按钮 即checkbox型input元素

<input type="checkbox">
checkbox型传送给服务器的数据类型是布尔型

要对表单进行分组的话，
可以使用fieldset标签，去对多个表单分为一组，fieldset有可以只用legand子标签，来设置组名

##其他的input type类型讲解

1、number型input元素							浏览器预览
	<input type = "number" >					（一个调节数值的栏）
	number型中的元素
	min，max			设置可接受的最小值和最大值
	step					上下调节数值的长度
	value				该调节栏的初始值

2、ranger型input元素						浏览器预览
	<input type = "range">				一个左右拖动的调节
3、下拉列表	select元素 （该元素包含在form标签中）
	<select>
			<option>XX<option>
			<option>XX<option>
			<option>XX<option>
	</select>
	下拉列表的name属性需要指定给select，
	而value属性需要指定给option
	如果要设置默认选项，可以通过在option中添加 select=“selected”
	如果要设置多选，可以在select中 添加multiple=“multiple”
4、用input元素 生成图像按钮
	<input type="image" src="XXXX" width=xx px height=xx px>
5、用input元素上传文件
	<input type="file">
	使用该元素时，特有的属性
	multiple   一次允许上传多个文件
	required 必须上传一个文件

#按钮练习

##图片切换的屏闪

做完切换图片的功能以后，我们会发现图片会有一个特别快的闪烁
这个闪烁会造成一次不佳的用户体验
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独发送一次请求
但我们的外部资源并不是同时加载的，浏览器会在资源被使用时，才去加载资源，所以此功能就是因为，浏览器开始只会加载link.png，因为hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载对应的hover.png
当active被触发时，同理
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致闪烁的情况

##使用雪碧图能有效改变屏闪效果

为了解决上述问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术
优点：
1、将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户的体验
2、将多个图片整合为一张图片里，浏览器只需要发送一次请求，就可以同时加载多个图片，提高访问效率，提高了用户体验
这样只需要通过左右移动图片，即可完成背景的切换

#背景设置
##属性

1、background-image
	设置背景图片 background-image：url(XXX)
2、background-repeat
	用于设置背景的重复方式
	可选值：
	repeat 默认值 背景图片会双向重复
	no-repeat 背景图片不会重复
	repeat-x 背景图片沿水平方向重复
3、background-position
	因为背景图片默认是贴着元素的左上角显示
	通过此属性可以设置背景图片在元素上的位置
	可选值：
		top left 左上
		如果只写了一个值，会在后面默认加上一个center 
		还可以直接指定两个偏移量：
		第一个是水平偏移量，正值向右
		第二个是垂直偏移量，正值向下
4、background-attachment
	用来设置背景图片是否随页面一起滚动
	可选值：
		scroll 默认值 背景图片随窗口滚动
		fixed 背景图片固定在当前位置不随页面滚动
5、background
	该属性可以直接设置所有的背景样式
	没有顺序要求