cefsharp 多标签_14 无序列表标签

成长是一辈子的事儿!大家好!我是时问新(前几天改了名字,现在觉得还是用时问新这个名字更好点)。分享前端、Python等技术,以及个人成长路上的那些事儿。

HTML5中提供了3种列表。

13d3df792678a4360fcfb80094c37a50.png

无序列表

无序列表是没有刻意顺序的列表。

比如我们如果想去超市买东西,想买的东西又比较多,为了避免忘记漏买某些东西,就会列一个购物清单,购物清单就是一个无序列表,因为要买的东西只要没有遗漏就好,不需要给它排列顺序。

58b287b44f658a9c0d281465890ff832.png

标签和标签

无序列表使用标签。

无序列表的英文单词是unordered list,英文缩写就是ul,列表项的英文单词是list item,所以英文缩写就是是li。

ul标签和li标签可以共同实现一个无序列表。比如你的购物清单上面有面包、牛奶、鸡蛋、水果这4样东西,无序列表就可以这样写:

363feabbce18b7e456e434b01fde01d7.png

在浏览器上的显示效果,默认会在每一个列表项的前面,带一个黑色的小圆点,效果如下:

cd467d56fc590cbe9fc5004990099bd5.png

父子组合标签

无序列表是一个父子组合标签。其中,ul标签是父标签,li标签是子标签,li标签是嵌套在ul标签里面的。ul标签和li标签是嵌套组合在一起使用的,不能单独使用。也就是说要实现一个无序列表,ul和li标签是同时成组出现的。

68e471e17875d797f1db8a8fc24fc009.png

之前我们了解的div标签,它作为一个盒子、容器,里面可以很自由的嵌套各种其他标签。但是对于无序列表,ul标签和li标签是紧密相关的,ul标签里面,只能固定的嵌套li标签。

注意

1、标签不能单独使用。

必须放到无序列表标签

或者有序列表标签 。li标签只能作为别的标签的子标签,它自己是不能独当一面,单独使用的。

比如单独几个li标签:

52f068ab2ec5b5703fccabe42e55242e.png

这样的写法是错误的。

2、

标签的字标签只能是。

HTML规定,

标签的子标签必须是,绝对不能出现任何其他的标签

比如下面的写法:

7091eb3bc138388b9c44c568a4d1bad7.png

这种写法,肯定是想给这个列表清单添加一个标题,所以使用了h1标签,但是这种写法是完全错误的,它已经违反了HTML的规定。

如果你就是想给这个清单添加一个标题呢?那就可以把这个h1标签写到ul标签的外面:

1ef21b99dfec099dc615223ff6c97c0a.png

这样写就是符合HTML规定的。

3、标签中可以放其他任何标签。

HTML5规定,标签是容器,它的内部是可以放置任何其他标签的。

比如:

b8adf157eb505a41cfaa458eceaa1df4.png

这样写是合法的。

同样的,

标签中,你也可以写任何h系列标签。

但是你把

标签写到

标签的外面、作为
  • 的直接子标签是错误的。

注意代码的正确缩进

当HTML标签形成嵌套的时候,必须注意代码的正确嵌套(按tab键)。

fce96916e289fee39d72d04df602e26d.png

正确缩进之后,代码要表达的意思就一目了然。

接下来你可以打开vscode编辑器,在里面写一个小demo。

    Document

购物清单

面包 牛奶

牛奶要买脱脂或者低脂的

鸡蛋 咖啡 水果

浏览器中效果如下:

134f5b54737387ab24bc9ac50ce3f67c.png

以上就是无序列表标签

  • 的总结。

    感谢阅读!知识总结不易,请点个赞或转发鼓励一下呗!关注我,从零基础入门基本功扎实的前端工程师。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值