什么是列表标签？怎样使用HTML列表标签？【demo演示】

更新时间:2022-09-14 来源:黑马程序员浏览量:

列表标签是网页结构中常用的标签，网页中的列表按照列表结构划分通常分为3类，分别是无序列表、有序列表和定义列表。下面对这3类列表标签进行详细讲解。

（1）无序列表

无序列表一种没有特定顺序的列表，各个列表项之间没有先后顺序之分，通常是并列的。定义无序列表的基本语法格式如下：

<ul>
   <1i>列表项1</1i>
   <1i>列表项2</1i>
      <1i>列表项3</1i>
   ...
</ul>

在上述语法中，<u1>标签用于定义无序列表，<li>标签嵌套在<u1>标签中，用于描述具体的列表项，每<ul></ul>中至少应包含一对<li></li>。

下面通过一个案例演示标签的使用。在chapterO1文件夹中创建一个名称为htmlDemo07的HTML.文件，其关键代码如文件1-7所示。

文件1-7 htmlDemo07.html

<body>
     <font size-"5">传智教育学科</font><br />
     <ul>
          <li>web 前端</li>
          <!-指定type属性值，disc为默认值-->
          <li type="disc">JAVA<li>
          <li type-"sqeare">PHP<li>
          <litype-"circle">.NET</li>
     </ul>
</body>

在文件l-7中，<li>标签的type属性用于指定列表项目符号，type常用的属性值有3种：dise、square和circle，它们的显示效果分别是●、■和O。type属性的默认值是disc，第4行代码使用了此默认值，第6行代码设置了type属性值为“disc”。使用浏览器打开文件1-7，结果如图1-10所示。

（2）有序列表

有序列表是一种强调排列顺序的列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定有序列表的基本语法格式如下：

<ol>
   <1i>列表项1</1i>
   <1i>列表项2</1i>
   <1i>列表项3</1i>
   ...
</ol>

在上语法中，<ol>标签用于定义有序列表，<li>为具体的列表项。与无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。序列表的使用与无序列表类似，此处不再赘述。

（3）列表标签

定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即<dl>、<d>、<dd>。定义列表的基本语法格式如下：

<dl>
<dt>名词1</dt>
    <dd>dd是名词1的描述信息1</dd>
    <dd>dd是名词2的描述信息2</dd>
<dt>名词2</dt>
    <dd>dd是名词2的描述信息1</dd>
    <dd>dd是名词2的描述信息2</dd>
</dl>

在上述语法中，<dl>标签用于指定定义列表，<dt>标签和<dd>标签并列嵌套于<dl>标签中。其中，<dt>标签用于指定术语名词，<dd>标签用于对名词进行解释和描述。一对<dt></dt>可以对应<dd></dd>多对，也就是说可以对一个名词进行多项解释。下面通过一个案例演示定义列表标签的使用。在chapter01文件夹中创建一个名称为htmlDemo08的HTML文件，其关键代码如文件1-8所示。

文件1-8 htmlDemo08.html。

<body>
   <dl>
   <dt>红色</dt>
       <dd>是光谱的三原色和四原色之一</dd>
       <dd>代表着吉祥、喜庆、火热、幸福、豪放、斗志、革命、轰轰烈烈，激情激湃等</dd>
   <dt>绿色</dt>
       <dd>是自然界中常见的颜色</dd>
       <dd>绿色有无公害、健康的意思</dd>
   </dl>
</body>

文件1-8中定义了一个定义列表，其中，第35行代码中的标签内名词为“红色”，其后紧跟着2对<dd></dd>标签，用于对<dt>标签中“红色”进行解释和描述;第68行代码中的标签内名词为绿色”，其后紧跟着2对<dd></dd>标签，用于对<dt>标签中“绿色”进行解释和描述。使用浏览器打开文件1-8，显示结果如图1-11所示。

1663148235424_定义列表.png