HTML高级元素

列表元素

◼ HTML提供了3组常用的用来展示列表的元素

• 有序列表：ol、li
• 无序列表：ul、li
• 定义列表：dl、dt、dd

有序列表 - ol - li

◼ ol（ordered list）

• 有序列表，直接子元素只能是li

◼ li（list item）

• 列表中的每一项

  
  18cb4bbd90d.png

无序列表 - ul - li

◼ ul（unordered list）

• 无序列表，直接子元素只能是li

◼ li（list item）

• 列表中的每一项

  
  18cb4bc7aa5.png

定义列表 - dl - dt -dd

◼ dl（definition list）

• 定义列表，直接子元素只能是dt、dd

◼ dt（definition term）

• term是项的意思, 列表中每一项的项目名

◼ dd（definition description）

• 列表中每一项的具体描述，是对 dt 的描述、解释、补充

• 一个dt后面一般紧跟着1个或者多个dd

  
  18cb4bd8571.png

表格

表格常见元素

◼ 编写表格最常见的是下面的元素:
◼ table

• 表格

◼ tr(table row)

• 表格中的行

◼ td(table data)

• 行中的单元格

◼ 另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

• border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
• table { border-collapse: collapse; }
• 合并单元格的边框

◼ thead 表格的表头
◼ tbody 表格的主体
◼ tfoot 表格的页脚
◼ caption 表格的标题
◼ th 表格的表头单元格

单元格合并

◼ 单元格合并分成两种情况:

18cb4c585f3.png

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

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

  18cb4c536ed.png

表单元素

◼ form

• 表单, 一般情况下，其他表单相关元素都是它的后代元素

◼ input

• 单行文本输入框、单选框、复选框、按钮等元素

◼ textarea

• 多行文本框

◼ select、option

• 下拉选择框

◼ button

• 按钮

◼ label

• 表单元素的标题

input元素的使用

18cb4c9a70d.png

布尔属性（boolean attributes）

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

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

• 如果要给布尔属性设值，值就是属性名本身

  
  18cb4ca4f98.png

表单按钮

◼ 表单可以实现按钮效果:

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

18cb4cb3d26.png

input和label的关系

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

18cb4cbd3b2.png

radio的使用

◼ 我们可以将type类型设置为radio变成单选框:

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

  
  18cb4cc4ccc.png

checkbox的使用

◼ 我们可以将type类型设置为checkbox变成多选框:

• 属于同一种类型的checkbox，name值要保持一致
  18cb4ccd4cc.png

textarea的使用

◼ textarea的常用属性:

• cols：列数
• rows：行数

◼ 缩放的CSS设置

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

select和option的使

◼ option是select的子元素，一个option代表一个选项
◼ select常用属性

• multiple：可以多选
• size：显示多少项

◼ option常用属性

• selected：默认被选中

form常见的属性

◼ form通常作为表单元素的父元素:

• form可以将整个表单作为一个整体来进行操作;
• 比如对整个表单进行重置;
• 比如对整个表单的数据进行提交;

◼ form常见的属性如下:
◼ action

• 用于提交表单数据的请求URL

◼ method

• 请求方法（get和post），默认是get

◼ target

• 在什么地方打开URL（参考a元素的target）