HTML基础之表格、表单

表格的用途

1. 页面布局（已废弃：单元格会根据内容大小自动调节、表格自动调节会比较消耗性能）
2. 展示数据

画一个最简单的表格只需3个标签

<table>
    <tr>
        <td></td>
    </tr>
</table>

table：表格容器、放在最外面
tr ：行
td ：单元格
th : 标题单元格(加粗、居中效果)

分层的表格(为了语义化)

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>  
    </tbody>  
    <tfoot>
        <tr>
            <td></td>
        </tr> 
    </tfoot>  
</table>

表格常用属性

<table width="宽度" 
align="left|center|right" 
border="边框宽度" 
bordercolor="边框颜色" 
cellpadding="单元格填充" 
cellspacing="单元格间距">

cellpadding: 单元格内部空白的大小
cellspacing: 单元格与单元格之间的距离

跨行与夸列(合并单元格)

td、th的属性：
colspan:夸列【左右关系的合并】
rowspan:跨行【上下关系的合并】

给表格添加标题

<table>
    <caption>
    <thead>
    <tbody>
    <tfoot>

表单元素

<input />   : 普通的文本框、可以写任何内容

<input type="password" />  : 密码框、以密文形式显示的

<input type="radio" name="自定义" checked/>  : 单选框、checked默认选中

<input type="checkbox" checked/>   : 复选框

<input type="file" />   : 文件域、文件上传

<select>    : 下拉菜单、selected表示默认值
    <option>选项一</option>
    <option selected>选项二</option>
</select>

<textarea rows="" cols=""></textarea> : 多行文本框、rows代表高度、cols代表宽度

<input  readonly/> : 只读

<input disabled /> : 禁用（不能修改、并且数据是不会发送出去的）

<input value="默认值"/>

<button>提交按钮</button>：点击之后form里面的所有数据都会提交出去

<button type="button">普通按钮</button>：没有任何效果

<button type="reset">重置按钮</button>：恢复表单初始效果

H5新增的表单元素

<input type="url">用于包含URL地址的输入域
<input  type="email">用于包含e-mail地址的输入域
<input type="search">用于搜索域
<input type="tel">用于输入电话号码的文本域
<input type="number" min="1" max="5" step="1" value="3" >用于包含数值的输入域
<input type="range" value="5" max="20" min="1" step="2">用于包含一定范围内数字值的输入域
<input type="color">用于选取颜色
<input type="date">用于从一个日期选择器选择一个日期
<input type="datetime-local">用于选择一个日期和时间
<input type="month">用于选择一个月份
<input type="week">描述一年中的第几周
<input type="time">描述时间

H5新增的表单属性

max 属性：规定输入域所允许的最大值
min 属性：规定输入域所允许的最小值
step 属性：为输入域规定合法的数字间隔
list属性：实现数据列表的下拉效果
form属性：输入域所属的表单
required 属性：规定必须在提交之前填写输入域
multiple 属性：规定输入域中可选择多个值
placeholder 属性：描述输入域所期待的值
autofocus属性：自动获取焦点
autocomplete属性：自动完成