成长是一辈子的事儿!大家好!我是时问新(前几天改了名字,现在觉得还是用时问新这个名字更好点)。分享前端、Python等技术,以及个人成长路上的那些事儿。
HTML5中提供了3种列表。
![13d3df792678a4360fcfb80094c37a50.png](https://i-blog.csdnimg.cn/blog_migrate/178e0ba1365597312c601861f00a0005.jpeg)
无序列表
无序列表是没有刻意顺序的列表。
比如我们如果想去超市买东西,想买的东西又比较多,为了避免忘记漏买某些东西,就会列一个购物清单,购物清单就是一个无序列表,因为要买的东西只要没有遗漏就好,不需要给它排列顺序。
![58b287b44f658a9c0d281465890ff832.png](https://i-blog.csdnimg.cn/blog_migrate/98201bd90c0229dedbcb3f233b17c344.jpeg)
标签和标签
无序列表使用标签。
无序列表的英文单词是unordered list,英文缩写就是ul,列表项的英文单词是list item,所以英文缩写就是是li。
ul标签和li标签可以共同实现一个无序列表。比如你的购物清单上面有面包、牛奶、鸡蛋、水果这4样东西,无序列表就可以这样写:
![363feabbce18b7e456e434b01fde01d7.png](https://i-blog.csdnimg.cn/blog_migrate/3088a3c252e93d56860f32be11c9aaa4.jpeg)
在浏览器上的显示效果,默认会在每一个列表项的前面,带一个黑色的小圆点,效果如下:
![cd467d56fc590cbe9fc5004990099bd5.png](https://i-blog.csdnimg.cn/blog_migrate/5d6307e81158ad1b6415c6f538db5470.jpeg)
父子组合标签
无序列表是一个父子组合标签。其中,ul标签是父标签,li标签是子标签,li标签是嵌套在ul标签里面的。ul标签和li标签是嵌套组合在一起使用的,不能单独使用。也就是说要实现一个无序列表,ul和li标签是同时成组出现的。
![68e471e17875d797f1db8a8fc24fc009.png](https://i-blog.csdnimg.cn/blog_migrate/24a0378474c730ef2ab66d9ec1b50834.jpeg)
之前我们了解的div标签,它作为一个盒子、容器,里面可以很自由的嵌套各种其他标签。但是对于无序列表,ul标签和li标签是紧密相关的,ul标签里面,只能固定的嵌套li标签。
注意:
1、标签不能单独使用。
必须放到无序列表标签
或者有序列表标签 中。li标签只能作为别的标签的子标签,它自己是不能独当一面,单独使用的。比如单独几个li标签:
![52f068ab2ec5b5703fccabe42e55242e.png](https://i-blog.csdnimg.cn/blog_migrate/f8cd2eb938a6e8f9caf56fe0de58474a.jpeg)
这样的写法是错误的。
2、
标签的字标签只能是。HTML规定,
标签的子标签必须是,绝对不能出现任何其他的标签。比如下面的写法:
![7091eb3bc138388b9c44c568a4d1bad7.png](https://i-blog.csdnimg.cn/blog_migrate/389cf1357cb30d85834a1a44a2d314cb.jpeg)
这种写法,肯定是想给这个列表清单添加一个标题,所以使用了h1标签,但是这种写法是完全错误的,它已经违反了HTML的规定。
如果你就是想给这个清单添加一个标题呢?那就可以把这个h1标签写到ul标签的外面:
![1ef21b99dfec099dc615223ff6c97c0a.png](https://i-blog.csdnimg.cn/blog_migrate/4c12987ea9350c76309bfaeec1682614.jpeg)
这样写就是符合HTML规定的。
3、标签中可以放其他任何标签。
HTML5规定,标签是容器,它的内部是可以放置任何其他标签的。
比如:
![b8adf157eb505a41cfaa458eceaa1df4.png](https://i-blog.csdnimg.cn/blog_migrate/50d934f5ee5e34c195d91f7bab884d6d.jpeg)
这样写是合法的。
同样的,
标签中,你也可以写任何h系列标签。但是你把
标签写到
标签的外面、作为- 的直接子标签是错误的。
注意代码的正确缩进
当HTML标签形成嵌套的时候,必须注意代码的正确嵌套(按tab键)。
![fce96916e289fee39d72d04df602e26d.png](https://i-blog.csdnimg.cn/blog_migrate/95050ef275a5158db9fe405b3de12c1b.jpeg)
正确缩进之后,代码要表达的意思就一目了然。
接下来你可以打开vscode编辑器,在里面写一个小demo。
Document
购物清单
面包 牛奶
牛奶要买脱脂或者低脂的
鸡蛋 咖啡 水果
浏览器中效果如下:
![134f5b54737387ab24bc9ac50ce3f67c.png](https://i-blog.csdnimg.cn/blog_migrate/24c85d7198a24b34a315e928e6702a5d.jpeg)
以上就是无序列表标签
- 和
- 的总结。
感谢阅读!知识总结不易,请点个赞或转发鼓励一下呗!关注我,从零基础入门基本功扎实的前端工程师。