首页技术文章正文

什么是列表标签?怎样使用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所示。

1663146396370_51.png

(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

分享到:
在线咨询 我要报名
和我们在线交谈!