37.尚硅谷_HTML&CSS基础_无序列表和有序列表.avi原创

我们刚才说了一些文本标签，那接下来呢，我们再来说，呃，一种标签也属于一个文本标签，但是呢，那叫什么呢，叫做一个列表啊列表标签，那我们说什么叫列表，知道吧，列表最典型的，如果你去超市买东西，你会列一个什么呀，购物清单是吧？诶买这个买那个买这个买那个会有一个清单，那这清单是不是它分成一条一条的呀，那这一条一条的就是一个什么呀，就是个列表啊，就是列表同样在我们这个什么呀，在我们这个HTML里边也可以创建什么呀，列表啊列表来，哎列表就什么呢？哎，就相当于我们什么呀，哎去我们这个诶超市诶购物时嘛的呢，跟那个什么呀，诶购物清单啊，购物清单在我们的什么呢？在我们这个HTML中也可以什么呢？也可以创建。列表啊，列表一共什么呢？在我们这个呃，网页中一共有三种列表啊，三种列表哪三种？第一种我们叫一个什么呢？叫做一个无序列表啊，无序列表也是我们用的最多的一个列表，无序列表顾名思义它是干嘛呀？呃，没有顺序，也就说你这列表向里边干嘛呀，没有什么顺序的，要求先干哪个，先弄哪个都无所谓，叫一个无序列表。第二一个叫什么呢？叫做一个有序列表，有序列表也就是我这列表像一个一个是有什么呀？有顺序的啊，有顺序的还有第三一个我们叫做一个定义列表啊，一共就这三种列表啊，就这三种列表，那其实我这列表什么样啊，那其实我这个是不是就是一个列表啊，哎，这个就是一个，这是一个属于什么呀？有序列表，诶1231项一项的啊有序列表，那我们来看在我们这里边怎么去创建列表，在这儿我们来先说我们用的最多的谁呢？叫做一个无序。

列表啊，无序列表，那我们来说使用什么呢？使用我们这个ul标签来创建一个无序列表啊，来创建一个无序列表，直接写了来一什么呢？Ul，然后1TABLE，这是什么呀？ULV这就创建好了一个无序列表，但是有问题了，你说我这创建完了有没有东西，嗯，什么也没有，为什么呢？因为我们现在相当于干嘛呀，我想写列表，我把这个纸已经拿出来，但是我往往纸里边填东西呀，没有是一个什么呀，是一个白纸啊白纸，所以注意在ul里边，我们列表有一个一个的什么呀，叫做一个列表像啊列表项，我们使用什么呢？使用我们这个Li，在我们这个u Li中完了，哎，创建诶一个一个的什么呀，列表项，诶一个LY就是一个列表项，什么叫列表项啊，我们来看这是不是就我是我列表里边的一项啊，哎，然后这是不是又一项啊，我这。

这一共有什么呀，有三项，有三项我们就对应三个什么呀，LY啊，对应三个LY，比如说我这来一个LYLY我这写一个，比如说写一个这个，呃，西门大官人，我这一保存，这个西门大官人就是一个什么呀，就是一个列表项，我这一保存，然后一刷新走，你是不是出来一个，你看前面多了一什么呀，呃，多了一点，但是这写一个呢，怪寂寞的，我们看不出效果，咱们多写几个来，再来一个这个柴大官人，柴大官人还有一个这个是许大官人。

许仙许大官人是吧，还有一个凑四个吧，来一个这个唐僧大官人，一共是这么四个大官人啊，我这一刷新来走你诶你看是不是这就是一个列表啊，哎，叫做一个无穴列表，无序表有什么特点，你来看他们前面这叫什么呀？叫项目符号吧，哎，项目符号，所以这里边注意无序列表，这个项目符号是什么呀？是这种圆点的这种什么呀符号吧，哎，这种符号啊，使用这种无序的项目符号啊，它使用无序的项目符号，好，那这里边我们叫做一个无序列表，那我们来看这无序列表前面使用点点有时候干嘛呀，我不想用点的是吧？那有时候我需要用什么呀，我需要用个小方块儿，有时候我需要什么呢？需要整个。

圆圈对吧，诶那这东西我能不能改呀，诶我们来看看怎么改，直接来看什么呢？看我们这个文档HTMLHTML有一个HTML。标签列表搜谁呢？叫做一个ULUL在这儿呢，点开它，诶ul来创建我们这个无序列表，然后直接看它这些属性有一个叫什么呢？有一个叫做type，诶type我们来看它这边有三个值，什么Dis啊，什么K啊，什么circle，是不是有这么三个值啊？诶那这type在干嘛呢？通过type属性可以通过我们这个typeb属性可以修改我们这个无序列表的一个什么呀？诶项目符号啊项目符号它有这么几个可可选值，我们直接来看吧，这里边直接来一个，来一个这个type type有一个值叫做一个，这叫一个Dis，这什么意思呀，一刷新有变化吗？没变化，所以这叫什么呀？诶默认值，诶叫做一个默认值叫什么呀？就是一个实心的什么呀，实心的圆点啊，实心圆点还有一个。

叫做一个块是吧？诶这是什么效果呀，我们来看效果一刷新走你什么呀，方块啊方块，但是这玩意不用记啊，到时给他忘了就完了啊，咱们讲一下不用记啊S这是一个什么呀？实心的一个方块啊，实心的方块，诶然后还有一个叫什么呀，Circle circle是一个什么呀？诶一个圈啊，一个圈圆圈啊圆圈不用记啊，一个也不用啊，一个也不用，Circle是一个什么呀？哎，空心的圆圈，诶就说一个啊，咱们就看一眼，咱们熟悉一下就OK了，这东西不用啊，不用，即使你记住了你也给它。

忘了，诶忘了，因为记住了还浪费你这容量是吧？诶我们说这种东西我们都是不用的，为什么不用这块注意啊，不是4S台的事儿，关键是这东西吧，它它有问题是吧？诶有问题注意注意什么项目符号，诶叫什么呀？诶默认的项目符号我们什么呢？我们一般都不使用，不论是实心的还是空心的，我们都干嘛呀，都不用，为啥呢？我们先给它换回来啊，不写是不是就换回它那个默认值了，或者直接来一个这个，诶奥存我们来看效果，一刷新这点的是不是出来了呀？诶来咱们看别的浏览器，咱们打开多打开几个，打开G再打开，打开我们这个IE，我们要看什么，我们来。

小一点，把这哥仨呢，给他拖一块去。你跟这你跟这哥仨给他凑一块，凑一块要看什么呢？哎，我们要看他这点这是不是太明显了，哎，在不同浏览器，它这点这这这这这火狐这是不是点大呀，IE这个有点太小了，这个苦龙们这有点方是吧？诶有点方，你发现这个点在不同的浏览器里显示效果是不是不一样啊，诶不一样啊，所以注意这些东西都是浏览器默认设置样式，但是呢，在不同浏览器里显示的效果不统一，而我们以后开发的时候，我们说如果这个效果不统一，这玩意儿好不好看呀，不好看我们希望在什么呀，在不同的浏览器里显示效果都是什么呀，都是一致的，所以这点我们不要啊，不要我们不会使用它这个默认项目符号，那么说如果我们需要用，我就需要使用项目符号，我就需要使用这么一个圆点作为项符号，那怎么办？首先前提是默认的一定不能用啊，那问题就来了，那默认的不能用，我们是不是就需要给这个默认给。

啊去掉啊，诶那怎么去掉这个默认呢？那我说我不写type行不行，不写type行不行，你不写人家有什么呀，默认值是不是还是它呀，那我就需要把它给去掉，那怎么去掉啊。哎，就要用到我们这个什么呀，CSS啊，来一个我们来去掉我们这个项目符号，去掉我们这个效广告怎么去啊，我们要给我们这个ul来设置一个样式，一个样式叫什么呢？叫做一个list style叫什么呀，列表的一个风格，对吧？我们来一什么呢？来一个那一保存再一刷新走，你这点是不是就没了呀，所以注意它的项目符号我们一般都不改，都干嘛呀，都得给它去掉，省着给我们碍事。诶那还是回到刚才那个问题，同学说了，那这点我就需要怎么办，我想要这个点怎么办？要注意为了统一效果，这个默认项目符号我们是不用的，我们如果需要设置项目符号，则可以采用为我们这个LY设置背景图片的这个方式来设置，如果你真要设置就干嘛呀，给它加一个背景图片，这我们以后社交再说，现在先不用管它。

那为什么要加图片啊，哎，我整一图片，这图片在各种浏览器里显示效果是不是都是一样的呀？诶可以确保我们这个样式的一个统一啊，样式一个统一，好，这是我们说的这么一个无序列表，无序列表我们说在上网的时候见没见过呀，其实应该见的很多，最典型的可能你看一些什么呀，新闻，呃，新闻是不是有一个新闻列表啊，这一项一项的，实际上就是一个什么呀，就是一个无序列表啊，无序列表还有什么呀。哎，还有我们像你见的最多的网站可能有什么呀。是不是导航条啊，诶导航条一个一个链接，那个玩意儿也是什么呀，也是无序列表，那同学说了，诶老师这玩意儿还它还竖着呢，是吧，咱们这导航条是不是横着的呀？哎，横着的，但是注意了，我们可以通过什么呀，CSS样上它干嘛呀，让它横过来啊，能横过来，所以这些效果我们以后都可以用CSS来完成啊，这个东西我们以后用的还是非常多的啊，非常多的。那话又说回来了，我要问你了，Ul和LY，我们说它是什么元素，先看LYLY什么元素，你看西门大官人，柴大官人，许大官人，唐僧大官人，这哥四个是不是各占银行啊，哎，各占一行，那就证明我们这个LY是不是矿元素啊，LY是矿元素，那他爸爸呢？

是不是也是快元素啊，哎，所以注意我们的ul和LY都是快元素啊，都是快元素，Ul和RI都是这个快元素，这就不多说了啊好，这是我们说的一个无序列表，无序列表对应的还有一个什么呀？哎，还有一个叫做有序列表，那注意了，有序列表其实跟无序列表呢差不多，很像，我们用的比较多的还是谁呀？无序列表用的比较多啊，无序表已经比较多，我们来说一下有序列表和我们这个无序列表类似啊，类似，诶只不过什么呢？只不过它使用我们的什么呀？OL来干嘛呢？来代替什么呀？Ul剩下的干嘛呀，全一样啊，剩下全一样，所以这里边我们要创建什么呀，有趣的人我就得写什么呀，写一个OOL里边同样也写的是什么呀，诶LY啊，O里边写的也是一个LY，我们来写一个有顺序的吧，有顺序。

那我们来写一个，写一个这个写个啥呀，说就写我们这个结构表现行为是不是这三个呀，诶来保存，我们来刷新走你诶你看和我们这个ul的一个区别，它多了一什么呀，哎是不是123呀，哎123后面ul使用的什么呀，点吧，哎点所以这里边我们叫做如有序列表使用什么呢？使用有序的这什么呀，呃序号作为什么呢？作为我们这个项目符号啊作为我们这个项目符号，所以这里边它是什么呀，有序的，如果你下边还有是不是456接着往下往下写了呀，啊往下写了，所以这两个用哪个，如果你这东西就是需要显示一个有顺序的，你就用什么呀，用有序列表，如果没有顺序就什么呀，无序列表，但是无序列表干嘛呀，偏多啊偏多好，这是我们说有序列表，那这里边呢，同样我们说了无序列表，我们可以指定一个什么呀，Type，那有序列表呢，哎，是不是也可以啊，比如说我来个一。

我一保存咱们来看效果一刷新是不是没变化呀，哎，没变化那什么呀，诶默认值type属性可以指定我们这个序号的。类型啊，需要的类型来一下可选值，可选值我们就什么呀，一这就是什么呀，默认值就是什么呀，使用我们这个，使用我们这个阿拉伯数字啊阿拉伯数字来看这来一个什么呢？A保存咱们看啊一刷新走你是不是小写字母啊哎，小写字母来我换一个，换一个什么呢？大A保存一刷新手紧什么了，大写字母啊哎大写字母，所以还有两个值，一个什么呢？小AA或什么呀，或大A使用什么呀，哎，采用我们这个哎大写或小写哎字母作为什么呀，作为我们这个序号啊，作为我们这个序号应该调一个我们是小写或大写啊跟我们这顺序对应的啊，然后还有什么呢？还可以写个哎啊写个哎I什么玩意儿呢，我们来看啊，一刷新走你。

什么玩意儿啊，罗马数字啊，罗马数字来一个大A就是什么呀，大罗马数字啊，大罗马来一刷新是不是这个效果呀，哎，A或者是大A，哎，采用我们这个什么，哎，小写或者大写的什么呀，诶罗马数字诶作为我们这个序号啊，作为序号，所以这里边它是有这个可选值的啊，可以通过修改，但是这个东西其实用的也不是很多，一般我们可以可能诶很少情况用它们啊，很少情况去用它们，好这是我们说的有序列表，还有无序列表，同样我们什么呀，OL也是什么呀，也是我们一个块元素啊，也是一个这个块元素，好这也是我们说两个列表，一个是有序列表，采用的是ul，里边放的是LY，还有一个是什么呀，是我们这个无序列表，采用的是什么呀？诶不是，有序列表用的是O，放的是LY，无序列表是U，放的是LY，然后还要说一个，呃，定义列表我们先不。

不理他，我们先说这两个，我们说什么呢？我们这个列表之间，它都是可以干嘛的，诶可以互相嵌套，哎都是可以，哎互相嵌套的也就是什么呀，我可以在什么呀，在无序哎列表中放个什么呀，有序列表，哎也可以在我们这个有序哎列表中干嘛呢？哎放一个什么呀，放一个无序列表，他们可以互相签到，那我们说我在无序里再放个无序行不行，哎也可以啊，也可以，比如说举个例子，我们想想怎么写一个，写一个什么呢？写一个简单来写一个吧，我们来写一个这个菜谱，写一个菜谱，我这来一个什么呢？来一个这个，呃，来一个这个ulu ulu是一个什么呀。

无序列表对吧？哎，无序列表我们这来一个LYLY，我先把这个呀，项目符号这去除，这个我先给它住了，我先不去除了，留着项目符号LY，我这里边写个什么呢？写一个这个鱼香肉丝，鱼香肉丝，然后来一个呃，宫爆爆。

宫爆宫爆啥，宫爆鸡，宫爆鸡丁，宫爆鸡丁，再来一个这个LY来一个什么呢？来一个这个，哎呀饿了青椒肉丝，七英青鸡腰，椒肉肉丝啊椒肉丝哎，我就写这三菜M意思意思啊，我这保存一刷新走你诶你看菜谱我列出仨菜来，鱼香肉丝，宫保鸡丁是不是青椒肉丝啊，诶那我们说了，我这是一个什么呀，是个菜谱，我需要干嘛呀，我需要来说明一下这三个菜是不是怎么做的呀，那我可以干嘛呀？来举个例子，我可以在这个鱼香肉丝里，我再给它干嘛呢？诶我再给他套这么一个什么呀，有序列表，我在这有序列干嘛呢？我来说明一下我这个鱼香肉丝需要的什么呀？材料啊，需要的材料，比如说举个例子，来一个LY，鱼香肉丝可能需要什么呀？诶，需要个鱼，需要个香是吧，香你们都知道是吧，需要个香，然后需要一个什么呀，肉丝啊肉丝奥存。

哎，你你你想把肉还有丝再分开是吧，那你们有想法是吧？诶鱼香还有肉丝，哎，那现在干嘛了，我是不是在这个ul里边又套了一个什么呀，OL啊OL哎，咱们看效果，这一刷新走你。看看效果吧，诶这个列表会自动在这干嘛呀，是不是进行一个缩进啊，诶表示这个东西是对我们这个鱼香肉丝的一个什么呀描述，告诉你它需要什么呀，这三个材料啊，这三种材料，那好，那这样说，我们这可以套一个ul，里边可以套一个OL，那能不能再套一个ul啊也可以，比如说宫爆鸡丁，这我掏一个ul，诶宫保鸡丁好像不是这个宝是吧，是宝宝是吧，诶宝啊，你没文化是吧？来ul里边来一个LYLY，咱们就意思意思吧，宫保宫保鸡丁鸡鸡鸡鸡丁保臀，哎，是不是这么一个啊，哎，我这演示一下意思意思啊，当然没有这么炒的是吧？宫保是个人是吧？那公保是个人啊，那现在我们来看效果一刷新走你，诶，你看是不是项目符号自动变了呀，哎，自动变了，我要说明的这个问题就是什么呀，我们在无序列表力可。

套有序列表也可以套什么呀，也可以套无序，在有序里也可以套什么呀，无序也可以什么呀，有序它是可以互相去嵌套的，但是你要注意了，我一般情况下都是把它放哪啊，放LY里啊，放LY里你单独放一般意义就不大了，一般我们都是给它放到这个LY里啊，它们之间是可以互相去嵌套的啊，互相嵌套的当然了，我们说如果你想把这个or这符号给去了行不行，这123给它去了行不行也行，都是那个list style啊，都是那个list style，好，这也是我们说这个两种列表，无序列表，还有有序列表啊，这个列表在我们这个实际开发中会用的非常非常的多，现在呢，你们先有一个大概的印象，我们用的时候会一点一点去展开它啊，去展开它无序列表，还有有序列表，然后还有一个什么呢，还有一个定义列表，定义列表呢，稍微麻烦一点，咱们这样吧，今天我们先说这么多，明天我们再说吧。