HTML基础之表格、表单

电玩女神 2023-02-27 05:43 36阅读 0赞

### 文章目录 ###

*  表格的用途
 *  画一个最简单的表格只需3个标签
 *  分层的表格(为了语义化)
 *  表格常用属性
 *  跨行与夸列(合并单元格)
 *  给表格添加标题
 *  表单元素
 *  H5新增的表单元素
 *  H5新增的表单属性

# 表格的用途 #

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

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

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

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

# 表格常用属性 #

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

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

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

# 给表格添加标题 #

# 表单元素 #

<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属性**：自动完成