HTML进阶版(列表标签、表格标签）

雷迪斯and the乡亲们  欢迎你们来到 奇幻的编程世界 

  

继续HTML标签的学习，上篇我们学习了

 1.    文本格式化标签：

•     加粗strong、下划线ins、倾斜em、删除线del

2.     图片标签：

•      img标签 + src属性 + alt属性 + title属性 + width属性 + height属性

3.     路径：

•      相对路径：同级目录 + 下级目录 + 上级目录

4.    音频标签、视频标签：

•      audio标签、   video标签 + src属性 + controls属性

5.    链接标签：

•      a标签 + href属性 + target属性

---

 本篇，我们来学习一下  ，列表标签、表格标签，废话不多说教学走一波！

一 、列表标签

目标： 能够使用 无序列表 、有序列表 、 自定义列表 标签 ， 实现网页中列表结构的搭建

1. 列表的应用场景

> 场景： 在网页中按照行展示关联性的内容 ， 如 ：新闻列表 、排行榜 、账单等

 > 特点 ：按照行的方式 ，整齐显示内容

 > 种类 ：无序列表 、有序列表 、 自定义列表

2.无序标签：

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

标签组成：

> 显示特点：

•      列表的每一项前默认显示圆点标识

> 注意点：

•      ul标签中只允许包含li标签

•      li标签可以包含任意内容

3. 有序列表：

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

标签组成：

显示特点：

•      列表的每一项前默认显示序号标识

注意点：

•      ol标签中只允许包含li标签

•      li标签可以包含任意内容

4.  自定义列表：

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

标签组成：

显示特点：

•      dd前会默认显示缩进效果

> 注意点：

•      dl标签中只允许包含dt/dd标签

•      dt/dd标签可以包含任意内容

二、表格标签

1.    表格的基本标签

场景： 在网页中以行+列的单元格的方式整齐展示和数据 ， 如： 学生成绩表

基本标签：

注意点：

•      标签的嵌套关系：table >  tr > td

•      table标签：表格整体

•      tr标签：表格每行

•      td标签：对于主题的每一项内容

2.    表格相关属性

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

> 常见相关属性：

> 注意点：

•      实际开发时针对于样式效果推荐用CSS设置

3.    表格标题和表头单元格标签

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

其他标签：

注意点：

•      caption标签书写在table标签内部

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

4.    表格的结构标签

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

 结构标签：

注意点：

•      表格结构标签内部用于包裹tr标签

•      表格的结构标签可以省略

5.    合并单元格

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

合并单元格步骤：

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

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

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

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

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

注意点：

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