00:00
那行了,那咱们就继续再往下看一看这个div和span。这是我们H天猫当中最后一个知识点了,各位。来一块儿咱们看一下啊。从这呢,我们去新建一个HTML,然后呢叫018,我们写上去叫做HTML中的div和span。这个div是什么?Div和span是什么呢?有什么用?我觉得任何一个东西,我们讲包括Java也好,对吧,它必然有自己的用途。存在即合理嘛,对吧,那这个东西呢,Div和span它是什么,有什么用呢。
01:01
诶,它的作用是布局。布局。Div和span。可以称为什么呢?可以称为或者叫都可以啊,都可以称为什么呢?图层。图层不是图层是个什么东西?这是我回答的第一个问题啊,什么问题是什么啊?第二个我要回答的是什么呢?就是图层有什么用?明白吧,图层的作用是为了保证页面可以灵活的什么布局。图层的作用是为了保证页面可以灵活的布局。
02:13
好,最初的时候布局啊,是使用table进行布局的。啊,其实这个最早的网页啊,是采用什么呀,Table进行布局的,但是table不灵活,太什么死板。现代的网页开发中,Div布局使用最多,几乎很少使用什么table进行布局了。当下流行的。什么意思呢?咱们table这种东西呢,它的特点就是框框条条。
03:00
对吧,哎,我画一个框出来,我再画一个。这个位置放什么?放公司的logo?对吧,这个位置放什么。放一些比如说登录成功啊,系统时间几点钟啊,那理解什么意思吧,那这个位置放什么呀?功能列表吧,一个什么功能,又一个什么功能,又一个什么功能,又一个什么功能,又一个什么功能是吧,一点它这个页面上是不是发生变化呀。这个位置是不是放什么什么什么什么版权啊,什么类似的信息,对不对,诶理解这个网页吧,网页。大家看。如果你使用表格进行布局,有什么缺点啊?太死板,限制的太死,什么意思,比如说我现在我就想往这儿放一个东西。没法放啊,你这有这有一条线啊,同学们,这个线控制的你只能放到下边,或者说你只能放到上边,你不可能说这样来一杠子。
04:12
不行。做不到,Table做不到,但是div可以解决这个问题,什么意思?以后网页的开发都不再用table,直接用div div是什么呢?Div是一个图层,有同学老师图层我不懂啊,图层你就想象成它是天空上的一朵云。漂浮不定。错综复杂来,这就是一个图层,一个图层就是一个盒子,一个盒子左上角有坐标,这个坐标有X轴坐标和Y轴坐标,只要定了X轴坐标以及Y轴坐标,我这个盒子我就可以在网页当中给它固定下来。
05:04
如果说您还想往这个位置放一个东西,没问题,您可以固定这个X轴坐标和Y轴坐标,这样的话,我这个点只要定下来,我设置这个div的宽度以及什么高度,这个盒子就定下来了,这个盒子和这个盒子可以重叠,就像天空的云一样,它可以重叠,我们被称为图层,听懂了吧?在整个网页当中漂浮了很多图层,每一个图层都是一个盒子,每一个盒子中都可以套盒子,盒子里边还可以套盒子,盒子里边还可以套盒子。可以做到达到网页当中的布局,布局效果特别的灵活,它不像那个表格一样,表格这种东西就咔嚓上纲上线对吧,就死了,死很死板很死板,所以说div的作用是什么呢?我再给大家强调一下啊,Div的作用就是布局,没有别的作用。
06:02
布局。他这个你你放心啊,咱们这样,咱们从京东上看看京东写的源代码行吗?京东首页的源代码应该是可以看到的啊,来等会的让他加载完啊。哎呀,这个加载这个加载先这么着吧,啊来点右键右键。右键这里有一个查看网页源代码吧。看看啊。你看人家写的这玩意儿,嗯。H5吧,Meta吧,是ta对吧?哎,这地方是不是有S。Keyword啥呀,关键字吧,哎,这个这个关键字有有有有用吗。就网页当中的这个Meta name关键字后边这个东西有用,有没有用,这个关键字非常重要,非常重要啊,如果您关键字写的非常好,你将被搜索引擎收录。
07:06
听懂了吗?有的老师,啥是搜索引擎?百度就是搜索引擎。就你这个keywords关键字,如果这个东西写的好,他就会被各大搜索引擎收录到,收录就是用户从搜索引擎里面搜就能搜到。听懂什么意思了吗?哎,所以说这个呢,有一个专门的职位。做keywords的有个专门的职位叫SEO。SEO优化。SEO。不是CEOCEOCEO。Su是搜索引擎优化。啊,利用搜索引擎的规则,提高网站在有关搜索引擎的自然排名,对不对啊,提高了什么呀,提高这个排名啊,有这个东西,这个地方是P看见了吗。
08:07
Keywords。搞这些关键字的。搞建字啊,所以说这个写的好呢,他就会被收录。听懂了吧,这个收录啊,被搜索引擎收录来,接着再往下,这个地方有一些link,咱们就不用看了啊,你现在看也看不懂这个link,我来说一下,它是链接什么呀?链接我们即将要学的这个CSS文件啊,CSS文件啊,Csscript标签开始标结束,这里边是什么东西啊,这就是我们即将要学的什么javascript代码要写到这个地方,加速代码写到这啊,然后咱们再往下你看全是你看script代码吧,哎,这是不是CS的样式,你看这样式写的你看。你看这样式写的,我的天呐,我都搞不定啊,来来,从这开始往下,还有你看码是不是开始了div看见了吗?Div套div下有U和LY,就是这种布局,各位。
09:12
就是盒子嵌套。盒子套盒子。有的老师这里面还用什么盒子套盒子,你觉得这里面哪个地方有可能是个盒子啊,整个这一块有没有可能它是个盒子,这个盒子里面这个家用电器放在一个盒小盒子里面对吧?诶我们可以看看F12。点他吧。哦,他不是个盒子,它是个Li。Li还记得吗?UL和Li u是个什么?整个这个东西叫什么ul,你看我点中这个ul的时候,你看左边是不是选中了,整个是一个u Lu Lu里边这每一个都是一个什么Li。
10:05
你看这个京东logo有没有在一个div当中啊。在哪?大家看,就这个地方。Logo吧,Logo。就这个就这个就就是这个啊。嗯,这个搜索条呢。这个搜索条它是个input,看见了吗?哎,你看再往上这个input,它是放在哪呢。放在一个盒子里边儿了。放在盒子当中。他这个儿童运动鞋。哦。奥克斯。他。它是动的。动态的是吧,这个地方需要阿贾克斯。
11:01
这些阿贾克斯啊,阿贾克斯后期你会接触的啊,现在跟你讲,你听得懂吗?啊来往下走。啊,两个字很简单啊,你不要以为很高端大气,上档次一样啊,那就是那就是一个异步,异步异步刷新啊,就是异步刷新,很简单的一个东西,就是编程四步,跟JDBC一样,来,这是个div吧。我问大家,如果说您要是想写一个网站的话,你是不是也可以参照一下他的源代码。甚至都有可能control c control v,然后接下来改一改,对不对,改一改啊,这就是所谓的仿。法或者叫抄袭对吧,但是这个抄袭我说一下啊,你要是抄能抄袭过来,并且你能超越他,那是你的能力。
12:01
明白吧,你不能光是超越出来,永远在人家屁股后边跟着,对吧,你超过来是你这个上面有亮点,比他这个好。那你就牛了啊,但是这种情况可能对于京东啊,像这种阿里啊,像这种公司来说,这个超越这个可能性不是很大啊,因为牛人一般都在这儿啊。好了,那说到这儿呢,最主要就是说这个div和span是图层,各位啊,图层就是一个盒子吧,图层就是一个一个的盒子,Div嵌套什么?Div就是盒子套盒子。啊div最主要的作用就是布局了,各位。布局啊,我们可以对div进行定位,Div和span是可以怎么着定位的,对吧,只要定下什么div的。
13:10
左上角。只要定下div的左上角的X轴。和Y轴坐标即可。啊,很灵活很灵活。那这块呢,咱们就是看一看各位啊,我就画一个div出来,这个div有没有ID,就叫DIV1吧,Div当中嵌套div。对吧,但是我觉得现在先别嵌套了啊,Div呢,我就往里面写点东西啊,我是一个div行就就这么地了啊,就这么地了,嗯,然后接下来呢,我们把这个运行一下。
14:04
看不出什么东西对吧。再加一个,把它改成什么DIV2,我想告诉大家的是,默认情况下div会独占行。默认情况下,Div会独自占用一行F12打开,我们来点一下,看见了吗?我鼠标停到这儿,它这个梗,整个这一条大家看到吗。是不是整个这一条对应的就是你看这个下边这个你看看见了吧,诶诶。它有宽度吗?82。对吧,高度是多少啊,21像素啊像素,这是单位是像素PX啊PX就是说div会独占,行各位这一点你要记住,这是和span的区别,Div和N的区别是什么?Div。
15:09
独自占用一行,当然这是什么情况啊,叫默认情况下啊,独自占一行span不会独自占用一行,这是他俩的特点啊,来我们加一个span,各位这个SPAID呢叫SPA1,我是一个span标签,我们再把它拿过来放到这,把这个span改成SPAN2,打开我们来看一下,大家看。看见了吗?来,我们光标呢,停到这个位置上,你看见了吗?诶,这就是一个什么盒子盒子啊,但这个盒子它不会独自占用一行来往下走,你看是不是另外一个盒子啊,哎,行了,那这样的话,关于这个div和span呢,我们就解释这么多。
16:03
也没有新的,也没有什么特别复杂的内容,就是在这里想告诉大家,在网页当中布局啊,我们一般会使用div和span去进行布局,各位啊,来div可以嵌套的各位啊,来ID呢,我们叫DIV3来我们来一个嵌套,Div里边套一个什么div对吧?来div里边再套一个什么div啊,但是你在网页上你目前是看不见什么效果的。啊,看见什么效果的啊。这个ID我就不加了啊。不加了。还是这么一个东西对吧,停到这儿你看看。对的是谁?是不是这个这个上面是不是有它,它是不是有他。你看左边左边左边啊,你看八三二二十一八三二二十一,这个也是83221。
17:02
对吧,哎,嵌套的典韦嵌套。啊,那这样呢,关于这个我们所说的这个HTML,我们就。学完了各位啊,就这些东西来说,这些东西里边有两有,可以说有三大重点吧,三大重点啊,重点一表格,重点二超链接,重点三表达。行吧,这块下去之后,我不管你想什么办法啊,是死敲照着敲,我不管你怎么敲,总之你你得给我敲,敲够量,到时候就是说白了,不用参考任何资料,用文本编辑器,记事本就能写出来。还是那句话。啊,就是画一个放表单,你还得参考别的东西,我觉得你这个太low了啊。就画一个form表单。你都得参考这个东西。大家觉得这个东西好学不好学?
18:00
就你从那个Java SE第一天hello到现在为止。你学的最简单的不就是它吗?其次就是我们刚刚讲过的GGPC。对吧,因为这个东西你不用动脑筋啊。一对吧,不用动脑筋,你多线程不好学,多线程你得去理解,IO你得去理解。尤其集合底层的数据结构,你得理解噩梦已经过去了,什么噩梦,面向对象里边this学的时候多难呀,你哪知道this是个什么东西,Static是啥东西,那么难的人都过来,当时你想想,你学这个面向对象的时候,你们脑子完全一片空白,什么是面向对象,怎么就出来个面向对象,咋就有this,有super,还有什么TE,关键是这都是什么东西,你那么难坚持过来了,咱说白了,这种东西就是直接现在H里面就是放到您嘴边的肉,您要是张口就进去,不张口妥了,您就就就等就就等于吃不到,所以说这个你们应该能感觉出来,这个知识点的一个一个一个一个难,难易程度各位啊,你想想是不是面向对象最难,我们所有讲师里边这个讲课当中啊,面向对象,面向对象让能够讲出来,让学生能够接受,这个对于我们讲师来说,一个是一个最大的挑战。
19:22
所以崔老师最牛。你明白吗?机计算机硕士各位,对计算机硕士啊,是天天开车是吧?行,不管他开不开车啊,反正这人很牛啊,你从班课上你看看人家讲的数据结果你就知道了。什么叫科班儿出身?数据结构叭叭叭叭叭是吧,你看数据结构讲的多深啊,线性表图,红黑树是不是,哎,都都特别厉害啊,特别厉害,跟着他能学到很多东西啊,能学到很多东西,行行了,这个咱们就不说了啊,你要愿意回去学,那你可以回去学啊,反正我不管,因为你可能喜欢他开车呀。
我来说两句