THML——九

一、 input标签（内联块元素标签，在同一行同时可以设置宽高）

• value：是input中预先放置的文字，当鼠标点击之后依然存在，是值的一部分。
  placeholder：是input中输入位置的默认显示的文字，鼠标点击后仍旧显示，但不属于值，类似于背景。

• placeholder:占位文字（placeholder=“请输入用户名”）

• password:密码

• checked：checked 属性规定在页面加载时应该被预先选定的 input 元素。
  checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。（checked=“checked”）

• option 元素位于 select 元素内部。

• selected： selected 属性规定在页面加载时预先选定该选项。被预选的选项会显示在下拉列表最前面的位置。

• resize:重置尺寸（resize:none;）

type属性

1、文本域text

用户：<input type="text" name="user" placeholder="请输入用户名"  size="20" />

2、密码域password

密码：<input type="password" name="password" placeholder="请输入密码"/>

3、复选框（name不可以重复）checkbox

您的爱好: 唱歌<input type="checkbox" name="check1"/>
                跳舞<input type="checkbox" name="check2"/>
                旅游<input type="checkbox" name="check3" checked="checked" />

4、单选框(name需要重复)radio

男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />

5、简单的下拉列表select

<select name="xueli">
	<option value="benke">本科</option>
	<option value="zhuanke" selected="selected">专科</option>
	<option value="gaozhong">高中</option>
	<option value="chuzhong">初中</option>
</select>

6、多行文本域textarea

<textarea rows="10" cols="50" style="resize:none;">请留言…</textarea>

7、登录submit

<form method="POST" action="psy.php">
	  <label for="u">用户：</label><input type="text" name="user" placeholder="请输入用户名" id="u" /><br/>
	  <label for="w">密码：</label><input type="password" name="password" placeholder="请输入密码" id="w" /><br/>
	  <!-- <input type="submit" name="submit" value="登录">     
	  <input  type="button" name="button" value="登录"> -->   普通按键，可以加a标签进行跳转
	  <button type="submit">登录</button> 
	  <!-- <button type="button">登录</button> -->					普通按键，可以加a标签进行跳转
  </form>

8、重置reset

<input type="reset" value="重置">

二、form标签（表单）

属性：
method=“POST”（大小写都可以） 规定用于发送 form-data 的 HTTP 方法； get默认值 post
action=“psy.php” 规定当提交表单时向何处发送表单数据

三、label标签（写在form标签里面的）

1、<label> 标签为 input 元素定义标注（标记）。

2、label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

3、<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form method="POST" action="psy.php">
    	<label for="u">用户：</label><input type="text" name="user" placeholder="请输入用户名" id="u" /><br/>
    	<label for="w">密码：</label><input type="password" name="password" placeholder="请输入密码" id="w" /><br/>
</form>

四、其他（兼容）

1、改变提示子的颜色各个浏览器的兼容：
value：是input中预先放置的文字，当鼠标点击之后依然存在，是值的一部分。
placeholder：是input中输入位置的默认显示的文字，鼠标点击后仍旧显示，但不属于值，类似于背景。

input::-webkit-input-placeholder {
			color:#f00;
		}/*chrome和苹果浏览器内核*/
	
	input::-moz-input-placeholder {
		color:#f00;
	}/*火狐浏览器内核*/
	
	input::-ms-input-placeholder {
		color:#f00;
	}/*IE浏览器内核*/
	
	input::-o-input-placeholder {
		color:#f00;
	}/*opera浏览器内核*/

2、给input设置高时，同样也要设置要行高（为了网站的兼容性使placeholder文字在ie中正常显示）

input {
			color:#0f0;
			width:200px;
			height: 40px;
			line-height: 40px;
		}

3、二个要搭配使用（层次关系）

position: absolute;
z-index: -9999; 

4、透明度添加链接描述

rgba只会改变自身透明度，而opacity除了改变自身透明度外，其所有后代还会继承其透明度，若后代需要改变其透明度，值要小于等于其父元素的值
opacity: 0.3;
filter:alpha(opacity=30);/*兼容IE*/（这属性要连在一起）

background:rgba(0,0,0,0.7);

5、灰度值

-webkit-filter: grayscale(100%); 谷歌苹果浏览器的兼容
             filter: grayscale(100%);
             百分比越高灰度值越大

6.模糊值

-webkit-filter:blur(10px);谷歌苹果浏览器的兼容
             filter:blur(10px);
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

7、盒子圆角，数值越大，圆角越圆

border-radius: 10px;/*圆角*/

8、input输入点击时消除蓝色的边框？

input中输入是文本框外蓝色变线消失
outline: none;/*文本框外边线*/

9、我们知道，如果想让一个标准流中的盒子居中（水平方向看），可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中或者水平居中？

当元素绝对定位absolute以后，它在父元素的位置是根据top/left/right/bottom来定位的，而margin是根据自身当前位置来定位的

第一个，它距离父元素left:50%,top:50%，那就是父元素一半的距离，因为要实现居中即自身的中点在父元素的中间才算，所以margin-left/margin-top 负的自身宽/	   高的一半，那么正好水平垂直居中。
列如：
width: 400px;
height: 50px;
top: 50%;
left: 50%;
margin: -25px 0px 0px -200px;

10、让不是a标签的标签鼠标也可以让变成手型

cursor: pointer;/*鼠标变为手型*/

11、公共样式

有些浏览器如IE，对img默认是给它加个蓝色外边框，这样看起来会很难看。
 		这个不只是img、inpu，CSS的其他元素都应该首先归零，然后再根据需要自定义，这是一个好习惯，也是前端设计的基本需要。