HTML列表、表格基础知识

一、列表

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

1、无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul嵌套li，ul是无序列表，li是列表条目。

格式：<ul>

                    <li>第一项</li>

                    <li>第二项</li>

                    <li>第三项</li>

                       .......

          </ul>

注意事项：ul标签只能包裹li标签；

                 li标签里面可以包裹任何内容。

代码：

结果：

2、有序标签

作用:布局排列整齐的需要规定顺序的区域。

标签：ol嵌套li,ol是有序列表,li是列表条目。

格式：<ol>

                    <li>第一项</li>

                    <li>第一项</li>

                    <li>第一项</li>

                          .......

            </ol>

注意事项：ol标签里面只能包裹li标签；

                  li标签里面可以包裹任何内容。

代码：

结果：

3、定义列表

标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。

格式：<dl>

                  <dt>列表标题</dt>

                  <dd>列表描述/详情</dd>

           </dl>

注意事项：dl里面只能包含dt和dd；

                  dt和dd里面可以包含任何内容。

代码：

结果：

二、表格

1、基本使用

标签：table嵌套tr，tr嵌套td/th。

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

注：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

2、表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

代码：

结果：

3、合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格步骤：(1）明确合并的目标；

                           （2）保留最左上的单元格，添加属性（取值是数字，表示需要合并的单元数量）

                                      ——跨行合并，保留最上单元格，添加属性rowspan；

                                      ——跨列合并，保留最左单元格，添加属性colspan；

                           （3）删除单元格

注：不能跨结构标签合并！

代码：

结果：