html列表共有几种?有什么区别?

在HTML中,主要有两种类型的列表:有序列表(Ordered List)和无序列表(Unordered List)。

  1. 无序列表(Unordered List):使用 <ul> 标签定义。无序列表中的每个列表项使用 <li> 标签定义。默认情况下,无序列表中的列表项前面会带有小圆点作为项目标记。这种列表通常用于展示一系列的项目,而不强调它们的顺序。

示例:

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>
  1. 有序列表(Ordered List):使用 <ol> 标签定义。有序列表中的每个列表项也使用 <li> 标签定义。与无序列表不同,有序列表中的列表项前面会带有数字或字母作为项目标记,表示项目的顺序。这种列表通常用于展示需要按照顺序排列的项目。

示例:

<ol>
  <li>打开浏览器</li>
  <li>输入网址</li>
  <li>按下回车键</li>
</ol>

区别

  • 标记不同:无序列表使用小圆点作为项目标记,而有序列表使用数字或字母作为项目标记。
  • 用途不同:无序列表主要用于展示一系列不强调顺序的项目,而有序列表则用于展示需要按照顺序排列的项目。
  • 语义不同:从语义上看,<ul> 表示的是一个无序的列表,而 <ol> 则表示的是一个有序的列表。这有助于屏幕阅读器等辅助技术正确解读网页内容,提高网站的可访问性。

除了这两种基本列表外,HTML5还引入了一种新的列表类型:定义列表(Definition List),使用 <dl> 标签定义。这种列表通常用于展示一系列术语和定义,其中 <dl> 包含多个 <dt>(定义术语)和 <dd>(定义描述)元素。然而,从严格意义上讲,定义列表并不属于传统意义上的“列表”,而是更偏向于一种描述性的结构。

posted @   王铁柱6  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示