共计 1101 个字符,预计需要花费 3 分钟才能阅读完成。
- 无序列表
- 有序列表
- 自定义列表
1,无序列表
无序列表的标签是:
<ul> 无序列表 </ul>
定义一个无序列表:
<li>
定义一个列表项;<ul>
标签里还有 type 属性,指定的是无序列表的符号;
type 的值有以下几个:
- disc: 实心的圆点,默认值
- circle: 空心的圆
- square: 实心的正方形
例:
<ul type="circle">
<li> 湖南 </li>
<li> 江苏 </li>
<li> 河南 </li>
<li> 郑州 </li>
</ul>
效果图:
- 湖南
- 江苏
- 河南
- 郑州
2,有序列表
有序列表的标签是
<ol> 有序列表 </ol>
ordered list 的缩写,有序列表其实就是带有序号的列表,
type 属性的取值为:
- 1. 序号为 1.2.3.4.……
- A. 序号为 A.B.C.D.……
- a. 序号为 a.b.c.d.……
- I 序号为 I.II.III.IV.……
- i 序号为 i.ii.iii.iv.……
例:
<ol type="A"start="1">
<li> 湖南 </li>
<li> 嘉兴 </li>
<li> 河南 </li>
<li> 广东 </li>
</ol>
效果图:
- 湖南
- 嘉兴
- 河南
- 广东
3,自定义列表
自定义标签的构造是:
<dl> 自定义标签 </dl>
定义一个自定义列表
<dt>
列表项的题目<dd>
列表项的形容
例:
<body>
<dl>
<h3> 唐诗三百首 </h3>
<dt> 静夜思 </dt>
<dd> 床前明月光,疑是地上霜。举头望明月,抬头思故土。</dd>
<dt> 绝句 </dt>
<dd> 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。</dd>
</dl>
</body>
示例:
<html>
<head>
<meta charset="UTF-8">
<title> 列表标签 </title>
</head>
<body>
喜好
<ol type="A" start="3">
<li> 玩手机
<li> 看电视
<li> 听音乐
</ol>
<!-- ol 定制有序列表,type 属性设置有序列表前每一项前的系数,蕴含(a,A,i,I,1)-->
<!-- start 属性设置系数从那一项开始 -->
<!-- li 定制有序列表中独自的一项 -->
<hr>
喜好
<ul type="square">
<li> 玩手机
<li> 看电视
<li> 听音乐
</ul>
<!-- ul 定制无序列表,type 定制每一项前的系数类型,蕴含(disc,square,circle)-->
<hr>
<dl>
<dt> 喜好
<dd> 玩手机
<dd> 看电视
<dd> 听音乐
</dl>
<!-- dl 定制列表,dt 定制列表题目,dd 定制列表我的项目 -->
<hr>
</body>
</html>
正文完