1. 表格

常见元素:

table 表格
tr (table row) 表格中的行;
td (table data) 行中的单元格;
thead 表格的表头;
th 表格的表头单元格;
tbody 表格的主体;
tfoot 表格的页脚;
caption 表格的标题;

合并边框;

table { border-collapse: collapse; }

单元格的合并

• 跨列合并: 使用colspan
  在最左边的单元格写上colspan属性, 并且省略掉合并的td;

• 跨行合并: 使用rowspan
  在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;

  
  

2.表单

◼ form 表单, 一般情况下，其他表单相关元素都是它的后代元素
◼ input 单行文本输入框、单选框、复选框、按钮等元素
◼ textarea 多行文本框
◼ select、option 下拉选择框
◼ button 按钮
◼ label 表单元素的标题

input元素

• input元素有如下常见的属性:
  type：input的类型
   text：文本输入框（明文输入）
   password：文本输入框（密文输入）
   radio：单选框
   checkbox：复选框
   button：按钮
   reset：重置
   submit：提交表单数据给服务器
   file：文件上传

• 常见属性
  ◼ readonly：只读
  ◼ disabled：禁用
  ◼ checked：默认被选中 只有当type为radio或checkbox时可用
  ◼ autofocus：当页面加载时，自动聚焦
  ◼ name：名字 在提交数据给服务器时，可用于区分数据类型
  ◼ value：取值

• type类型的其他取值和input的其他属性, 查看文档:
  <input>：输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)

3. 布尔属性（boolean attributes）

常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected

布尔属性可以没有属性值，写上属性名就代表使用这个属性

4. 表单按钮

1. 表单可以实现按钮效果:

• 普通按钮（type=button）：使用value属性设置按钮文字
• 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）

• 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

  
  

2. 我们也可以通过按钮来实现:

5. input和label的关系

◼ label元素一般跟input配合使用，用来表示input的标题
◼ labe可以跟某个input绑定(for=id)，点击label就可以激活对应的input变成选中

6. radio的使用

name值相同的radio才具备单选功能

7. checkbox的使用

属于同一种类型的checkbox，name值要保持一致

8. textarea的使用

• textarea的常用属性:

  • cols：列数
  • rows：行数

• 缩放的CSS设置

  • 禁止缩放：resize: none;
  • 水平缩放：resize: horizontal;
  • 垂直缩放：resize: vertical;
  • 水平垂直缩放：resize: both;

9. select和option的使用

• option是select的子元素，一个option代表一个选项
• select常用属性
  • multiple：可以多选
  • size：显示多少项
• option常用属性
  • selected：默认被选中

10. form常见的属性

• form常见的属性如下:
• action
  • 用于提交表单数据的请求URL
• method
  • 请求方法（get和post），默认是get
• target
  • 在什么地方打开URL（参考a元素的target）