列表标签

定义

给一堆数据添加列表语义，让浏览器知道这对数据是一给整体的

作用

就是给数据添加列表的语义

分类

无序列表（使用最多）
有序列表（使用最少）
定义列表（使用介于上面两者之间）

无序列表

给列表添加的语义无先后之分

格式


  • 要显示的条目内容


实现代码如下：
image.png

注意事项

  • 列表表签也是用来添加语义的，不是来修改样式的
  • ul标签和li标签是一个整体，一般是一起出现的，ul标签里面不推荐嵌套li以外的标签，但是li标签里面可以嵌套其他标签，例如h标签p标签等

image.png

  • 可以在ul标签中加上type老修改无序列表中的标签样式，但是不建议使用

image.png

  • ul标签中可以有li标签，li标签中也可以有ul标签

image.png

可应用的场景

新闻列表
商品列表
导航条等
无标题.png
就像图片中的1就是导航条，2就是新闻列表。

有序列表

就是给一堆数据添加列表语义，并且有先后之分

格式


  1. 要显示的条目内容


代码实现如下：
image.png

注意事项

与无序列表的基本是一样的

应用场景

可以用于排行版

定义列表

给数据添加列表语义，并且对添加的标题进行描述
格式







其中，dt是用来定义列表的标题，dd是对定义的标题进行描述
注意事项
dl标签一般和dt,dd标签是一起出现的，而且dl标签一般只嵌套dt和dd标签，但dt和dd标签中可以嵌套其他标签
同时一个dt可以对应多个dd,但一般使用一对一模式。
代码的实现可以如下：
image.png