前端 12、有序列表

1.什么是列表标签?
列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

2.HTML中列表标签的分类
2.1无序列表(最多)(unordered list)
2.2有序列表(最少)(ordered list)
2.3定义列表(其次)(definition list)

3.无序列表作用:
给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分

什么叫有先后之分?
例如: 排行榜
什么叫没有先后之分?
例如: 中国有哪些城市

4.无序列表格式:

  • 需要显示的条目内容
li其实是英文list item的缩写 list是列表的意思 item是条目的意思 所以结合起来就是 列表条目的意思

5.注意点:
1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
2. ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签

无序列表应用场景:
1.新闻列表
2.商品列表
3.导航条

前面我们说过ul中最好只放li标签, 但是在企业开发中, li标签中的内容可能会很复杂,
所以我们可以继续在li标签中添加其它的标签来丰富我的界面
总结:
1.一定更要记住ul标签中最好只放li标签
2.但是li标签中还可以继续放其它的标签

无序列表中的li标签中除了可以添加其它标签来丰富我们的界面以外, 还可以添加ul标签来丰富我的界面
也就是说ul中有li, li中又可以有ul

在webstorm中如何快速编写一个ul的格式
ul>li
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签

ul>li*3
含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值