HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记（四）

HTML中列表的作用

HTML中的列表（List）用于呈现按照一定逻辑关系组织的信息，以便用户更好地理解和识别。列表可以分为有序列表、无序列表和定义列表三种类型。

• 有序列表（Ordered List）：用于表示按照一定顺序排列的项目，每个项目都有对应的标记。常见的例子包括步骤、流程等。

• 无序列表（Unordered List）：用于表示没有特定顺序的项目列表，每个项目的标记通常是默认的实心圆点符号。常见的例子包括特征、优点、缺点等。

• 定义列表（Definition List）：用于表示一组术语及其对应的定义或描述，每个术语和对应的定义通常使用

  和
  标签进行标记。常见的例子包括词汇表、术语集合等。

使用列表可以帮助用户更好地理清思路，易于阅读和理解内容。此外，列表还可以通过CSS样式进行美化，增加页面的吸引力和整体性。

HTML中列表的作用是为了更好地组织和呈现信息，使得页面更加清晰易懂。常见的列表类型有无序列表（ul）、有序列表（ol）和定义列表（dl）。

无序列表可以用来列出不需要按照特定顺序排序的项目，每个项目通常前面会有一个小圆点或小方块来标记。

有序列表可以用来列出需要按照一定顺序排序的项目，每个项目通常前面会有一个数字或字母来标记。

定义列表则可以用来列出具有特定定义关系的术语及其对应的定义，在每个术语前面通常会有一个加粗的词条，而对应的定义则紧随其后。

使用HTML中的列表可以让我们更好地呈现和组织信息，并且可以增强页面的可读性和易用性。

除了更好地组织和呈现信息外，HTML中的列表还具有以下作用：

1. 增加结构性：列表可以帮助页面内容的结构更加明确，使其更易于理解和导航。通过使用列表，可以将相关的信息分组，使页面结构更清晰。

2. 提高可访问性：对于一些使用辅助功能的用户来说，列表可以提供更好的可访问性。屏幕阅读器和其他辅助技术可以识别列表，并根据其语义意义提供更准确的信息。

3. 改善搜索引擎优化（SEO）：使用正确的列表结构可以提高搜索引擎对网页内容的理解和索引。搜索引擎爬虫可以更好地识别和解析列表，并理解列表项之间的关联性。

4. 方便样式定制：通过CSS样式可以自定义列表的外观，包括调整标记符号的样式、项目之间的间距等。这样可以使列表在视觉上与页面的整体风格相匹配。

5. 增加交互性：可以为列表项添加链接、按钮或其他交互元素，使用户能够点击列表项进行操作或导航到其他页面。

HTML中的列表不仅可以帮助组织和展示信息，还可以提高可访问性、优化SEO、自定义样式和增加交互性，从而改善网页的用户体验。

介绍html中的有序列表

在HTML中，有序列表（Ordered List）用于表示按照一定的顺序排列的项目。有序列表使用

标签来定义，每个列表项使用
1. 标签来定义。

   下面是一个示例：

   
     
   第一项
     
   第二项
     
   第三项
   
   1
   2
   3
   4
   5

   渲染出来的效果如下：

   1. 第一项
   2. 第二项
   3. 第三项

   可以看到，有序列表会自动为每个项目分配一个数字作为项目的标记。

   有序列表还支持一些属性，可以通过属性来进行额外的控制。以下是一些常用的属性：

   • type：用于指定项目标记的类型。常见的取值有：
     • 1：默认值，使用阿拉伯数字（1, 2, 3…）作为标记。
     • A：使用大写字母（A, B, C…）作为标记。
     • a：使用小写字母（a, b, c…）作为标记。
     • I：使用大写罗马数字（I, II, III…）作为标记。
     • i：使用小写罗马数字（i, ii, iii…）作为标记。

   下面是一个使用type属性的示例：

   
     
   第一项
     
   第二项
     
   第三项
   
   1
   2
   3
   4
   5

   渲染出来的效果如下：

   A. 第一项
   B. 第二项
   C. 第三项

   无序列表

   在HTML中，无序列表（Unordered List）用于表示没有特定顺序的项目列表。无序列表使用

   标签来定义，每个列表项使用
   • 标签来定义。

     下面是一个示例：

     <ul>
       <li>第一项li>
       <li>第二项li>
       <li>第三项li>
     ul>
     1
     2
     3
     4
     5

     渲染出来的效果如下：

     • 第一项
     • 第二项
     • 第三项

     可以看到，无序列表的项目标记通常是默认的实心圆点符号。

     无序列表同样支持一些属性，以下是一些常用的属性：

     • type：用于指定项目标记的类型。常见的取值有：
       • disc：默认值，使用实心圆点作为标记。
       • circle：使用空心圆圈作为标记。
       • square：使用实心正方形作为标记。

     下面是一个使用type属性的示例：

     <ul type="circle">
       <li>第一项li>
       <li>第二项li>
       <li>第三项li>
     ul>
     1
     2
     3
     4
     5

     渲染出来的效果如下：

     ○ 第一项
     ○ 第二项
     ○ 第三项

     定义列表

     在HTML中，可以使用

     、

     和

     标签来定义列表（Definition List）。定义列表用于表示名词及其对应的定义或描述。

     标签定义了一个列表，

     标签定义了每个名词，

     标签定义了每个名词对应的定义或描述。

     下面是一个示例：

     <dl>
       <dt>HTMLdt>
       <dd>超文本标记语言（HyperText Markup Language）的缩写，用于创建网页的标准标记语言。dd>
       
       <dt>CSSdt>
       <dd>层叠样式表（Cascading Style Sheets）的缩写，用于设置网页的样式和布局。dd>
       
       <dt>JavaScriptdt>
       <dd>一种用于编写交互性网页和应用程序的脚本语言。dd>
     dl>
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10

     渲染出来的效果如下：

     HTML
     超文本标记语言（HyperText Markup Language）的缩写，用于创建网页的标准标记语言。

     CSS
     层叠样式表（Cascading Style Sheets）的缩写，用于设置网页的样式和布局。

     JavaScript
     一种用于编写交互性网页和应用程序的脚本语言。

     在定义列表中，

     表示名词，

     表示定义或描述。可以根据需要添加任意数量的名词和对应的定义。

     子元素介绍

     列表是一种常见的HTML元素，用于组织和显示项目或定义的集合。在HTML中，主要有三种类型的列表：无序列表 (

     )、有序列表 (
     ) 和定义列表 (

     )。下面是它们各自的子元素介绍：

     1. 无序列表 (

        ) 的子元素：
        • 无序列表项 (
        • )：无序列表中的每个项目都是一个无序列表项。它可以包含文本、图像、链接等其他HTML元素。每个无序列表项以默认的小圆点或其他样式进行标记，具体样式可以通过CSS进行自定义。

        • 有序列表 (

          ) 的子元素：
          • 有序列表项 (
          • )：有序列表中的每个项目都是一个有序列表项。和无序列表项类似，有序列表项可以包含各种HTML元素作为内容。每个有序列表项都有一个自动生成的顺序编号，如数字、字母或罗马数字等。

          1. 定义列表 (

             ) 的子元素：

             • 定义标题 (
               )：定义列表中的每个术语或名称都需要使用定义标题来标识。通常位于定义列表的起始位置。
             • 定义描述 (
               )：定义列表中的每个术语或名称需要配合一个或多个定义描述来解释或描述其含义。定义描述紧跟在相应的定义标题后面。

          这些子元素在不同类型的列表中扮演不同的角色，但它们都用于将内容组织成具有结构和可读性的列表形式。通过使用适当的列表类型和子元素，可以有效地呈现和传达信息。

          html中的表格标签

          在HTML中，可以使用以下标签创建和格式化表格：

          1. ：定义一个表格。
             ：定义表格中的一行。
             ：定义表格的头部（包含表头）。
             ：定义表格的主体部分（包含数据行）。
             ：定义表格的页脚部分（包含汇总行）。

             下面是一个简单的表格示例：

             <table>
               <caption>学生成绩表caption>
               <thead>
                 <tr>
                   <th>姓名th>
                   <th>科目th>
                   <th>成绩th>
                 tr>
               thead>
               <tbody>
                 <tr>
                   <td>张三td>
                   <td>数学td>
                   <td>90td>
                 tr>
                 <tr>
                   <td>李四td>
                   <td>语文td>
                   <td>85td>
                 tr>
               tbody>
             table>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12
             13
             14
             15
             16
             17
             18
             19
             20
             21
             22

             以上代码会创建一个有两行三列的表格，表格包含了一个标题和表头部分，以及两行数据行。每个单元格都使用

             和标签：用于定义表格的列。例如：

             <table>
               <colgroup>
                 <col style="background-color: #ccc;">
                 <col>
               colgroup>
               <tr>
                 <th>列1th>
                 <th>列2th>
               tr>
               <tr>
                 <td>数据1td>
                 <td>数据2td>
               tr>
             table>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12
             13
             14

             以上代码会创建一个带有两列的表格，第一列的背景色为灰色。

             3. 表格样式：可以使用CSS样式来进一步控制表格的样式，包括表格边框、宽度、对齐方式等，示例代码：

             <style>
               table {
                 border: 1px solid black;
                 border-collapse: collapse;
                 width: 100%;
               }
               th, td {
                 border: 1px solid black;
                 padding: 8px;
                 text-align: left;
               }
             style>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12

             以上代码定义了表格的边框样式、宽度等属性，以及单元格的内边距和文本对齐方式。

             4. 表格排列和对齐：可以通过使用
             、和标签来将表格分成不同的部分，然后利用CSS样式来控制这些部分的样式。

             例如，以下代码会将表格的表头行和数据行颜色分别设为蓝色和白色，并使表头行文本居中对齐：

             <style>
               th {
                 background-color: blue;
                 color: white;
                 text-align: center;
               }
               tbody tr {
                 background-color: white;
               }
             style>
             
             <table>
               <thead>
                 <tr>
                   <th>编号th>
                   <th>名称th>
                   <th>价格th>
                 tr>
               thead>
               <tbody>
                 <tr>
                   <td>1td>
                   <td>商品1td>
                   <td>100元td>
                 tr>
                 <tr>
                   <td>2td>
                   <td>商品2td>
                   <td>200元td>
                 tr>
               tbody>
             table>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12
             13
             14
             15
             16
             17
             18
             19
             20
             21
             22
             23
             24
             25
             26
             27
             28
             29
             30
             31
             32

             5. 响应式表格：可以使用CSS媒体查询来创建响应式表格，以适应不同屏幕大小的显示。例如，以下代码会在屏幕宽度小于600像素时，将表头单元格变为顺序列表示，而不是水平排列：

             <style>
               table {
                 border-collapse: collapse;
                 width: 100%;
               }
               th, td {
                 border: 1px solid black;
                 padding: 8px;
                 text-align: left;
               }
               @media only screen and (max-width: 600px) {
                 th {
                   display: block;
                 }
               }
             style>
             
             <table>
               <thead>
                 <tr>
                   <th>编号th>
                   <th>名称th>
                   <th>价格th>
                 tr>
               thead>
               <tbody>
                 <tr>
                   <td>1td>
                   <td>商品1td>
                   <td>100元td>
                 tr>
                 <tr>
                   <td>2td>
                   <td>商品2td>
                   <td>200元td>
                 tr>
               tbody>
             table>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12
             13
             14
             15
             16
             17
             18
             19
             20
             21
             22
             23
             24
             25
             26
             27
             28
             29
             30
             31
             32
             33
             34
             35
             36
             37
             38

             以上代码会在屏幕宽度小于600像素时，将表头单元格以顺序列表示，而不是水平排列。

             表格中的单元格如何合并

             表格中的单元格可通过使用colspan和rowspan属性来合并单元格，具体方式如下：

             1. 合并列（colspan）：将一个单元格跨越多列的宽度，即占据多列。

             <table>
               <tr>
                 <th>姓名th>
                 <td colspan="2">张三td>
               tr>
               <tr>
                 <th>年龄th>
                 <td>20岁td>
                 <td>男td>
               tr>
             table>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11

             以上代码会创建一个表格，其中第二行第一列为"姓名"，第二列和第三列合并成一格，显示"张三"。

             2. 合并行（rowspan）：将一个单元格跨越多行的高度，即占据多行。

             <table>
               <tr>
                 <th rowspan="2">1th>
                 <th>2th>
                 <td>atd>
               tr>
               <tr>
                 <th>3th>
                 <td>btd>
               tr>
               <tr>
                 <th>4th>
                 <td>ctd>
                 <td>dtd>
               tr>
             table>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12
             13
             14
             15
             16

             以上代码会创建一个表格，其中第一列的第一行和第二行合并成一格，显示数字"1"。
             当需要合并多行和多列时，可以同时使用colspan和rowspan来实现更复杂的单元格合并。

             以下是一个示例，演示如何在表格中合并多行和多列的单元格：

             <table>
               <tr>
                 <th rowspan="2">产品th>
                 <th colspan="2">销售额th>
               tr>
               <tr>
                 <th>第一季度th>
                 <th>第二季度th>
               tr>
               <tr>
                 <td rowspan="3">Atd>
                 <td>100td>
                 <td>200td>
               tr>
               <tr>
                 <td>150td>
                 <td>250td>
               tr>
               <tr>
                 <td>120td>
                 <td>180td>
               tr>
             table>
             1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12
             13
             14
             15
             16
             17
             18
             19
             20
             21
             22
             23

             以上代码会创建一个表格，其中有一个合并了两行和两列的单元格。第一列的"产品"单元格跨越了三行，而第一行的"销售额"单元格跨越了两列。

             框架标签

             框架标签（和）已被废弃，不再建议在 HTML 中使用，因为它们与现代 Web 开发的语义化和可访问性准则不兼容。

             相反，建议使用

             ：定义表格的标题。

             ：定义表头单元格，通常位于表格的第一行。	：定义数据单元格，用来显示表格中的数据。
             或	标签进行定义。 除了上述基本的表格标签之外，HTML还提供了一些其他属性和标签来格式化表格。 colspan和rowspan属性：用于跨列或跨行合并单元格。例如： <tr> <th rowspan="2">编号th> <th>姓名th> <td>张三td> tr> <tr> <th>性别th> <td>男td> tr> 1 2 3 4 5 6 7 8 9 以上代码会创建一个表格，其中第一列跨两行，第二行中第一列为"姓名"，第二列为"性别"。