HTML form表单 及CSS 1

#HTML & CSS

###表单标签 form ***

简介:	用于显示与收集用户的信息, 并将信息发送给服务器.

常见用途:	
	1.	用户的登录注册.
	2.	搜索引擎
	3.	商城网站的商品检索
	4.	站内检索
	5.	调查问卷 
		等等

常用属性:
	-	action	:	提交的服务器地址.
	-	method	:	提交数据的方式 (GET / POST ...)
					GET(默认)	:	表单中填写的数据,通过网址提交! 数据按照键值对的方式存储在网址的?后.
					POST		:	表单中填写的数据,通过单独的请求体数据包 发送给服务器.

###表单中常用的子标签 input 标签 ***

输入组件 , 用于接收用户的输入.
在表单提交时, 输入组件的内容 会以键值对的方式 发送给服务器.

属性:
	-	name	:	输入组件的名称, 在数据提交时,是键值对的 键.
	-	value	:	输入组件的内容, 在数据提交时,是键值对的 值. 当输入组件的形态为输入框时, value也是输入框中的内容
	-	placeholder : 当输入组件的形态为输入框,  用于提示用户输入.
	-	checked	:	输入组件为单选/复选框时 , 默认选中. HTML5boolean属性. 属性存在即为true

输入框的形态:
	type属性: 属性值是输入框的各种形态:
		-	text	:	默认值 , 文本输入框.
		-	password:	密码输入框
		-	number	:	数字输入框.
		-	color	:	颜色调色板
		-	radio	:	单选框 , 一组单选框只能选中一个. 通过相同的name属性来分组.
		-	checkbox:	复选框
		-	file	:	文件上传选择框
		
		日期类型的输入组件形态:
			-	date	:	年月日选择框
			-	month	:	年月选择框
			-	week	:	年周选择框
			-	time	:	时间选择框
			-	datetime:	年月日时分选择框 (大多浏览器已经不支持了.)
			-	datetime-local	:	本地时区的  年月日时分选择框.
			
		按钮类型的输入组件形态:
			-	button	:	普通按钮 *
			-	reset	:	重置按钮, 点击后会导致表单所有内容重置.
			-	submit	:	提交按钮 *
			-	image	:	作用与submit一致, 不过此按钮不展示文字, 而是通过src属性展示图片.

		隐藏的输入组件:
			-	hidden	:	隐藏的输入框, 用于隐式的收集用户的信息.

表单中常用子标签 select 和 option 掌握

select	:	下拉选择框
	属性:	
		name属性, 提交数据时的key

option	:	选项
	value属性:	当用户选中后, 提交数据的值

###label标签 了解

用于事件传递的标签. 

使用步骤:
	1.	给接收事件的元素, 添加id属性值. 
	2.	给产生事件的冤死, 外层嵌套一个label , 并指定 for属性值: 接收事件元素的id

###导航页案例

<h1><center>xxx导航页</center></h1>
<h3><center>常用搜索</center></h3>
<form action="https://www.baidu.com/s">
	<center>
		<input name="wd" placeholder="请输入要百度的内容"><input type="submit" value="百度一下">
	</center>
</form>
<form action="http://search.dangdang.com">
		<input name="key" placeholder="请输入要搜索的图书名"><input type="submit" value="搜索图书">
</form>
<form action="https://v.qq.com/x/search/">
		<input name="q" placeholder="请输入要搜索的视频"><input type="submit" value="搜索视频">
</form>
<form action="https://search.jd.com/Search">
		<input name="enc" value="utf-8" type="hidden">
		<input name="keyword" placeholder="请输入要搜索的商品"><input type="submit" value="京东一下">
</form>
<h3><center>常用网址</center></h3>
<center>
<table width="80%" height="400px">
	<tr>
		<td><a href="http://4399.com">4399</a></td>
		<td><a href="http://7k7k.com">7k7k</a></td>
		<td><a href="http://xiaowangzhan.com">嘿嘿你懂</a></td>
		<td><a href="#">常用网址1</a></td>
		<td><a href="#">常用网址1</a></td>

###DIV 与 SPAN标签 ***

DIV:	块元素
SPAN:	行内元素

###网页碎片化开发 了解

iframe 框架标签 , 作用: 用于将一个网页引入到当前的页面中

属性:
	-	src	引入的网页地址
	-	height	:引入的网页的窗口的高度
	-	width	:引入的窗口的宽度.

##CSS

###简介

层叠 cascading 样式 style 表 sheets 

用于调整HTML元素的样式, 通常存储在.css文件中.

优点:	让网页内容 与 网页的样式 完全分离, 提高了代码的复用性 和 维护性 以及 可扩展性.

###样式

样式表中 包含一个个的样式.
每一个样式, 就是样式表中的一个键值对.
格式:
	键与值之间通过冒号连接.
	多个键值对之间通过分号分割.

常见的样式:
	1.	字体大小:	font-size:长度+单位;
	2.	文本颜色:	color:颜色值;
	3.	文字位置:	text-align:left/center/right;
	4.	元素宽度:	width:长度+单位;
	5.	元素高度:	height:长度+单位;
	6.	背景颜色:	background-color:颜色值;
	7.	背景图片:	background-image:url("图片地址");

###CSS的三种使用方式 *****

1.	内联样式表
		定义在 每一个元素的style属性中.
		案例:	<div style="color:red;font-size:50px;">床前明月光, 地上鞋两双.</div>
2.	内部样式表
		定义在网页的style标签中, style标签通常编写在head标签中.
		案例:
			<style>
				div{
					text-align: center;
				}
				#div1{
					font-size:12px;
				}
				.c1{
					background-color: #000;
					color:#fff;
				}
			</style>
3.	外部样式表 ( 推荐 )
		定义在独立的css文件中, 在html的head里通过link标签 引入css文件.
		css文件:
			@charset "UTF-8";
			#div1{
				color:#999;
			}
		link标签:
			<link rel="stylesheet" type="text/css" href="css/demo1.css">

###CSS选择器

作用:	用于将样式给定到选择的一个或一组元素 !

####基本选择器 *****

#####元素名称选择器

作用:	通过元素的名称, 选择一组元素, 将样式给定.

格式:
	元素名称{
		样式列表;
	}

#####id选择器
作用: 通过元素的id, 选择一个元素, 将样式给定.

格式:
	#id值{
		样式列表;
	}

注意:	HTML规则是松散的, 所以id值可以重复.

#####类选择器

作用:	通过元素的class属性值, 来选择一组元素, 将样式给定.

格式:
	.class值{
		样式列表;	
	}

注意:	每一个元素都可以设置class属性值, 值的作用是将元素分类!
		每一个元素都可以设置多个class值, 编写格式: class="值1 值2 值3... 值n"

###CSS样式的三大特性 *****

-	继承性
		部分父元素的样式, 会被子元素继承 !
-	层叠性
		对于同一个元素, 通过多种方式添加的样式, 不冲突的部分 可以叠加. 冲突的部分参考优先级特性.
-	优先级
		样式定义来源优先级:
			1.	内联样式 , 优先级最高.
			2.	相同选择器的情况下 , 定义距离body较近的内部样式表 或 外部样式表.
			3.	浏览器默认样式.
			4.	继承得到的样式.


		选择器优先级:
			在内部样式表和外部样式表中 , 不同选择器的优先级不同:
				1.	id选择器			100
				2.	类选择器			10
				3.	元素名称选择器	1

		绝对优先样式:
			在样式值的后面, 加入绝对优先关键字: !important;

###伪类选择器

####鼠标悬停选择器 *

作用:	当鼠标悬停在元素上方时 , 样式生效! 鼠标离开元素后 , 样式还原!

格式:
	选择器:hover{
		样式列表;
	}

####获取焦点 选择器

作用:	当输入组件正在被用户操作时, 样式生效.  失去焦点后 ,样式还原.

格式:
	选择器:focus{
		样式列表;
	}

###组合选择器 熟悉

优先级权重 计算方式为:  组合中所有选择器 权重的和.

####选择器组

通过多个选择器, 组合起来锁定一个或多个元素. (当多个选择器都满足时, 样式生效.)

格式:
	元素名称选择器选择器1选择器2...选择器n{
		样式列表;
	}

####选择器列表

将一组样式, 给定到多个选择器的结果上. (当任意一个选择器满足, 样式就生效)

格式:
	选择器1,选择器2,...选择器n{
		样式列表;
	}

###派生选择器 *

####子选择器
格式:
选择器1>选择器2{

	}

作用:
	从选择器1选的元素中 , 寻找满足选择器2的子元素.

例如:
	选择器id为div1的元素的  id为heihei的子元素
		#div1>#heihei{

		}

####后代选择器

格式:
	选择器1 选择器2{

	}

作用:
	从选择器1选的元素中 , 寻找满足选择器2的后代元素.

例如:
	选择器id为div1的元素的  id为heihei的后代元素
		#div1 #heihei{

		}

###常用样式

####背景样式

-	背景颜色 *
		background-color:颜色值;
-	背景图片 *
		background-image:url("图片地址1"),url("图片地址2")...;
		多个图片堆叠显示 , 堆叠的顺序是: URL定义的越靠前, 显示时越靠上.

-	背景图片的控制 - 平铺   (了解)
		background-repeat:
			-	repeat	;	默认值平铺
			-	repeat-x	;	仅横向值平铺
			-	repeat-y	;	仅纵向平铺
			-	no-repeat	;	不平铺

-	背景图片的控制 - 缩放   (了解)
		background-size:宽度% 高度%;

-	背景图片的控制 - 滑动   (了解)
		background-attachment:
			-	scroll	:	滑动, 默认效果.
			-	fixed	:	固定

-	背景图片的控制 - 定位 掌握 
		常用于CSS精灵图片
		格式:

		background-position:x偏移值 y偏移值;