Web前端开发——列表

原创于 2025-04-12 22:00:23 发布 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #web

web前端开发专栏收录该内容

8 篇文章

订阅专栏

本节学习目标：

大型 IT 网站(例如网易、搜狐、新浪等)首页的导航栏目均采用列表方式来显示信息。通过对本章列表知识的学习，读者能够了解列表的类型，掌握无序列表、有序列表、定义列表的作用及使用方法；学会使用不同类型列表及嵌套列表来解决网页设计中遇到的一些实际问题。

Web前端开发工程师应知应会以下内容：

1）了解列表的类型。

2）掌握无序列表、有序列表、定义列表标记的语法及属性设置方法。

3）学会使用无序、有序及定义列表设计 Web 网页。

4）学会使用嵌套列表设计小型网站首页。

一、列表概述

使用列表能对网页中的相关信息进行合理的布局，将项目有序或无序地罗列在一起，便于用户浏览和操作。列表分为无序列表、有序列表、定义列表、菜单列表和目录列表5种，常用的列表有3种，分别是无序列表、有序列表、定义列表。列表类型与标记符号如下表所示。

列表类型	标记符号	备注
无序列表	<ul >…</ul>	常用
菜单列表	<menu>…</menu>	不常用
目录列表	< dir >…</dir>	不常用
有序列表	<ol>…</ol>	常用
无序列表	<dl>…</dl>	不常用

二、无序列表

无序列表标记 ul(unordered list)为成对标记，<ul>是开始标记，</ul>是结束标记，在两者之间插人若干个列表项 i(list items)标记,完成无序列表的插人。

2.1 基本语法

<ul type = "">
     <li type="">项目名称</1i>
     <li type="">项目名称</li>
</ul>

2.2 语法说明

ul标记的type属性有3个值，如下表所示。列表项li标记的type 属性的取值与 u标记相同。设置u标记的type属性会使其包含的列表项按统一风格显示，设置其中某一列表项的type属性值时只会影响它自身的显示风格，其他列表项按原样显示。

属性/值	说明
disc	实心图形
circle	空心图形
square	实心正方形

三、有序列表

有序列表ol(orderedlist)标记是成对标记，以<ol>为起始标记，以</o1>为结束标记在其间使用<li></li>标记完成有序列表项目的插人。

3.1 基本语法

<ol type = "" start= "">
    <li type = "" value-"n">项目名称</li>
    <li type = "" value="n">项目名称</1i>
    ...
</ol>

在<ol>、</ol>标记之间必须使用<li></li>标记来添加列表项值。

3.2 属性说明

1)列表ol标记的属性
①type：列表项前面的编号，编号是有序的，有5种类型。

②start：定义有序列表的起始编号，默认值为1。当设置其为非1时，列表项前编号的起始位置会发生改变。例如start="5"，当type="1"时，表示从第5个开始编号；当type="A"时，表示从E开始编号，以此类推。

2)列表项li标记的属性
①type：只影响当前列表项前面的编号类型，后续列表项前面的编号类型依旧遵循ol标记的 type 属性的取值。

②value：改变当前列表项前面编号的值，并影响其后所有列表项编号的值。

有序列表ol标记的属性、取值及说明如下表所示。

属性	取值	说明
type	1	定义有序列表中列表项前面的编号为数字列表
type	A	定义有序列表中列表项前面的编号为大写字母列表
type	a	定义有序列表中列表项前面的编号为小写字母列表
type	Ⅰ	定义有序列表中列表项前面的编号为大写罗马字母列表
type	i	定义有序列表中列表项前面的编号为小写罗马字母列表
start	数值	有序列表中列表项的起始数字

四、列表嵌套

在一个列表中嵌人男个列表，作为此列表的一部分,称为列表嵌套。有序列表、无序列表可以混合嵌套,浏览器能够自动地嵌套排列。
使用列表嵌套不仅能使网页的内容布局更加合理、美观，而且使其内容看起来更加简洁。列表嵌套的方式分为无序列表的嵌套、有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。列表嵌套不能交叉嵌套，例如<ul><ol></ul></ol>是错误的嵌套。当然,定义列表也可以与无序列表、有序列表进行嵌套。

4.1 基本语法

<ul>      <!--   无序列表中中嵌套有序列表  -->
   <1i>项目名称
      <ol>      <!--   有序列表中又嵌套无序列表  -->     
         <li>项目名称</li>
         <li>项目名称
            <ul>
               <li>项目名称</1i>
               <li>项目名称</li>
               ...
            </ul>
         </li>
         <li>项目名称</li>…</ol >
      </ol>
    </li>
    <1i>项目名称</1i>
    <li>项目名称</li>
</ul>

五、定义列表

定义列表 dl(definition list)标记是成对标记，以<dÌ>为首标记，以</dl>为尾标记。定义列表由 dt(definition term)标记和 dd(definition description)标记组成。定义列表中每一个元素的标题使用<dt >…</dt >标记定义;后面跟随<dd>…</dd>标记，用于描述列表中元素的内容。

5.1 基本语法

<dl>
   <dt>项目1</dt>
      <dd>描述1</dd>
      <dd>描述2</dd>
      <dd>描述3</dd>
   <dt>项目2</dt>
      <dd>描述1</dd>
      <dd>描述 2</dd>
   <dt>项目n</dt>
</dl>