1、表格 用table标签,标签 table的标签基本特性是 display:table;
<thead> 表格头部
<tbody> 表格主体
<tfoot> 表格尾部
<tr>行
<th>表格标题
<td>单元格
一般只用<tbody>
colspan 属性规定单元格可横跨的列数 只能放在th,td标签中<th colspan=‘2‘>
rowspan 属性规定单元格可横跨的行数 只能放在td标签中<td colspan=‘2‘>
例:
<table>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
注意事项:
1、不要给table,th,td以外的标签加样式,会存在不兼容问题
标签th,td有内边距,使用时候去掉
2、单元格默认平分table宽度,高度
3、th里面的文字默认加粗,并且左右上下居中显示
4、td里面的文字默认上下居中,左右居左显示
5、table决定了整个表格的宽度
6、table里面的单元格宽度会被转化成百分比;
7、表格里面的每一列必须有宽度;保证表格的样式不会被内容撑开太多
8、表格的同一竖列继承最大宽度,同一横行继承最大高度
2.<form> 表单标签
<form action="目标" method-"get" target="_blank"/>
<input type="submit" value="提交OK"/> 提交按钮
<input type="text" name=""/> 文本框 文本内容只能为单行
<input type="password" name=""/> 密码框
(
<input type="radio" name="gender" id="a"/><label for="a">男</label> 单选框
<input type="radio" name="gender"/ id="b"> <label for="b女</label>
)
</label>文字和单选按钮相连接 点击文字也能选到单选框
(
<input type="checkbox" name="" disabled/> 旅游
<input type="checkbox" name="" disabled/> 建设
<input type="checkbox" name="" checked/> 美食
check 默认选中 disabled 默认静掉
)复选框
<input type="file" name=""/>上传
<input src="" type="img" name=""/>图片 也具备提交功能
<input type="button" name=""/> 按钮功能 没有任何功能
<input type="reset" name=""/> 重置 一般不用
<input type="hidden" name=""/> 一个隐藏按钮 前端没有 对于后台有用处
(
<select>
<option>1</option>
<option>2</option>
<option selected>3</option>
</select>
) 下拉选框 没加selected 默认第一行 加selected 会默认第3行
文本域 :<textarea></textarea>文本内容可以多行
下滑 可以用overflow:auto 来处理 焦点框用outline:none
存在一些兼容性问题
注意事项:
form标签有外边距
input有默认margin,padding
selct默认margin
textarea有默认margin,paddiing
form表单都支持宽高,都是一个inline-block属性