HTML列表

前端 潘老师 7个月前 (10-16) 149 ℃ (0) 扫码查看

HTML列表用于指定信息的列表。所有列表可以包含一个或多个列表元素。有三种不同类型的HTML列表:

  • 有序列表或编号列表(ol)
  • 无序列表或符号列表(ul)
  • 描述列表或定义列表(dl)

注意:我们可以在另一个列表内创建一个列表,这将被称为嵌套列表。

HTML有序列表或编号列表

在有序HTML列表中,默认情况下,所有列表项都以数字标记。它也被称为编号列表。有序列表以<ol>标签开始,列表项以<li>标签开始。

<ol>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ol>  

点击这里查看HTML有序列表的完整详情。

HTML无序列表或符号列表

在HTML无序列表中,所有列表项都用符号标记。它也被称为符号列表。无序列表以<ul>标签开始,列表项以<li>标签开始。

<ul>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ul>  

点击这里查看HTML无序列表的完整详情。

HTML描述列表或定义列表

HTML描述列表也是HTML和XHTML支持的列表样式。它也被称为定义列表,其中条目被列在类似于字典或百科全书的方式。

当您想呈现词汇表、术语列表或其他名称-值列表时,描述列表非常适用。

HTML描述列表包含以下三个标签:

  • <dl>标签定义列表的开始。
  • <dt>标签定义一个术语。
  • <dd>标签定义术语的定义(描述)。
<dl>  
  <dt>Aries</dt>  
  <dd>-One of the 12 horoscope sign.</dd>  
  <dt>Bingo</dt>  
  <dd>-One of my evening snacks</dd>  
 <dt>Leo</dt>  
 <dd>-It is also an one of the 12 horoscope sign.</dd>  
  <dt>Oracle</dt>  
  <dd>-It is a multinational technology corporation.</dd>   
</dl>  

点击这里查看HTML描述列表的完整详情。

HTML嵌套列表

一个列表内部的列表被称为嵌套列表。如果您想在一个有序列表内部有一个符号列表,那么这种类型的列表将被称为嵌套列表。

代码:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Nested list</title>  
</head>  
<body>  
    <p>List of Indian States with thier capital</p>  
<ol>  
    <li>Delhi  
        <ul>  
            <li>NewDelhi</li>  
        </ul>  
    </li>  
    <li>Haryana  
        <ul>  
            <li>Chandigarh</li>  
        </ul>  
    </li>  
    <li>Gujarat  
        <ul>  
            <li>Gandhinagar</li>  
        </ul>  
    </li>  
    <li>Rajasthan   
        <ul>  
            <li>Jaipur</li>  
        </ul>  
    </li>  
    <li>Maharashtra  
        <ul>  
            <li>Mumbai</li>  
        </ul>  
    </li>  
    <li>Uttarpradesh  
        <ul>  
            <li>Lucknow</li></ul>  
    </li>  
</ol>  
</body>  
</html>  

支持的浏览器

Element  Chrome  IE  Firefox  Opera  Safari
<ol><ul><dl> Yes Yes Yes Yes Yes

版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/9624.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】