html如何定义列表?彻底搞懂无序列表、有序列表、自定义列表

作者:IT技术 | 时间:2018-10-26

HTML 支持有序列表、无序列表和自定义列表,如何定义这三种列表呢?定义列表都用到那些标签,都有什么区别呢?下面就为大家详解:

有序列表

有序列表使用数字进行标记。 

有序列表始于 <ol> 标签。每个列表项用<li> 标签。

列表项使用数字来标记。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案</title> 
</head>
<body>

<h4>编号列表:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
<h4>罗马数字列表:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
<h4>小写罗马数字列表:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
</body>
</html>

效果如下:

html如何定义列表?彻底搞懂无序列表、有序列表、自定义列表

无序列表

无序使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项用 <li> 标签。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

效果如下:

html如何定义列表?彻底搞懂无序列表、有序列表、自定义列表

自定义列表

自定义列表是项目及其注释的组合。

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

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

html如何定义列表?彻底搞懂无序列表、有序列表、自定义列表