三种列表标签

三种列表

标签	语义
<ul></ul>	无序列表
<ol></ol>	有序列表
<dl></dl>	定义列表

有序列表

• 无序列表使用<ul></ul>标签，每个列表项都是<li></li>标签

<ul>
	<li>面包</li>
	<li>牛奶</li>
	<li>鸡蛋</li>
	<li>水果</li>
</ul>

• 无序列表是一个父子组合标签，上阵父子兵，不能单独出现
• 当HTML标签形成嵌套，必须注意代码的缩进（Tab键）
• <li>标签不能单独使用，它必须放到<ul>或者<ol>中使用
• HTML规定，<ul>的子标签只能是<li>，绝对不能出现其它任何标签
• <li>标签是容器，内部可以放任何其他标签

<ul>
	<li>面包</li>
	<li>
		牛奶
		<p>要脱脂或低脂的</p>
	</li>
	<li>鸡蛋</li>
	<li>水果</li>
</ul>

无序列表的type属性

无序列表有type属性，可以定义前导符号的样式，但是在HTML5中已经被废弃，建议使用CSS替代

值	描述
disc	默认值，实心圆
circle	空心圆
square	实心方块

有序列表

• 有序列表使用<ol></ol>标签，每个列表项都是<li></li>标签

<ol>
	<li>小慕</li>
	<li>小明</li>
	<li>小红</li>
	<li>小强</li>
</ol>

• <li>标签不能散着放，它必须是<ol>标签或者<ul>标签的子标签
• <ol>的子标签只能是<li>标签
• <li>标签中可以放任何东西

<ol>标签的type属性

• ol标签可以设置type属性，用来设置编号的类型

type属性值	意义
a	表示小写英文字母编号
A	表示大写英文字母编号
i	表示小写罗马数字编号
I	表示大写罗马数字编号
1	表示数字编号（默认）

<ol>标签的start属性

• start属性值必须是一个整数，指定了列表编号的起始值
• 此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type属性可能指定为了罗马数字编号等其他类型的编号

<ol>标签的reversed属性

• reversed属性指定列表中的条目是否是倒序排列的
• reversed属性不需要值，只需要写reversed单词即可，这是HTML5的全新特性

<ol reversed>
</ol>

定义列表

<dl>
	<dt>北京</dt>
	<dd>我国首都、政治中心、文化中心</dd>
	<dt>上海</dt>
	<dd>国际经济、金融、科技创新中心</dd>
	<dt>深圳</dt>
	<dd>经济特区，国际化都市</dd>
</dl>

• 需要逐条给出定义描述的列表，就是定义列表
• <dl>是定义列表标签，内容交替出现<dt>、<dd>标签
• 也允许<dt>、<dd>不交替出现，而是分别处于不同的定义列表中

<dl>
	<dt>北京</dt>
	<dd>我国政治中心、文化中心、国际交往中心、科技创新中心</dd>
</dl>
<dl>
	<dt>上海</dt>
	<dd>我国国际经济、金融、贸易、航运、科技创新中心</dd>
</dl>
<dl>
	<dt>深圳</dt>
	<dd>中国经济特区、全国性经济中心城市和国际化城市</dd>
</dl>

哪里应该使用定义列表

• 使用什么标签，不应该看样式，应该看语义
• 只要语义上有解释说明含义的文字，且为列表形态，应该使用定义列表