网页设计: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>

效果图:

  1. 湖南
  2. 嘉兴
  3. 河南
  4. 广东

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>

猜你喜欢

转载自blog.csdn.net/QXXXD/article/details/110660514
今日推荐