列表标签

无序列表(unordered list)

  • 作用:给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是
  • 格式 li是list item的英文缩写

选择居住城市(CN)

  • 北京
  • 上海
  • 广州
  • 深圳

ul应用场景:

  • 导航条
  • 商品列表等
  • 新闻列表
列表标签_第1张图片
647982-cce6353650391dac.jpg
列表标签_第2张图片
647982-eaf081bc414de382.jpg
列表标签_第3张图片
647982-f89d54db7fb76071.jpg

注意事项:

  • 这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)"北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为"中国雾霾排行", 那么就必须有严格的排名,北京必须写在前面
  • 浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
  • 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
  • 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
  • ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
  • 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
  • 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签
    例如:

列表清单

  • 蔬菜

    • 白菜
    • 萝卜
    • 黄瓜
  • 水果

    • 苹果
    • 桃子
    • 香蕉

无序列表(unordered list)

  • 作用:给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分
  • 格式:

中国房价排行

  1. 北京
  2. 上海
  3. 广州
  4. 深圳

注意事项:

  • ol和ul就是语义不一样,怎么使用都是一样的以及注意点都一样
  • 其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号

定义列表(unordered list)

  • 作用:给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd
    给每个条目进行相应的描述
  • 格式:
北京
中国的政治中心
上海
中国的经济中心

dl应用场景:

网站底部相关信息
但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl


列表标签_第4张图片
1.png

注意事项:

  • dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面
  • 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
  • dd和dt和li标签一样是容器标签, 里面可以添加任意标签定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述
  • 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

你可能感兴趣的:(列表标签)