45415

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

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form
 <label for="email">输入你的邮箱地址</label>
 <input type="email" id="email" placeholder="Enter email">
</form>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

<input type="text" 文本输入框 type="password" 密码输入框 type="submit"提交按钮 value按钮显示文字 

type="reset"重置按钮value按钮显示文字 

type="number"数字输入框 type="url"网址框 type="email"邮箱框

当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框

name：为文本框命名，以备后台程序ASP 、PHP使用。

value：为文本输入框设置默认值。(一般起到提示作用)

placeholder属性为输入框占位符,里面可以放提示的输入信息。/>

checked：当设置 checked="checked" 时，该选项被默认选中

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

<form    method="post"   action="save.php">
       <label for="username">用户名:</label>
       <input type="text" name="username" />
       <label for="pass">密码:</label>
       <input type="password" name="pass" />
</form>

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

宽高不定实现盒子水平垂直居中:

通常使用定位以及translate完成。

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

已知宽高实现盒子水平垂直居中：

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

元素分类

  在css中，html中的表签元素大体被分为三种不同的类型：块状元素，内联元素和内联块状元素。

<div>、<p>, <h1>....<h6>, <ol>,<ul>,<dl>., <table>,<address>, <blockquote>, <form>

常用的内联元素有；

<a>,<span>,<br>,<i>,<em>,<strong>,<

lable>,<q>,<var>,<cite>, <code>

常用的内联元素块状元素有：

<img>,<input>

p[font-size:12px; text-indent:2em;]

如果元素的font-size:12PX;text-indent:1em那么1em=12px

像素、em p{

  font-size:12px; text-indent:1em;  

}

百分比

p{font-size:12px; line-height:138%}

p{font-size:12px; line-hehight:100%

}

p{font-soze:12px; line-height;100%}

etxt-align设置文本对其方式

text-align设置文本对其方式

text-align设置文本对其方式

text-align设置文本对其方式

letter-spacing:50px;

letter-spacing:50px;

letter_spacing:50px;

letter-spacing:5-px:

letter-spacing:50px;

使用letter-apacing减少或者增字符的空白间距

line-height:1.5em;

line-height:1.5em;

line-height:5em;

line-height:5em;

设置文字间距

设置文字间距

设置文字间距line-height:50px;

设置文字间距line-height：50px；

text-indent:23em

text-indent:2em

text-indent:2em

text_index:2em

text-indent:2em

text-indent:2em

1. text-decoration可以在设置添加到文本的修饰
   

2. text-decoration 默认值为none，定义标准的文本。

3. text-decoration都值为underline为定义文本下的一条线。

4. text-decoration的值为overline为定义文本上的一条线。

5. text-decoration的值为line-theough为定义穿过文本中的一条线，一般用于商品折扣价

   练习：

   text-dercoration

   text-dercoration

   text-dercoration

   text-dercoration

   text-dercoration

   默认值为none， 默认值为none，默认值为none

   underline在文本下加入一条线

   nuderline在文本下加入一条线

   underline在文本下加入一条线

   overline在文本上定义一条线

   overline在文本上添加一条线

   underline在文本下加入一条线

   overline在文本上添加一条线

   line-thourgh横穿文本内容

   line-thourgh横穿文本内容