共计 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> |
正文完