HTML - 列表

  »   HTML  »   HTML教程 - 创建列表和使用它们

HTML有三种类型的列表。 <ol> 显示了一个坐标列表,而 <ul>当未排序的以及为制作定义列表被用到时 <dl>. 使用此属性 typestart 根据你的要求制作一个列表。

  • <ul> - 未排序的列表, bullets
  • <ol> - 有序的列表, numbers
  • <dl> - 定义列表

HTML - 有序列表

使用 <ol> 标签用于起动有序列表。而且放 <li></li> (列表项) 在它们之间。

html<h4>Objectives</h4>

<ol>
	<li> 找一个工作 </li>
	<li> 挣很多钱 </li>
	<li> 搬到别的城市 </li>
</ol>

Demo

Objectives

  1. 找一个工作
  2. 挣很多钱
  3. 搬到别的城市

你可以用你所要的任何号码启动你的列表, 只是在它的帮助下指定 开始 属性。

html<h4>Objective</h4>

<ol start="4" >
	<li>找一个工作 </li>
	<li>挣很多钱 </li>
	<li>搬到别的城市 </li>
</ol>

Demo

Objective

  1. 找一个工作
  2. 挣很多钱
  3. 搬到别的城市

这个单元是在common的外面不做任何东西但是有时非常有用。

HTML - 有序列表之其它类型

除了上述的例子以外有序的列表另有4个型。代替普通数表你可用罗马数字或文字但这两种情况下这只能用于小写字母或大写字母。如果你要修改数字的类型请用类型属性。

html<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

根据不同的情况下,这个列表可能是这样的

小写字母大写字母以小写字母的罗马数字以大写字母的罗马数字
  1. 一个工作
  2. 其他城市
  1. 一个工作
  2. 其他城市
  1. 一个工作
  2. 其他城市
  1. 一个工作
  2. 其他城市

未排序列表

您可以创建一个未排序列表 <ul> 以标签的帮助。 未排序列表有三种类型: squares, bullets, and circles. 大多数浏览器所给予的标准值是bullets。

html<h4>Shopping list </h4>

<ul>
	<li>牛奶</li>
	<li>奶酪</li>
	<li>鸡蛋</li>
	<li>糖</li>
</ul>

Demo

Shopping list

  • 牛奶
  • 奶酪
  • 鸡蛋

您可以在下一个例子中看到,所有类型的未排序的列表类似于它。

html<ul type="square">
<ul type="disc">
<ul type="circle">

HTML - 定义列表

还有,你可为制作定义列表使用<dl>;标签。 此列表将会给出上述的字,其定义。它指定此词汇为粗体,这样它会更加明显。

html<dl>
	<dt>克索</dt>
	<dd>奶酪的西班牙语单词</dd>
	<dt>Ordenador</dt>
	<dd>个人电脑的西班牙语单词</dd>
</dt>

Demo

克索
奶酪的西班牙语单词
Ordenador
个人电脑的西班牙语单词