首页 > Web开发 > 详细

HTML常用标签-无序列表与有序列表

时间:2020-11-29 22:50:19      阅读:47      评论:0      收藏:0      [点我收藏+]

列表:

列表用于制作HTML中的一系列项目。
通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。
根据项目的内容不同,可以有三种语义的列表结构:无序列表、有序列表、定义列表。
技术分享图片

无序列表:

无序列表标签:

无序列表需要两个标签参与,分别是<ul>和<li>。
ul:unordered list,表示定义一个无序列表的大结构。
li:list item,列表项,定义的是无序列表内的某一项。
<ul>和<li>是嵌套关系,快捷键:ul>li。
一个列表中可以有任意个列表项。

技术分享图片

 

 注意事项:

1.<ul>内部只能嵌套<li>,<li>标签不能脱离<ul>单独书写。
2.<li>标签是一个经典的容器级标签,内部可以放置任意内容,甚至可以放一组ul>li无序列表结构.
3.无序列表的列表项<li>之间,没有顺序的先后之分,它们的重要程度是相同的。
4.无序列表的作用只是搭建列表结构,没有添加样式前缀的功能,样式是由css负责。

有序列表:

 

有序列表标签:

 

有序列表的语法与无序列表非常类似,只是在语义上有差异。
有序列表由两个标签组成,分别是<ol>和<li>。
ol:ordered list,表示定义一个有序的列表的大结构。
li:list item,定义的是有序列表的每一项。<ol>和<li>是嵌套关系,快捷键:ol>li。
<ol>标签内部可以嵌套任意多个<li>标签。
注意事项:
1.<ol>内部只能嵌套<li>标签,而<li>不能脱离<ol>单独书写。
2.<li>标签是一个经典的容器级标签,内部可以放置任意内容,甚至可以放ol>li。
3.有序列表的列表项<li>之间,存在顺序先后之分,根据内容的顺序需要合理调整书写位置。
4.有序列表的作用只是搭建有顺序的列表结构,前面的数字排序样式不是<ol>标签的作用,而是css负责的。
技术分享图片

 

 

 

HTML常用标签-无序列表与有序列表

原文:https://www.cnblogs.com/lookLuke/p/14057597.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!