2025年3月13日 星期四 甲辰(龙)年 月十二 夜 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

HTML基础:列表标签的3种形式以及嵌套列表

时间:02-02来源:作者:点击数:19
城东书院 www.cdsy.xyz

今天聊聊列表标签。列表标签,在网页设计中可以帮助将信息以结构化的方式呈现给用户,提高信息的可读性和易理解性。用途如下2个菜单小场景:

图片
图片

ok,那接下来我们来学习吧。

列表标签的 3 种形式

HTML 中常用的列表标签有 3 种。

1、无序列表(Unordered List):用 <ul> 标签表示,其中每个列表项使用 <li> 标签表示,列表项前面通常有一个特殊符号(如圆点、实心方块)作为标记。

  • <ul>
  •   <li>列表项1</li>
  •   <li>列表项2</li>
  •   <li>列表项3</li>
  • </ul>
图片

用于呈现项目之间没有特定顺序或优先级关系的内容。

常用于创建菜单、项目清单等,后续呢,我们可以通过 CSS 样式来改变标记的样式,如改变标记的形状、颜色等,使其更符合设计需求。

2、有序列表(Ordered List):用 <ol> 标签表示,其中每个列表项同样使用 <li> 标签表示,列表项前面会有自动编号(数字、字母、罗马数字等)。

  • <ol>
  •   <li>列表项1</li>
  •   <li>列表项2</li>
  •   <li>列表项3</li>
  • </ol>
图片

用于呈现有序内容,通常以数字、字母或其他符号形式显示。

适用于排列顺序重要的项目,如步骤、排名等,可以自动编号并且支持通过 CSS 样式进行定制。

3、定义列表(Definition List):用 <dl> 标签表示,其中每个术语使用 <dt> 标签表示,对应的描述使用 <dd> 标签表示。

  • <dl>
  •   <dt>术语1</dt>
  •   <dd>描述1</dd>
  •   <dt>术语2</dt>
  •   <dd>描述2</dd>
  •   <dt>术语3</dt>
  •   <dd>描述3</dd>
  • </dl>
图片

这个标签没有前 2 者常用。它用于呈现术语与其定义之间的关系。

常用于创建词汇表、术语表、定义清单等,通过术语和对应的描述清晰地展示内容之间的关联关系,提供更详细的解释和说明。

可嵌套的列表实例

但也有很多场景下,不是单一的一个列表,而是一个级联的列表。而通过列表标签嵌套分层展示信息,组织复杂多级内容,从而提升提高可读性,提升用户体验的作用。

那一起来看个案例吧。

  • <!DOCTYPE html>
  • <html lang="zh-CN">
  •   <head>
  •     <meta charset="UTF-8" />
  •     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  •     <title>购物清单</title>
  •   </head>
  •   <body>
  •     <h2>购物清单</h2>
  •     <ul>
  •       <li>
  •         生鲜食材
  •         <ul>
  •           <li>
  •             蔬菜
  •             <ul>
  •               <li>青菜</li>
  •               <li>番茄</li>
  •               <li>黄瓜</li>
  •             </ul>
  •           </li>
  •           <li>
  •             水果
  •             <ul>
  •               <li>苹果</li>
  •               <li>香蕉</li>
  •               <li>橙子</li>
  •             </ul>
  •           </li>
  •         </ul>
  •       </li>
  •       <li>
  •         主食
  •         <ul>
  •           <li>
  •             米面粮油
  •             <ul>
  •               <li>大米</li>
  •               <li>面粉</li>
  •               <li>食用油</li>
  •             </ul>
  •           </li>
  •           <li>
  •             面包糕点
  •             <ul>
  •               <li>面包</li>
  •               <li>蛋糕</li>
  •               <li>饼干</li>
  •             </ul>
  •           </li>
  •         </ul>
  •       </li>
  •       <li>
  •         饮料
  •         <ul>
  •           <li>碳酸饮料</li>
  •           <li>果汁</li>
  •           <li>茶饮</li>
  •         </ul>
  •       </li>
  •     </ul>
  •   </body>
  • </html>
图片

在这个示例中,我们使用了 <ul><li> 标签来构建购物清单,其中包括生鲜食材、主食和饮料三个大类。每个大类下面又有二级列表,分别列出了更具体的商品类别,而在二级列表中又有三级列表,展示了具体的商品种类。

最后

在使用时呢,要注意其语义化。

选择合适的列表类型来表达内容关系,这是非常重要的。语义化指的是使用正确的 HTML 标签来描述文档的结构和内容,这样可以让浏览器、搜索引擎和屏幕阅读器更好地理解和解释网页内容。

无序列表(<ul>):适用于表示项目之间没有特定顺序的情况,如导航菜单或项目列表。

有序列表(<ol>):适用于表示项目之间有明确顺序或排列需求的情况,如步骤列表或排行榜。

定义列表(<dl>):适用于表示术语及其定义之间的关系,如字典或说明文档。

正确选择列表类型可以更好地传达文档的含义和逻辑结构,提高页面的可读性和可访问性。

因此,在编写 HTML 文档时,应根据内容的关系和语义来选择合适的列表类型,避免滥用某种类型的列表,以确保文档结构的清晰性和准确性。

城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐