尚硅谷前端基础 (19)

好，接下来我们来继续啊，还是接着来讨论我们的语义化标签，那这时候呢，其实我们专门有，呃，这节课专门来说几个标签，叫一个列表。列表啊，我们就不写语义化标签了，我们直接来一个列表。呃，什么诶，这标签我给写哪去了啊，没窗没这个标签我给放到外边来了啊，我移动一下位置。然后这改一下名，这应该是零七啊F2改名快捷键直接改成零七，还是创建一个页面，然后在这里边我们给它删除一下，好，我们接着来说列表，什么是列表呢？列表其实很简单啊，列表列表英文叫做一个list啊list，嗯一说列表的话，其实有的时候我们去超市去买东西。

我们可能会列一些这种购物的清单，哎，比如说我可能这么列的，哎，第一个我买一个什么呀？哎，买一个这个铅笔，诶铅笔，然后第二个呢，我要买一个这个尺子啊尺子，然后第三个呢，我们要买一个这个橡皮，那这个时候它就是一个购物清单，当我去买东西的时候，就可以买一个勾一个，买一个勾一个，是不是可以记录一下我们这个购买的一个状态呀，诶，那这个东西它就算是一个列表啊，就是一组的啊，重组出现的这个东西就是一个列表，一项一项，第一项，第二项，第三项，第四项，第五项，那它就是一个列表，那在我们的这个HTML中，我们也可以创建列表啊，我们也可以创建列表，而且还挺多的啊，ML中的列表一共什么呢？呃，一共分了一共有三种啊，一共有三种，哪三种，第一种我们叫做一个。哎，叫做一个有序列表啊，有序列表，有序列表第二种我们叫做一个无序列表啊，无序列表第三种我们叫做一个定义列表，哎，其实你看啊，我在这儿写的是不是就是一个列表啊，哎，就是一个列表，那有序列表顾名思义就是我列表中的这些值，这些项，它是有顺序的，哎，第一个，第二个，第三个啊无序呢，就是没有顺序的定义，什么玩意儿呢？哎，我们一点点看，我们先来说有序列表，有序列表我们怎么怎么创建呢？我们使用ul标签来创建有序列表，所以你要想写有序列表很简单，你在这先写一个ul，但是注意你这光写完的话，它里边实际上什么都没有，什么都没有，所以你光写一个ul，就好比你这是创建了一个空的列表啊，创建了一个空的列表，所以这个时候我们说了，在列表里边你要有东西的话，我们需要什么呢？我们使用使用我们。

这个Li来表示我们这个列表，列表项什么意思？看这你看我现在这整个，这整个它都是一个列表，你看我这列表里有几个项，哎，一个两个，三个，是不是有三项啊，哎，三项，那这里的每一项就是一个Li，所以在URL里边我们可以直接写一个Li，一个Li就表示一项，有几个LY就表示有几项，所以Li比如说我写一个，我写什么呢？我写一个结构，然后呢，我再写一个Li，哎，Li我写一个这个表现，哎表现，然后我们再写一个Li Li这写一个行为，那现在我写了三个Li，就表示有三个列表项，L就是list啊，List，而这个it叫做一个item it m item，所以Li就表示列表项，所以你看这现在显示的结果，这就是什么呀，这就是一个哎列表啊，这是一个无血啊，刚才我这写反了，我这写ul。

到创建无序列表写写顺手了，这应该是一个哎，无序列表啊，刚才写的是有序列表，这叫一个无序列表，为什么叫无序呢？你看我每一项，每一项前面写的不是序号，写的不是序号，写的是什么？写的是点哎这种项目符号啊，写的是这种项目符号，叫做一个哎，Ul就是一个无序列表，那有序列表呢，这是无序列表啊，那我们来说有序列表，有序列表跟它其实是一样的，我直接复制过来就是有序列表，诶那你需要把ul变成什么呢？变成OL就变成有序列表了，所以像这个我直接给它复制CTRLCCTRL为粘贴，我把什么呢？诶，我直接把这个ul改成OL，那这个时候我们再看效果，这个时候它就变成了一个有序列表，你看有序列表跟无序列表有什么区别，无序列表使用那种小点点对吧，而我们这个有序列表使用的是那种序号，1234啊，1234啊1234。

但是啊，我要强调一下，像这种东西，无论是点点还是123这种东西，我们在开发的时候都不用啊，都不用，为什么不用，因为这些东西它在不同的浏览器里边显示的效果是有一些差异的，所以比如说我们看一下，比如说打开IE，我们同样访问这个页面。

你会发现什么呢？你看这点儿一不一样，这1231不一样，哎，它的显示效果并不一样，还是我们强调那个事儿，你大也没事儿，你小也没事儿，都没事儿，但是就怕什么，诶就怕你不一样，所以一般为了确保我们同样一个东西在不同的浏览器里面，它会有一个相同的效果，所以像这种东西我们一般都会去掉，无论是点也好，还是这种数字也好，我们一般都会去掉，所以基于此的话，我们在这里面，实际上我们的有序列表，还有无序列表，基本上是没有什么区别的啊，基本上没有什么区别的，我们用的时候，这两个东西基本上都一样，但是可能我们用的时候比较习惯上用的话，会用这个无序列，边无序边会用的比较多一些啊，比较多一些，然后再来说，除了这种的话，我们还有什么呢？还有一种我们叫做定义列表啊，叫做定义列表，定义表干嘛的，定义列表主要是为一些东西去下定义的，比如说我们在这儿，哎，我们这。

结构表现行为我想干嘛呢？哎，我想整一个列表啊，来定义一下结构是什么意思啊，结构什么意思，我就可以怎么写呢？哎，我可以写一个DLDL表示的是一个定义类的啊。我们来说一下。使用我们DL标签来创建一个定义列表，在这个DL中我们使用什么呢？使用DT啊，DT来表示我们定义的一个内容啊，定义的内容，而使用什么呢？使用我们这个DD，哎，来对我们这个诶内容进行解释，说明什么意思？既然定义嘛，定义就说到一点，你要给谁去下定义对吧？而这个DT就是指定你要给谁下定义，所以在这比如说我写一个DTDT，哎，直接来一个DT，那这时候写一什么呢？我写一个结构，那这表这时候表示我就要下定义了，那给谁下定义，给结构下定义，那它的定义的内容是什么？在它下边，我紧接着我可以写一个DDDD就是一个描述表示的说这个东西是对上边这个内容的一个描述，所以我写一个结构，结构表示什么呢？表示我们这个网页的一。

啊结构，哎结构用来什么呢？哎用来规定，哎哪里是标题，哎哪里是什么呀？哎哪里是我们这个，哎这个段落啊规定网页中吧，网页中，那这个时候我们这个就是一个定义列表，而这个结构我们用的是一个DT，这表什么意思呢？哎，我对它进行下定义，而这个DD表什意思呢？哎表示对这个定义的一个具体解释的一个内容，有点像我们这个上学的时候那种书里边那种定义是吧，前边一个词儿，后边一个解释说明，当然这个解释说明你还可以多写几个对吧，你可以一个DT对应多个DD啊，总之就这么一个效果啊，所以这个是我们的三种列表，U lo lo，还有DL，这个DL相对来说用的比较少啊，比较少，可能什么时候用的比较多，其实你看它这个结构有点像什么，哎，它这个结构其实有点像一个下拉菜单一样啊，下拉菜单一样，我这是一个一级菜单，然后下边我是不是可以。

诶，隐藏好多这种二级开单啊，哎，可以隐藏好多，我可以上来干嘛呢？现在隐藏等我鼠标一点击的时候，是不是才让他们显示出来，诶有点像一个二级菜单，但是整体来说用的不是那么那么多，DL用的最多的是谁呢？是ULUL主要用来干嘛？诶像我网页里我们经常看到有些那种导航菜单，哎，有横着的，有有竖着的，对吧？导航菜单我们就可以用这个ul Li去做啊，Uiri去做，但是看到这儿你可能会觉得有问题了，诶老师啊，竖着的我还能理解这横着的不对吧？

这玩意儿你看这这这是Li是不是都竖向纵向排列的，也就是说无论是u Li Li还是O，还是D，还是DTDD，它们实际上都是块元素，块元素不是独占一行，也就是它会纵向排列吗？你现在这菜单是横着的，它怎么用啊？哎，那别着急，我们以后讲了CSS，自然而然的既有办法让它横过来啊，我们直接看例子，像我们刚才看的那个QQQQ刚才其实我们看到了，我们检查一下。他的这个菜单你看一下是不是用的就是一个ul啊，用的就是一个ul啊，所以这里边注意ul一般用的菜单比较多啊，这三个里边用的最多的就是ul啊，就是ul，好，这是一个，然后再说啊，再说我们的什么呢？哎，我们的列表之间，它可以互相互相嵌套，什么意思？我可以在ul里边放个OL，也可以在OL里边放个ul，也可以在DL里放ul，总之他们之间可以互相去嵌套，所以比如说我们举个例子，我们就拿我们用的最多的u Li来举例子啊，U Li来举例子，我直接写一个u Li u Li里边我写一个Li Li的话，其实这么写完了，有点像定义里边啊，我写一个AAAA里边呢，像这个Li里边我可以再创再嵌套一个u Li UI里边我可以再放一个LY，这写一个AA杠一，然后呢，下边我们再写一个这个Li，我这叫一个AA杠二，那现在等于是什么我。

在这个ul里边又套了一个ul，诶你看它的特点，它是不是又等于你看我们ul本身自己就会缩进，包括我们这个这个这个OL它本身自己都会缩进，当我在里面再套了一个ul以后，它是不是比前面那个又往里缩进了一层，哎，并且项目符号是不是也发生了变化，哎，发生变化，甚至你还可以干嘛，你还可以接着套，你接着套的话，这个项目符号它还会改变，你看是不是就变成这种小方块了，哎，所以你就知道一下列表之间是可以互相嵌套的啊，可以互相嵌套的，但是现在就了解一下行了，因为现在我们讲这些，呃，目前来讲没有案例对应，你可能不太好理解，所以现在你就知道一下他们这个关系啊，列表之间可以互相嵌套，好，这是我们说的列表，我们来听一下。