表格表单及样式重置、特性笔记

1.      完整表格标签：

<table><!—表示表格 -->

      <thead><!—表示表格头部 -->（一般thead这个标签对不写）

         <tr><!—表示行 -->

              <th></th><!—表示表格标题 -->

               </tr>

      </thead>

<tbody><!--表格主体 -->（一般tbody这个标签对不写）

            <tr><!-- 行 -->

                 <td></td><!—表示单元格 -->

               </tr>

</tbody>

<tfoot><!--表格尾部 -->（一般tfoot这个标签对不写）

            <tr><!-- 行 -->

                <td></td><!—表示单元格 -->

                            </tr>

      </tfoot>

</table>

2.      table的标签基本特性就是“diasplay:table;”；

3.      表格table注意事项：

a)        不要给table，th，td以外的表格标签加样式（给其他表格标签加样式的话，会出现兼容性问题）；

b)        必须要进行表格css样式重置，当进行表格的单元格间隙合并之后，不仅间隙会消失，而且边框会合并在一起，边框会按照原指定样式设置；

                        i.             具体的表格样式重置代码（/* table css reset */）：

1.        th,td{padding:0;}

2.        table{border-collapse:collapse;}

c)        单元格默认平分table的宽度;

d)        th里面的内容默认加粗并且左右上下居中显示；

e)        td里面的内容默认上下居中，但是左右居左显示；

f)         table决定了整个表格的宽度；

g)        table里面的单元格宽度会被转换成百分比；

h)        表格里面的每一列必须有宽度；

i)          表格同一竖列继承最大宽度；

j)          表格同行继承最大高度；

4.      “colspan:number;”，属性值（number）规定单元格可向右横跨合并的列数（注意记得删除原表格结构中同行多余的单元格）。

5.      “rowspan:number;”属性值（number）规定单元格可向下竖跨合并的行数（注意记得删除原表格结构中向下竖跨合并的行中多余的单元格；另外，合并的行数只能是<tbody></tbody>这个标签对里面的行）。

6.      <td></td>这个标签对的单元格能自动继承这一列上的单元格中的最大宽度。

 

7.      表单元素：

<form action="http://www.miaov.com" method="get"target="_blank">             

<!-- action="http://www.miaov.com"表示表单的接受对象为http://www.miaov.com，method="get"表示该表单的对象获得表单数据的方式为get。 -->

<input type="submit"value="登录" name=""/>         

<!-- type=”submit”表示该input标签为提交按钮；value=””可改变按钮内的文字内容，name=””这个属性一般是给后台用的，一般都会写，方便前段与后台的交互。 -->

<input type="text"name=""/>             

<!-- type=”text”表示该input标签为文本框。 -->  

<inputtype="password" name=""/>           

<!-- type=”password”表示该input标签为密码框。 -->

<input type="radio"name="gender" id="a"/><label for="a">男</label>

<input type="radio"name="gender" id="b"/><label for="b">女</label>          

<!-- type=”radio”表示该input标签为单选按钮。给单选按钮的所有选项的name=””上都加上同一个名称，表示多选一。为了使单选按钮的文字内容也可以用来进行选择选项，通常使用<label for="#id">内容</label>这个标签，不过，要注意的是要给按钮和<label>加id。这样做是为了兼容考虑。 -->

<inputtype="checkbox" name="" disabled="disabled"/>踢足球

<inputtype="checkbox" name="" disabled="disabled"/>打篮球

<inputtype="checkbox" name=""/>旅游

<inputtype="checkbox" name=""/>逛街

<inputtype="checkbox" name="" checked="checked"/>看电影

<input type="checkbox"name=""/>纸牌   

<!-- type=”checkbox”表示该input标签为复选框。在复选选项的属性中加入checked表示默认选中该选项；disabled表示禁用该选项。这两个按钮针对单选按钮也是有用的。-->

<input type="file"name=""/>               

<!-- type=”file”表示该input标签为上传。由于上传的兼容根本不能做，而使用时基本都是用flash做的，所以这个标签基本不用！ -->   

<input src="sun.jpg"type="image" name=""/>          

<!-- type=”image”表示该input标签为图片。图片本身具备提交的功能，但因为一般不会用图片提交，故而这个标签没什么用。 -->

<input type="button"name=""/>                 

<!-- type=”button”表示该input标签为按钮。这个按钮没什么功能，现在相对用的不怎么多，以后学了更懂的东西之后可能用得到。 -->

<input type="reset" name=""/>

<!-- type=”reset”表示该input标签为重置。 -->

<input type="hidden"name=""/>

<!-- type=”hidden”表示该input标签为隐藏。这个标签基本是为了后台所设立的 -->

<select>

<option>1997</option>

<option>1996</option>

<option>1995</option>

<optionselected="selected">1994</option>

<option>1993</option>

<option>1992</option>

<option>1991</option>

<option>1990</option>

</select>

<!--<select></select>表示下拉选框标签对。selected表示下拉选框默认的选项。 -->

<textarea></textarea>

<!-- <textarea></textarea>表示文本域。 -->

</form>

8.      表单元素的IE6问题：当给表单文本框加样式和背景时，在chrome下显示没什么问题。但是在IE6下时，当我们给文本框添入溢出文本框宽的内容时，背景就会随着内容的输入，流动消失。为了不让背景图不消失，我们只需要在这个表单文本框上加入一个div，包住文本框，让div的样式完全和原来的文本框样式一模一样，接着让文本框的宽高和div完全一致，去除边框，去除白色的背景就行了。

9.      以下为完整的样式重置：

body,p,h1,h2,h3,h4,h5,h6,dl,dd{ margin:0; font-size:12px;/*font-family:XX字体;*/}

ol,ul{ list-style:none; padding:0; margin:0;}

a{ text-decoration:none;}

img{border:none;}   

           /* 以下为表格元素样式重置（table cssreset） */

th,td{ padding:0;}

table{ border-collapse:collapse;}

/* 这是为了去除每个单元框之间的空隙。接下来是表单元素样式重置（form css reset）*/

form{ margin:0;}

           /*这是为了兼容IE6下，当出现两个表单时，两个表单之间的margin值。 */

input,textarea{ margin:0;padding:0;}

/* 一般input我们会去写边框样式，所以这里就不用重置border了。表单的大部分标签都是inline-block元素。 */

select{ margin:0;}

/* 在现在的chrome版本中，原先的复选框已经没有margin值了。下拉选框既支持宽，也支持高，但高有兼容性问题，所以一般最多加一个宽度。 */

textarea{ resize:none;overflow:auto; outline:none;}

/* “resize:none;”是为了取消用户可以自动调节文本域大小的功能。" outline:none;"是为了取消当用户选中文本域时，出现的焦点框，但一般情况下，为了用户的体验，最好不要将焦点框取消掉。这条命令也适用于其他表单元素。 */