前端HTML5 +CSS3 3. HMTL基础 1 列表标签 && 2 表格标签

前端HTML5 +CSS3

老师：黑马程序员

二. HMTL基础

1 列表标签

1.1 列表的应用场景

• 场景:在网页中按照行展示关联性的内容，如:新闻列表、排行榜、账单等
• 特点:按照行的方式，整齐显示内容
• 种类:无序列表、有序列表、自定义列表

1.2 无序列表

1.2.1 无序列表使用

场景:在网页中表示一组无顺序之分的列表，如︰新闻列表。

标签组成：

• 显示特点:
  列表的每一项前默认显示圆点标识
• 注意点:
  • ul标签中只允许包含li标签
  • li标签可以包含任意内容

1.2.2 小结

• 无序列表由几个标签组成?分别表示什么?

  • ul标签:表示无序列表的整体

  • li标签:表示无序列表的每一项

• 无序列表标签的嵌套规范是什么?

  • ul标签中只允许嵌套li标签
  • li标签中可以嵌套任意内容

1.3 有序列表

1.3.1 有序列表使用

场景:在网页中表示一组有顺序之分的列表，如︰排行榜。

标签组成：

• 显示特点:
  列表的每一项前默认显示序号标识
• 注意点:
  • ol标签中只允许包含li标签
  • li标签可以包含任意内容

1.3.2 有序列表小结

• 有序列表由几个标签组成?分别表示什么?

  • ol标签:表示无序列表的整体
  • li标签:表示无序列表的每一项

• 有序列表标签的嵌套规范是什么?

  • ol标签中只允许嵌套li标签

  • li标签中可以嵌套任意内容

1.4 自定义列表

1.4.1 自定义列表使用

场景:在网页的底部导航中通常会使用自定义列表实现。

标签组成:

• 显示特点:
  • dd前会默认显示缩进效果
• 注意点:
  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容

1.4.2 自定义列表小结

• 自定义列表由几个标签组成?分别表示什么?
  • dl标签:表示自定义列表的整体
  • dt标签:表示自定义列表的主题
  • dd标签:表示对于主题的每一项内容
• 自定义列表标签的嵌套规范是什么?
  • dl标签中只允许嵌套dt/dd标签
  • dt/dd标签中可以嵌套任意内容

1.5 列表标签小结

无序列表最常用，有序列表偶尔用，自定义列表底部导航用

2 表格标签

2.1 表格的基本标签

2.1.1 表格标签介绍

场景:在网页中以行+列的单元格的方式整齐展示和数据,

基本标签

注意点：标签的嵌套关系: table > tr > td

2.1.2 表格标签小结

• 完成一个简单的表格，需要由几个标签组成?分别表示什么?
  table标签:表格整体
  tr标签:表格每行
  td标签:对于主题的每一项内容
• 表格基本标签的嵌套规范是什么?
  table > tr > td

2.2 表格的相关属性

2.2.1 表格的相关属性介绍

场景:设置表格基本展示效果

常见相关属性

注意点：实际开发中推荐使用CSS样式

2.2.2 表格的相关属性小结

• 给表格添加边框，可以使用什么属性完成?
  border属性
• 设置表格整体的宽高，可以使用什么属性完成?
  width属性:表格整体的宽度
  height属性:表格整体的高度

2.3 表格标题和表头单元格标签

2.3.1 表格标题和表头单元格标签介绍

场景:在表格中表示整体大标题和一列小标题

注意点：

• caption标签书写在table标签内部
• th标签书写在tr标签内部（用于替换td标签)

2.3.2 表格标题和表头单元格标签小结

• 表示表格整体大标题，使用什么标签完成?书写在什么位置?
  表格整体大标题:caption标签
  书写在table标签内部
• 在表格第一行设置一列的小标题，使用什么标签完成?书写在什么位置?
  表头单元格:th标签
  书写在tr标签内部（用于替换td标签)

2.4 表格的结构标签

2.4.1 表格的结构标签介绍

场景:让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签

注意点：

• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略

2.4.2 表格的结构标签小结

• 表格的结构标签分别有哪些?表示什么含义?
  thead:表格头部
  tbody:表格主体tfoot:表格底部
• 表格结构标签书写在什么位置?
  表格结构标签写在table标签内部表格标签内部用于包裹tr标签

2.5 合并单元格

2.5.1 思路

场景:将水平或垂直多个单元格合并成一个单元格

2.5.2 代码实现

步骤

1. 明确合并哪几个单元格

2. 左上原则，确定保留谁、删除谁

   • 上下合并→只保留最上的，删除其他
   • 左右合并→只保留最左的，删除其他

3. 给保留的单元格设置：跨行合并rowspan和跨列合并colspan

   

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨: thead、tbody、tfoot)

2.5.3 小结

• 合并单元格的步骤分哪几步?

  • 1.明确合并哪几个单元格

  • 2．通过左上原则，确定保留谁删除谁

    • 上下合并→只保留最上的，删除其他
    • 左右合并→只保留最左的，删除其他

  • 3.给保留的单元格设置:跨行合并（rowspan）或者跨列合并(colspan)

    • rowspan:跨行合并→垂直方向合并

    • colspan:跨列合并→水平方向合并

• 可以跨结构标签合并单元格吗?.不能