目录
大型IT网站首页的导航栏目均采用列表方式来显示信息。列表分为无序列表、有序列表、定义列表、菜单列表和目录列表五种,常用的是前三种。
1.无序列表
无序列表标志ul(unordered list)为成对标志。表现形式为<ul></ul>,前为开始标志,后为结束标志,两者之前可插入若干个列表项li(list items),即可完成无序列表的插入。
(1)列表ul属性标识
ul用type标记属性,来改变列表项前面的符号,有以下三种属性值:disc(实心圆形)、circle(空心圆形)和square(实心正方形)。
(2)列表项li属性标识
列表项li跟随ul的属性,若需要更改某一项的属性,只需要更改此项的type。
范例如下:
<ul type="disc">
<li>信工</li>
<li>信工</li>
<li >信工</li>
<li type="circle">信工</li>
<li type="square">信工</li>
<li>信工</li>
</ul>
运行结果:
2.有序列表
有序列表ol(ordered list)为成对标志。表现形式为<ol></ol>,前为开始标志,后为结束标志,两者之前可插入若干个列表项li(list items),即可完成有序列表的插入。
有序列表ol和列表项li均可标记属性:
(1)列表ol标记的属性
- type:表示列表项前面的有序编号,有序编号有5种类型:(1.2.3.../A.B.C.../a.b.c.../Ⅰ.Ⅱ.Ⅲ.../i.ii.iii...)。
- start:定义有序列表的起始编号,默认值为1。如设置为非1的值,则列表项的起始编号从设置的值开始排序,如当type="1"设置start="3",则从3开始编号,即列表项的序号为3.4.5...。
(2)列表项li标记的属性
-
type: 设置只改变当前列表项的编号类型,其他列表项仍跟随ol标记的type属性。
-
value:改变当前列表项前面编号的值,并会影响后面所有列表项的编号。
范例如下:
<ol type="i" start="2"></ul> <!--编号类型为"i",起始编号为2,即从ii开始编号-->
<li>信工</li>
<li>信工</li>
<li type="A">信工</li> <!--此项编号类型改为A,但是编号顺序不发生改变,所有为编号是"D"-->
<li>信工</li>
<li>信工</li>
<li>信工</li>
</ol>
运行结果:
<ol type="1" start="1">
<li>信工</li>
<li>信工</li>
<li type="a" value="5">信工</li> <!--此项编号类型改为a,且编号改为5,则后面的项的序号跟随此项重新排序,但编号类型不变。-->
<li>信工</li>
<li>信工</li>
<li>信工</li>
</ol>
运行结果:
3.定义列表
定义列表dl(definition list)为成对标志。表现形式为<dl></dl>,前为开始标志,后为结束标志。
定义列表由dt标记和dd标记组成,<dt>...</dt>用于定义列表中每一个元素的标题,<dd>...</dd>用于描述列表中元素的内容,并且每一个dt标记可由一个或多个dd标记组成。
范例如下:
<dl>
<dt>联系人:</dt>
<dd>张有为</dd>
<dd>性别:男</dd>
<dt>地址:</dt>
<dd>上海市</dd>
</dl>
运行结果:
4.列表的嵌套
顾名思义,在一个列表中嵌入其他的列表称为列表嵌套。
有序列表、无序列表和定义列表,都可以进行混合嵌套。
范例如下:
<!DOCTYPE html>
<html>
<head>
<title>专业建设成果</title>
</head>
<body>
<h2>成功学院专业建设成果</h2>
<ol>
<li>国家一流专业</li>
<li>省级一流专业
<ol type="a">
<li>计算机科学与工程学院
<ul type="disc">
<li>计算机科学与技术专业</li>
<li>软件工程</li>
</ul>
</li>
<li>商学院
<ul type="disc">
<li>会计学专业</li>
<li>审计学专业</li>
</ul>
</li>
</ol>
</li>
<li>市级重点建设专业</li>
<li>校级品牌专业</li>
</ol>
</body>
</html>
运行结果:
需要注意的是,列表嵌套不能交叉嵌套,如:<ul><ol></ul></ol>。在多层嵌套中很容易发生此类情况,导致列表排列出现问题,可对照运行结果多次练习。