codecamp

HTML 列表

HTML 列表


HTML 支持有序、无序和定义列表:

HTML 列表

有序列表

  1. The first list item
  2. The second list item
  3. The third list item

无序列表

  • List item
  • List item
  • List item

在线实例

无序列表
本例演示无序列表。

有序列表
本例演示有序列表。

(可以在本页底端找到更多实例。)


HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签:

实例

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>


尝试一下 »

浏览器显示如下:

  • Coffee
  • Milk

HTML 有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。您可以通过本站的编程测试来练习创建有序列表

实例

<ol>       

<li>Coffee</li>      

<li>Milk</li>       

</ol>


尝试一下 »

浏览器中显示如下:

  1. Coffee
  2. Milk

HTML 自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。  

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义,如果只有术语名或者只有定义也是可行的,也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

实例

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>


尝试一下 »

浏览器显示如下:

Coffee
- black hot drink
Milk
- white cold drink

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。


更多实例

不同类型的有序列表
本例演示不同类型的有序列表。

不同类型的无序列表
本例演示不同类型的无序列表。

嵌套列表
本例演示如何嵌套列表。

嵌套列表 2
本例演示更复杂的嵌套列表。

自定义列表
本例演示一个定义列表。


HTML 列表标签

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定义列表的描述


HTML 表格
HTML 区块
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }