Web前端Study-HTML基础2

表格的用途

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

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

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

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

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

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

表格常用属性

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新增的表单属性

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