当前位置:   article > 正文

HTML:三种列表

HTML:三种列表

1.无序列表

无序列表中通常不分顺序,一般使用一个项目符号表示每个列表项的前缀。无序列表主要使用ul,dir,dl,menu,li几个标签和type属性。
1.1 ul标签
使用ul的开始和结束标签表示无序列表的开始和结束,li的开始和结束表示的是一个列表项,一个ul无序列表可有多个列表项。
语法:

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

1.2 type无序列表类型
默认情况下,无序列表的项目符号为实心圆,而type参数可以调整无序列表的项目符号。
类型值代表的项目符号如下:

  • Disc:实心圆形
  • Circle:空心圆形
  • Square:实心正方形

语法:

<ul type=符号类型>
       <li>第一项</li>
       <li>第二项</li>
       <li>第三项</li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5

li标签也有type参数,设置时只改变此单个列表项的项目符号,类型同上。

2.有序列表

有序列表使用编号来编排项目,而不是使用项目符号。列表中的项目采用数字或英文字母的形式,通常各项目间有先后顺序性。在有序列表中主要使用ol和li两个标签及type和start两个属性。
2.1 ol标签
使用ol的开始和结束标签表示无序列表的开始和结束,li的开始和结束表示的是一个列表项,一个ol无序列表可有多个列表项。默认情况下,采用数字序号进行排列。
语法:

<ol>
       <li>第一项</li>
       <li>第二项</li>
       <li>第三项</li>
</ol>
  • 1
  • 2
  • 3
  • 4
  • 5

2.2 type有序列表类型
默认情况下,有序列表的编号为数字,而type参数可以调整有序列表的编号。
类型值代表的编号如下:

  • 1:数字
  • a:小写英文字母
  • A:大写英文字母
  • i:小写罗马数字
  • I:大写罗马数字

语法:

<ol type=符号类型>
       <li>第一项</li>
       <li>第二项</li>
       <li>第三项</li>
</ol>
  • 1
  • 2
  • 3
  • 4
  • 5

2.3 start有序列表的起始值
默认情况下,有序列表的编号是从数字1开始的,通过start参数可以调整起始数值。这个数值可以对数字、英文字母和罗马数字起作用,且不管是什么编号形式start这个数值都是数字。
语法:

<ol start=起始数值>
       <li>第一项</li>
       <li>第二项</li>
       <li>第三项</li>
</ol>
  • 1
  • 2
  • 3
  • 4
  • 5

3.自定义列表

自定义列表不同于前两种列表,它主要用于名词解释,包含两个层次的列表,第一层是需要解释的名词,第二层是具体的解释。
语法:

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd><dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd></dl>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/92829
推荐阅读
相关标签
  

闽ICP备14008679号