浅谈列表
    使用注意点及使用的场景

1.无序列表标签

    简单介绍:

    1.1语义:

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

        1.2注意点:

          标签里只能嵌套
        • 标签,除此之外不能嵌套其他标签,但在
        • 标签里可以可以嵌套其他的标签,像它的父级
            标签都可以嵌套在里面。

            1.3使用的场景:在企业项目开发中,

              标签通常用于网站导航条的链接、新闻网站的新闻列表、视频列表,或者用于电商网站商品导航目录的列表或者产品详细列表。如图:

              导航条:凤凰网

              浅谈列表<ul>跟<dl>使用注意点及使用的场景_第1张图片

              新闻列表:网易

              浅谈列表<ul>跟<dl>使用注意点及使用的场景_第2张图片

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

              浅谈列表<ul>跟<dl>使用注意点及使用的场景_第3张图片

              2.

              标签的介绍:

              2.1

              标签使用格式:如图

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

              浅谈列表<ul>跟<dl>使用注意点及使用的场景_第4张图片

              2.2

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

              浅谈列表<ul>跟<dl>使用注意点及使用的场景_第5张图片

              2.3

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

              2.4

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


              浅谈列表<ul>跟<dl>使用注意点及使用的场景_第6张图片
              图文混排


              浅谈列表<ul>跟<dl>使用注意点及使用的场景_第7张图片
              天猫底部链接

你可能感兴趣的:(浅谈列表