浅谈列表<ul>跟<dl>使用注意点及使用的场景

1.无序列表标签<ul>简单介绍:

1.1语义:<ul>标签作用给一组类型相同的数据添加列表的语义,告诉浏览器、搜索引擎<ul>无序列表里的数据是一个整体,他们是没有类似于排行榜上的先后、重要、次要排名上分别的,他们的重要性都一样的。

1.2注意点:<ul>标签里只能嵌套<li>标签,除此之外不能嵌套其他标签,但在<li>标签里可以可以嵌套其他的标签,像它的父级<ul>标签都可以嵌套在里面。

1.3使用的场景:在企业项目开发中,<ul>标签通常用于网站导航条的链接、新闻网站的新闻列表、视频列表,或者用于电商网站商品导航目录的列表或者产品详细列表。如图:

导航条:凤凰网

新闻列表:网易

电商网站商品目录的导航:天猫

2.<dl>标签的介绍:

2.1<dl>标签使用格式:如图

<dt>是自定义列表里的列表项,也是列表的标题英文是definition title,<dd>列表项是对列表项进行描述的,英文是definition description。

2.2<dl>标签语义:<dl>标签也是对一组数据添加列表语义,告诉浏览器这是一个整体,那<dd>标签里的内容时对<dt>里的标题进行描述、解释。例如下图里第一个<dd>标签的文字信息是对<dt>标题里北京进行解释说明。

2.3<dl>标签使用注意:<dl>标签可以嵌套多对<dt><dd>标签,<dt>标签可以有多个<dd>个列表项说明、描述,也可以没有;但一般推荐一个<dd>标签跟一个<dt>标签。<dd>标签可以嵌套其他标签,但列表项<dt>不不能嵌套其他标签。

2.4<dl>标签使用的场合:图文混排、网站底部链接:电商网站底部-购物指南、支付方式。


图文混排


天猫底部链接
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,067评论 25 708
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,045评论 0 66
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,599评论 32 459
  • ·重视与接纳孩子负向情绪的表达与抒发——当父母帮助孩子把情绪的垃圾倒干净了,孩子的内心就不容易藏污纳垢,长大之后才...
    麦子和奇异妈Mi阅读 556评论 0 0