HTML基础教程-26-div和span在网页中的应用【动力节点】原创

那行了，那咱们就继续再往下看一看这个div和span。这是我们H天猫当中最后一个知识点了，各位。来一块儿咱们看一下啊。从这呢，我们去新建一个HTML，然后呢叫018，我们写上去叫做HTML中的div和span。这个div是什么？Div和span是什么呢？有什么用？我觉得任何一个东西，我们讲包括Java也好，对吧，它必然有自己的用途。存在即合理嘛，对吧，那这个东西呢，Div和span它是什么，有什么用呢。

诶，它的作用是布局。布局。Div和span。可以称为什么呢？可以称为或者叫都可以啊，都可以称为什么呢？图层。图层不是图层是个什么东西？这是我回答的第一个问题啊，什么问题是什么啊？第二个我要回答的是什么呢？就是图层有什么用？明白吧，图层的作用是为了保证页面可以灵活的什么布局。图层的作用是为了保证页面可以灵活的布局。

好，最初的时候布局啊，是使用table进行布局的。啊，其实这个最早的网页啊，是采用什么呀，Table进行布局的，但是table不灵活，太什么死板。现代的网页开发中，Div布局使用最多，几乎很少使用什么table进行布局了。当下流行的。什么意思呢？咱们table这种东西呢，它的特点就是框框条条。

对吧，哎，我画一个框出来，我再画一个。这个位置放什么？放公司的logo？对吧，这个位置放什么。放一些比如说登录成功啊，系统时间几点钟啊，那理解什么意思吧，那这个位置放什么呀？功能列表吧，一个什么功能，又一个什么功能，又一个什么功能，又一个什么功能，又一个什么功能是吧，一点它这个页面上是不是发生变化呀。这个位置是不是放什么什么什么什么版权啊，什么类似的信息，对不对，诶理解这个网页吧，网页。大家看。如果你使用表格进行布局，有什么缺点啊？太死板，限制的太死，什么意思，比如说我现在我就想往这儿放一个东西。没法放啊，你这有这有一条线啊，同学们，这个线控制的你只能放到下边，或者说你只能放到上边，你不可能说这样来一杠子。

不行。做不到，Table做不到，但是div可以解决这个问题，什么意思？以后网页的开发都不再用table，直接用div div是什么呢？Div是一个图层，有同学老师图层我不懂啊，图层你就想象成它是天空上的一朵云。漂浮不定。错综复杂来，这就是一个图层，一个图层就是一个盒子，一个盒子左上角有坐标，这个坐标有X轴坐标和Y轴坐标，只要定了X轴坐标以及Y轴坐标，我这个盒子我就可以在网页当中给它固定下来。

如果说您还想往这个位置放一个东西，没问题，您可以固定这个X轴坐标和Y轴坐标，这样的话，我这个点只要定下来，我设置这个div的宽度以及什么高度，这个盒子就定下来了，这个盒子和这个盒子可以重叠，就像天空的云一样，它可以重叠，我们被称为图层，听懂了吧？在整个网页当中漂浮了很多图层，每一个图层都是一个盒子，每一个盒子中都可以套盒子，盒子里边还可以套盒子，盒子里边还可以套盒子。可以做到达到网页当中的布局，布局效果特别的灵活，它不像那个表格一样，表格这种东西就咔嚓上纲上线对吧，就死了，死很死板很死板，所以说div的作用是什么呢？我再给大家强调一下啊，Div的作用就是布局，没有别的作用。

布局。他这个你你放心啊，咱们这样，咱们从京东上看看京东写的源代码行吗？京东首页的源代码应该是可以看到的啊，来等会的让他加载完啊。哎呀，这个加载这个加载先这么着吧，啊来点右键右键。右键这里有一个查看网页源代码吧。看看啊。你看人家写的这玩意儿，嗯。H5吧，Meta吧，是ta对吧？哎，这地方是不是有S。Keyword啥呀，关键字吧，哎，这个这个关键字有有有有用吗。就网页当中的这个Meta name关键字后边这个东西有用，有没有用，这个关键字非常重要，非常重要啊，如果您关键字写的非常好，你将被搜索引擎收录。

听懂了吗？有的老师，啥是搜索引擎？百度就是搜索引擎。就你这个keywords关键字，如果这个东西写的好，他就会被各大搜索引擎收录到，收录就是用户从搜索引擎里面搜就能搜到。听懂什么意思了吗？哎，所以说这个呢，有一个专门的职位。做keywords的有个专门的职位叫SEO。SEO优化。SEO。不是CEOCEOCEO。Su是搜索引擎优化。啊，利用搜索引擎的规则，提高网站在有关搜索引擎的自然排名，对不对啊，提高了什么呀，提高这个排名啊，有这个东西，这个地方是P看见了吗。

Keywords。搞这些关键字的。搞建字啊，所以说这个写的好呢，他就会被收录。听懂了吧，这个收录啊，被搜索引擎收录来，接着再往下，这个地方有一些link，咱们就不用看了啊，你现在看也看不懂这个link，我来说一下，它是链接什么呀？链接我们即将要学的这个CSS文件啊，CSS文件啊，Csscript标签开始标结束，这里边是什么东西啊，这就是我们即将要学的什么javascript代码要写到这个地方，加速代码写到这啊，然后咱们再往下你看全是你看script代码吧，哎，这是不是CS的样式，你看这样式写的你看。你看这样式写的，我的天呐，我都搞不定啊，来来，从这开始往下，还有你看码是不是开始了div看见了吗？Div套div下有U和LY，就是这种布局，各位。

就是盒子嵌套。盒子套盒子。有的老师这里面还用什么盒子套盒子，你觉得这里面哪个地方有可能是个盒子啊，整个这一块有没有可能它是个盒子，这个盒子里面这个家用电器放在一个盒小盒子里面对吧？诶我们可以看看F12。点他吧。哦，他不是个盒子，它是个Li。Li还记得吗？UL和Li u是个什么？整个这个东西叫什么ul，你看我点中这个ul的时候，你看左边是不是选中了，整个是一个u Lu Lu里边这每一个都是一个什么Li。

你看这个京东logo有没有在一个div当中啊。在哪？大家看，就这个地方。Logo吧，Logo。就这个就这个就就是这个啊。嗯，这个搜索条呢。这个搜索条它是个input，看见了吗？哎，你看再往上这个input，它是放在哪呢。放在一个盒子里边儿了。放在盒子当中。他这个儿童运动鞋。哦。奥克斯。他。它是动的。动态的是吧，这个地方需要阿贾克斯。

这些阿贾克斯啊，阿贾克斯后期你会接触的啊，现在跟你讲，你听得懂吗？啊来往下走。啊，两个字很简单啊，你不要以为很高端大气，上档次一样啊，那就是那就是一个异步，异步异步刷新啊，就是异步刷新，很简单的一个东西，就是编程四步，跟JDBC一样，来，这是个div吧。我问大家，如果说您要是想写一个网站的话，你是不是也可以参照一下他的源代码。甚至都有可能control c control v，然后接下来改一改，对不对，改一改啊，这就是所谓的仿。法或者叫抄袭对吧，但是这个抄袭我说一下啊，你要是抄能抄袭过来，并且你能超越他，那是你的能力。

明白吧，你不能光是超越出来，永远在人家屁股后边跟着，对吧，你超过来是你这个上面有亮点，比他这个好。那你就牛了啊，但是这种情况可能对于京东啊，像这种阿里啊，像这种公司来说，这个超越这个可能性不是很大啊，因为牛人一般都在这儿啊。好了，那说到这儿呢，最主要就是说这个div和span是图层，各位啊，图层就是一个盒子吧，图层就是一个一个的盒子，Div嵌套什么？Div就是盒子套盒子。啊div最主要的作用就是布局了，各位。布局啊，我们可以对div进行定位，Div和span是可以怎么着定位的，对吧，只要定下什么div的。

左上角。只要定下div的左上角的X轴。和Y轴坐标即可。啊，很灵活很灵活。那这块呢，咱们就是看一看各位啊，我就画一个div出来，这个div有没有ID，就叫DIV1吧，Div当中嵌套div。对吧，但是我觉得现在先别嵌套了啊，Div呢，我就往里面写点东西啊，我是一个div行就就这么地了啊，就这么地了，嗯，然后接下来呢，我们把这个运行一下。

看不出什么东西对吧。再加一个，把它改成什么DIV2，我想告诉大家的是，默认情况下div会独占行。默认情况下，Div会独自占用一行F12打开，我们来点一下，看见了吗？我鼠标停到这儿，它这个梗，整个这一条大家看到吗。是不是整个这一条对应的就是你看这个下边这个你看看见了吧，诶诶。它有宽度吗？82。对吧，高度是多少啊，21像素啊像素，这是单位是像素PX啊PX就是说div会独占，行各位这一点你要记住，这是和span的区别，Div和N的区别是什么？Div。

独自占用一行，当然这是什么情况啊，叫默认情况下啊，独自占一行span不会独自占用一行，这是他俩的特点啊，来我们加一个span，各位这个SPAID呢叫SPA1，我是一个span标签，我们再把它拿过来放到这，把这个span改成SPAN2，打开我们来看一下，大家看。看见了吗？来，我们光标呢，停到这个位置上，你看见了吗？诶，这就是一个什么盒子盒子啊，但这个盒子它不会独自占用一行来往下走，你看是不是另外一个盒子啊，哎，行了，那这样的话，关于这个div和span呢，我们就解释这么多。

也没有新的，也没有什么特别复杂的内容，就是在这里想告诉大家，在网页当中布局啊，我们一般会使用div和span去进行布局，各位啊，来div可以嵌套的各位啊，来ID呢，我们叫DIV3来我们来一个嵌套，Div里边套一个什么div对吧？来div里边再套一个什么div啊，但是你在网页上你目前是看不见什么效果的。啊，看见什么效果的啊。这个ID我就不加了啊。不加了。还是这么一个东西对吧，停到这儿你看看。对的是谁？是不是这个这个上面是不是有它，它是不是有他。你看左边左边左边啊，你看八三二二十一八三二二十一，这个也是83221。

对吧，哎，嵌套的典韦嵌套。啊，那这样呢，关于这个我们所说的这个HTML，我们就。学完了各位啊，就这些东西来说，这些东西里边有两有，可以说有三大重点吧，三大重点啊，重点一表格，重点二超链接，重点三表达。行吧，这块下去之后，我不管你想什么办法啊，是死敲照着敲，我不管你怎么敲，总之你你得给我敲，敲够量，到时候就是说白了，不用参考任何资料，用文本编辑器，记事本就能写出来。还是那句话。啊，就是画一个放表单，你还得参考别的东西，我觉得你这个太low了啊。就画一个form表单。你都得参考这个东西。大家觉得这个东西好学不好学？

就你从那个Java SE第一天hello到现在为止。你学的最简单的不就是它吗？其次就是我们刚刚讲过的GGPC。对吧，因为这个东西你不用动脑筋啊。一对吧，不用动脑筋，你多线程不好学，多线程你得去理解，IO你得去理解。尤其集合底层的数据结构，你得理解噩梦已经过去了，什么噩梦，面向对象里边this学的时候多难呀，你哪知道this是个什么东西，Static是啥东西，那么难的人都过来，当时你想想，你学这个面向对象的时候，你们脑子完全一片空白，什么是面向对象，怎么就出来个面向对象，咋就有this，有super，还有什么TE，关键是这都是什么东西，你那么难坚持过来了，咱说白了，这种东西就是直接现在H里面就是放到您嘴边的肉，您要是张口就进去，不张口妥了，您就就就等就就等于吃不到，所以说这个你们应该能感觉出来，这个知识点的一个一个一个一个难，难易程度各位啊，你想想是不是面向对象最难，我们所有讲师里边这个讲课当中啊，面向对象，面向对象让能够讲出来，让学生能够接受，这个对于我们讲师来说，一个是一个最大的挑战。

所以崔老师最牛。你明白吗？机计算机硕士各位，对计算机硕士啊，是天天开车是吧？行，不管他开不开车啊，反正这人很牛啊，你从班课上你看看人家讲的数据结果你就知道了。什么叫科班儿出身？数据结构叭叭叭叭叭是吧，你看数据结构讲的多深啊，线性表图，红黑树是不是，哎，都都特别厉害啊，特别厉害，跟着他能学到很多东西啊，能学到很多东西，行行了，这个咱们就不说了啊，你要愿意回去学，那你可以回去学啊，反正我不管，因为你可能喜欢他开车呀。