网页设计:HTML列表标签
- 无序列表
- 有序列表
- 自定义列表
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>
发表评论 (审核通过后显示评论):