20220307_HTML标签学习02

一、列表标签

1.无序列表

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

标签组成：

                      ul         表示无序列表的整体，用于包裹li标签

                      li 表示无序列表的每一项，用于包含每一项的内容

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

ul 标签只允许包含li标签、li 标签可以包含任意内容

2.有序列表

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

标签组成：

                      ol          表示有序列表的整体，用于包裹li标签

                       li          表示有序列表的每一项，用于包含每一项的内容

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

ol 标签只允许包含li标签、li 标签可以包含任意内容

3.自定义列表

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

标签组成：

                     dl         表示自定义列表的整体，用于包裹dt/dd标签

                     dt         表示自定义列表的主题

                     dd        表示自定义列表的针对主题的每一项内容

dd前会默认显示缩进效果

dl标签中只允许包含dt/dd标签、dt/dd标签可以包含任意内容        

二、表格标签

1.表格的基本标签

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

基本标签：

          table             表格整体，可用于包裹多个tr

            tr                 表格每行，可用于包裹td

            td                表格单元格，可用于包裹内容

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

2.表格的属性

         border——边框宽度

         width——表格宽度

         height——表格高度

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

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

标签：caption ——表格大标签——表示表格整体大标题，默认在表格整体顶部居中位置显示

          th——表头单元格——表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显                      示 

4.表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分，使语义更加清晰

结构标签：

          thread——表格头部

          tbody——表格主体

          tfoot——表格底部

表格结构标签用于包裹tr标签

5.表格的合并单元格标签

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

上下合并只保留上面的、左右合并只保留左面的

跨行合并：rowspan   跨列合并：colspan

不能跨结构标签合并

今日问题：

合并单元格时按照视频代码练习时显示出错，错误原因是被合并掉的单元格的代码行没有删除，导致合并失败。