HTMLCSS学习笔记（六）----表格表单及样式重置，特性
- 表格
<!DOCTYPE HTML> <html> <head> <title>...</title> </head> <body> <table> <!-- 表格 --> <thead> <!-- 表格头部 --> <tr> <!-- 行 --> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <!-- 表格主体 --> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <!-- 表格尾部 --> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </ftoot> <!-- 表格尾部 --> </table> </body> </html>
table css reset：
th，td｛padding：0；｝
table｛ border-collapse: collapse；｝ 单元格属性合并
注意事项：
1，不要给table，th，td以外的表格标签加样式。
2，table的标签基本特性是 display： table ；
3，单元格默认平分table的宽度；
4，th 里面的文字默认加粗并且左右上下居中显示；
5，td里面的内容默认上下居中左右居左显示；
6，table 决定了整个表格的宽度；
7，table 里面的单元格宽度会被转换成百分比；
8，表格里面的每一列必须有宽度；
9，表格同一竖列继承最大宽度；
10，表格同行继承最大高度；
- 单元格合并
<td colspan="3"></tdx>
属性规定单元格可横跨的列数，被合并的列数去掉
<td rowspan="3"></tdx>
属性规定单元格可横跨的行数，被合并的列数去掉
- 表单元素
<form action="http://www.cnblog.com/" method="get" target="_blank">
提交按钮：<input type="submit" value="提交OK"/ name="">
</form>
</br></br>
文本框 : <input type="text" name=""/>
</br></br>
密码框：<input type="password" name=""/>
</br></br>
单选按钮 ：
<label>
<input type=“radio” name="gender"/ >男
</label>
<label>
<input type=“radio” name="gender"/ >女
</label>
两者取同一个名字是或的关系
<br/><br/>
复选框：
<input type="checkbox" name=""disabled>逛街<!-- 禁止禁用 -->
<input type="checkbox" name="">健身
<input type="checkbox" name="">直排
<input type="checkbox" name="">美食
<input type="checkbox" name=checked/>旅游 <!-- 默认选中 -->
<br/><br/>
<hr/>
上传：<input type="file" name=""/>
<br/><br/>
图片：<input src="xxx.jpg" type="image" name=""/>
<br/><br/>
按钮：<input type="button" name""/>
<br/><br/>
重置：<input type="reset" name""/>
<br/><br/>
隐藏：<input type="hidden" name""/>
<br/><br/>
<hr/>
<select>
<option >1990</option>
<option>1991</option>
<option selected>1992</option> <!-- 默认显示 -->
<option>1993</option>
</select>
<br></br>
文本域: <textarea></textarea>
默认样式重置：
form｛margin：0；｝
input｛margin:0; padding:0;｝有默认两像素的边框
select｛margin：0；｝一般不控制高度
textarea｛margin:0;padding:0;｝
