00:00
好,我们继续来上课,那么这节课呢,我们再来看一下我们的这个雨化布局标签啊,那么在这个阶段呢,在我们第一个阶段,雨化布局标签我们只学两个,一个是div,一个是实SPA啊,也就是说最后我们在布局页面的时候,只要拿这两个标签就可以做布局了啊,那么咱们来看啊,这两个标签都是什么样的呢?来在这里边一样,我在这块新建一个页面啊,叫做零五。与异化。布局标签对吧,所说的一句话并不是给我们来看的,是给谁呀,给浏览器来认识的,对吗?那么第一个我们要认识的叫做div标签,它是一个什么呢?就是一个块状元素啊,一个叫做无意义的块状元素。块状元素这个无意义的什么样呢?比如说我们用P标签,P标签是一个有意义的,它是一个段落,对不对,而div呢,它就是单纯的一个块状元素,没有任何的意义啊,那咱们来看在这里边。我们来刷新。看一下有什么效果,你看有效果吗?没有任何效果对吧,那么咱说了它是块状元素,是块状元素的话,比如说下面我再给个内容,叫做我是div自外。
01:11
的内容,对吧,那这个时候我们再来刷新,你看这个时候它是不是在它的下边对吧?也就是说无意的快热元素它是由div包含的,它是不是会独占一啊对不对?哎,刚才在我们上一节课中,我们已经说过了,块状元素啊,会有独占一行的特性,对吧?块状元素会怎么样?会这个读在一行。叫块状啊,块状元素OK,那么div我们知道了,它还有一个什么,还一个SPA标签,对吧?它是一个什么呢?它也是一样无意义的行内元素,对吧?你比如说像我们其实在上节课已经学习了很多行内元素,比如说B标签呢,对吧?I标签呢,U标签呢,这些是不是都是行内元素对吧?都不会独占一行,那么实盘标签呢,它也一样,他也不会读在一行,而且你看它跟上面这行内容是不是在一行啊。对不对,呃,而且它是一个无意义的,比较适合什么我们布局和排版使用啊,比较适合布局和排版啊,咱们来看,比如说我们的页面啊,咱随便找一个页面,比如说这里边,你看这里面是不是就是这样的效果,对吧?你看是不是有多个磁盘标签,是不是我可以理解,比如说在这块我可以理解为这是一个什么,一个div就是一个砖头嘛,对不对,比如说这就是一块砖头,一个div标签,在这个div标签里面包含了什么,包含了左。
02:24
这是左对吧,还有右两部分内容,那么左边的内容呢,是不是由一个个SPA一个个SPA来组装的,对吧?只是现在我们还不会什么不会放图片呢,对不对,那我们会放图片了,我们是不是就可以做出这样的效果了?哎,这就是咱们这两个标签的作用啊,主要用来干嘛呢?用来布局了,现在呢,我们作为了解就可以了,等他讲到CSS的时候,我们会再重点突出它这两个标签,因为我们第一个阶段的页面的布局是使用div加CSS,也就是说我们使用HTM4里面最传统的布局方式啊,当然在H5里边又会增加了很多布局,比如说像C格布局啊,对吧,一个这个或者大格布局啊,啊,就是网格布局啊,对吧,也有增加了很多种布局方式啊,那么在这个阶段呢,我们只需要用div加CSS进行什么进行浮动布局即可。
03:11
好了,这就是我们的语义化标签啊,这两个咱们先作为一个了解啊,那么一个是跨热元素,一个是行内元素啊。行内元素对吧,那么行内元素特点是什么呢?就是不会读在。一行。有。好,那咱们看完这个语义化标签,我们再来看一下我们的这个列表标签啊,那么列表标签呢,有这么多对吧?那这里边其中ul叫做什么呢?叫做无序列表,OL叫有序列表啊,咱们来看一下列表标签,首先我们看能用到哪里,比如说你看这一排内容,这就是一个列表,看到了吗?哎。包括我们后期要写的项目页面,比如说。在这里边。嗯,前端。
04:00
这里面。你看这是后期我们要做的项目页面,对吧?你看好了,这里边这一排排都是列表啊,你看这也是用列表来做的啊,只是横向了,对吧?这都是列表,那么这块内容也是什么呀?列表,这也是列表,看到了吗?哎,也就是说我们用到列表的地方会非常非常的多啊,那么咱们来看一下这个列表啊,在这里边我们一样新建一个HTL的文件,叫做零六列表标签。好,那在这里面我们先看第一个叫什么无序列表,对吧?HR结束的HR叫做无序列表。列表好了,那么什么叫无序列表呢?咱们来看,刚才我说了,我用ul声明的就是无序列表,对吧,那ul对吧?好了,那我声明完以后,现在我们来看一下这里边我们能看到什么效果。什么都没有对吧?这个无序列表是我给的HR标签吧,哎,为什么什么都没有呢?大家注意啊,在这里边。
05:01
来,我把多余的其他页面都关掉啊。咱们看刚才我们说了,这就是列表对吧,但是呢,我用UI只是来声明这一块内容是列表,但是列表里面是不是有每一项,这是不是就每一项的内容啊,哎,是不是需要配合列表项,所以列表项我们用什么呢?我们用Li标签来配合Li Li啊,这就是我们的列表项,比如说这里边我们写两个内容叫做什么呢?叫做这个。呃。人生四大喜吧,对吧,有哪些有金榜题名石。对吧,还有久旱逢丹露。
06:04
还有他。相遇故之。以及最后一个叫做什么洞房花烛夜。那这个时候我们再来看来中一,哎,你看我的列表是不是有了对吧?哎,所谓的无序列表前面是不是都有什么,都由实心的点来代替它的样式啊,对不对,当然我们也可以通过属性去改它的这些符号啊。改它的这个样式,但现在呢,我们不需要,那我们学CSS时候,直接用CSS来改它就可以了啊,那这是什么,这是我们的无序列表,那么对应的也会有什么有有序列表,那有序列表又长什么样呢?也一样,再来个HR标签。有序列表啊,咱们再来看有序列表一样用的是什么?用的是o Li标签,那么只是定义了有序列表,有序列表里面是不是也需要列表项,那么Li依然去帮的帮助做什么做列表项,也就是说Li标签干嘛呢?就是在无序列表跟有序列表当中去定义每一个列表项啊,那这里边一样,我再把这个四个内容啊,CTRLC我给它复制到这里边,我们来看下效果,来这里面再来刷新。
07:14
好了,刷新以后,你看有序列表,有序列表前面是不是就有序号了,对吧,1234进行排序了,当然我这里面只给了四个,我再加一个,比如说这里边叫什么呢?叫做这个,呃,人生。四大喜,我是不是又加了一个?哎,那现在你看它是不是就多一个,就多了一个五啊,对不对,哎,这里面不管是多加多少,只要你加一个它就会这干嘛呀,会多一个,你看我给了一个空Li,那你看是不是有个六后面内容是空的,因为什么Li标签里面是空的,对吧?比如我给他几个A,那这个时候你再来看。走,你是不是就有值了,哎,这就是我们的有序列表啊,那至于我们的列表怎么能让它变成横向的,那咱们后期我们学CSS以后,我们才能对这个列表进行什么进行相应的操作啊,所以在这里边我们来读一下笔记啊ul干嘛呢?是定义无序列表。
08:06
啊,定义无视。列表OL呢是定义有序。列表Li呢,是用来定义列表中的每。一项啊,每一项DL呢,这里边看好了,还有什么DLDTDD,这个是用来什么定义一个列表的啊,叫做定义列表,定义列表以后在这列表中我可以干嘛呀,定义一个定义列表中的一个项目,而DD呢,就是对。项目进行什么进行描述,对项目进行描述的啊,这就是咱们的定义类的,那好,那咱们来看一下咱们的定义列表啊。来在这里边。嗯。这个位置同样。下边啊,我再来个H3还是H2啊,叫做定义列表啊,定义列表我一般用什么呢?你看先是什么DL对吧?这里边开始用来定义类了,那定一个项目,比如DT啊,这里边我先用一个我们没学到的啊,叫做图像标签,我去定义一张图片去。
09:12
Src,比如说在这里边我们去找一张商品图片啊,比如说咱们来一个商品的。太卡了,算了,我们就随便用一下我本地的图片吧,来,比如说这里边我随便找一个头像过来。好,转过来,然后给他改个名,他名太长了啊,叫做A的PPG好。然后呢,这个时候咱们来看我定义的这就是一个商品对吧,那当前目录以面积下边的以面积下边的a.GPG好了,那么接下来这一个项目有了,接下来干嘛?是不是对项目进行描述啊,哎,比如说这里边我来一个这个基地叫什么呢?商品名称对吧?比如说这个叫做老。高复刻版哦,然后再来还有什么,还有商品价格啊,比如说叫刀了。
10:03
糟了。998我都刀了对吧,这个人民币是吧,好给他都在一行吧,来。然后还有什么,还有其他的描述对不对啊,不光是这些描述,比如说这个商品描述对吧,叫只要998啊老高带回家。那咱们来看这个时候我是不是在这里面定义的这么一个列表,对吧?其中用DT去定义什么定义一个列表项啊,然后呢,用这些DD对什么对列表项进行描述,也就是说我可以定义一个列表项,而去定义多个描述项对不对?那好了,现在我们再来看它的效果又是怎么样来刷新。那你看定义列表前面是什么,前面是他的图片对吧,那后面是什么,后面是不是对他的描述啊,对不对,那你想如果这个东西一旦很多的话,是不是我们的商品列表就有了,咱们商品列表是不是长这个样子来CTRLCCTRLVCTRLV。好了,我复制了这么几个啊,那复制完几个以后,这个时候我们来保存一下,再回到这里边刷新,刷新完以后你看由于这个定义里边它是独占一行的,是快照元素,看到了吗?哎,是不是这就相当于我们商品列表,只是我们能让它横过来是不是就更好了,对吧?那这里边我给大家演示一下啊,当然我没有讲啊,后期我会讲来你看好了,找到所有的DL,我让他干嘛呢?让他来一个left。
11:24
少来,你看这个数。是不是就横向了看到了吧,哎,这是不是就是我们相当于商品了,只是它的这些样式,其他的样式,那我们再调整是不是就可以了,这就是咱们的这个定义列表啊,这就咱们的定义列表啊好了,那定义列表知道了,那我们。再来看剩下还有什么东西啊,这里面就说了,U Li定义一个无序的,OI定义有序的,Li定义列表中每一个项目,对吧?DL是用来定义列表了,然后DT呢,就是用来定义列表中的一个项目,DD呢,就是对项目进行什么进行描述啊,那这里边需要注意的是什么呀?对吧,一个项目一个定义。
12:01
列表中允许有一个项目,对吧,而。可以。存在什么样而可以存在对?项目的多个描述吧,也就是说这里面只能有一个DT而多个BD吧,哎,这就是咱们的这个列表标签啊好,那这节课我们到这里,下节课呢,我们来看我们的这个超链接标签啊。
我来说两句