html父元素是什么

好，我们现在在运行，嗯，运行好，我们运行一下，看一下结果， 可以看到他会依次往下写，对吧？啊？此时他就会把我们刚刚获取的数足里面的对象给便利出来，便利成啊，便利成，所有的值给大家， 对吧？这就是我们获取子元素，所以说咱们前期没有牵强获取子元素，因为他可能要用到我们获取后边后面的获取元素文本啊，转换成具体的值，让我们能够看得懂，而不是给我们一个结果。对象 啊，我也不知道对象里面是什么东西，对吧？他对象里面可能万物皆对象吗？因为我们的 ub 几层也是用用那个拍摄来写的，拍摄，他是面向对象的语言， 万物皆对象，所以说他给了一个结果，对吧？在这里进行了迭代更改，迭代更新完之后进行了更改，这里获取紫元素，结果他就变成了一个对象 啊，变成了一个对象，对象里面有内存、低脂，有类型，甚至有一些歪六值，那我们通过编例的形式获取它里面的歪六值啊，这也是我们比较关心的，对吧？所以通过这个方法可以获取我们紫元素的每一个结果。 好，这点有些大明大家需要下面进行测试一下，因为你这里直接运行这个命令后，会出来的是个对象， 可以通这个，通过这些通过一个便利加一个获取元素文本，会获取他的结果啊，这一点也是非常的巧妙的，希望大家能够认真的去练习。好，我们去再往下获取这个复元素，获取 负元素，我们可以拖过来，同样他给的是一个目标，对吧？一个是目标，嗯，一个是向上级别，向上级别为一啊，一般咱们都是使用默认的就 ok 了。 嗯，我看一下给他个目标，咱们同样给大家测试一下，想一个用这个测试就会不太的灵验，我们我们看一下，嗯，给大家准备一个别的，然后进行测试。 这有一个高铁票的信息，对吧？我们可以通过这个来获取啊，这个上面的内部系统个人高铁票信息。这个复元素怎么样去获取呢？也非常的简单， 你只需要点击他，点击他啊下面的任何一个字元素，比如点击开始时间，我们就 通过这个开始时间这个子元素来获取他的复元素啊，就可以赚就可以获取的到。那他有一个返回值，同样我们把这个返回值啊给他输出来，然后把这个临时变亮 啊，复制一下粘贴到输出的内容这里。好，我们直接运行看一下结果， 对吧？他运行的结果仍然是个对象，那对象是什么呢？同样这里你可以看得到他，并不是他只有一个，对吧？咱们不需要便利，只需要获取就行了。咱们来到我们这里的命令行，这里可以在这里加入一个 在它中间啊，在这里加入一个获取元素，获取元素文本，获取元素文本这里会有一个输出到一个临时变量，帮我们把这个临时变量复制过来粘贴到目标里。好，这是一个 iclit， 同样我们把 icrit 这个 变亮，要逐级的进行 cop 粘贴好，我们直接运行看一下结果， 可以看到，对吧？这个他的复元素的信息就被打印到工作台上，我们已经获取到了，那同样的，有的同学说是不是通过只能通过他来获取复元素呢？不然我们可以进行再给大家去测试一下，比如我们这里， 对吧？嗯，这是咱们不点开时间可以点结束的时间也是一样的，我们仍然运行一下， 看到获取的结果，对吧？仍然是你通过复复元素下面的任何一个子元素都可以获取他的上一级的复元素，这就是这个命令的作用， 好吧。嗯，那好，我们到到这里，我们的整个界面元素下面的所有的命令都给大家一一的进行了讲解。好，谢谢大家的观看。

今天来分享一些 css 的知识点，怎样实现这种布局？看到这样的布局，很多朋友第一反应应该是一个副 tiv， 里面四个子 tiv 不错， html 部分确实是这样，那 css 该怎么实现呢？首先我们设置一个负盒子 class 为 boss， 四个子盒子 class 为送。先给负盒子和子盒子的基础样式设置， 设置完是这样的，纸盒子现在是跨元素，我们需要让它水平排列，所以设置纸盒子的 tcplay 为英莱 block。 然后设置纸盒子的外编剧，统一设置每一个纸盒子的右下外编剧为二十像素， 发现他溢出来了。原因是因为第二个纸盒子和第四个纸盒子我们不需要设置右编剧，所以我们使用 nt s 刚 off 刚太谱来给第偶数个子盒子的右外编剧设置为零像素。这个时候我们发现子盒子的排列还是没有任 和反应。首先我们的 css 盒子默认都是标准合模型，而我们这里需要的是 ie 合模型，也叫做怪异合模型。那么什么是标准合模型？什么是怪异合模型？我们下个视频讲。这里我们设置子和字合模型为怪异合模型，理论上就可以了， 可是他还是没变。当我们把所有纸盒子放在同一行之后， 发现效果就有了，但我们不能把所有元素都放在同一行，不易阅读和维护。那为什么会出现这样呢？原因是我们每个纸盒子之间存在空格节点，空格节点也会占用空间。当我们给负盒子设置字体大小为零像素， 这些空格节点占用的空间就消失了。当我们需要设置字体大小时，单独为元素设置即可，这样看起来是没什么问 问题了，但是当我们检查元素后，发现后面这两个纸盒子还存在着下万边界，那么怎么一次性解决掉呢？我们可以使用 cs 的波浪选择器统一设置表示该元素，后面的送 统一设置下外编剧为零像素。这个视频包含了一些琐碎的 cic 的知识，希望能帮助到你。

那么刚才呢，我们已经看到了哈，在绝对定位过程当中产生的一个问题啊，我们也分析过了，这个问题呢，是由于一个元素，如果他基于复元素定位，那么这里会有一个前提条件，前提条件是什么呢？ 这个元素必须基于其做过定位的复元素 来进行定位。好，那我们现在来看一看什么叫做过定位。目前的 let， 他如果想要基于 box 来做定位， 那首先前提条件就是 box 也是经过了定位的一个元素才可以，否则的话这个元素就会层层的往外去找他的定位原点啊。我们现在都知道啊，元素他会有包 含关系，对吧？包含关系，比如说我有一个 box 包含了 let， 那 let 的里面是不是还可以再有紫元素，对吧？这样的话呢？他就会有一个什么会有一个这种就是我们所谓的节点啊，他的节点的一个这个，呃，继承关系啊，有一个祖孙关系， 那么只要一个元素，他在做定位的时候一定要记得他的定位原点，就是首先去找他的复原素，看他的复原素是否产生的定位，如果没有，他就会直接去找到他的复原素的复原素， 那直到找到他的所有的祖先元素当中某一个元素是做过定位的，那么他的定位原点就是这个祖先元素。但如果他的所有子祖祖先元素当中没有任何一个元素是做过定位的， 那么他就会直接去找到他的最主线元素，也就是 body 啊，这个就是我们在进行绝对定位时所谓的基于复原素原理是什么啊？就是这个原理，那这个时候我们要去 修改我们刚才遇到的这个问题啊，我们希望他是基于复元素来做的定位，那么根据我们刚才分析的，这个时候复元素必须先做定位，也就是我们这里的 box， 那在这里就又会有一个疑问呢，他可以做定位，但这个定位用什么方式呢？我们有相对定位，绝对定位和固定定位，我们刚才在讲的过程当中已经说过了， 绝对定位和固定定位都会脱离文档流，所以如果一个元素使用到了绝对定位或者固定定位后，注意看。 首先先来看此元素，奈夫的这个元素，他现在确实已经是基于复元素在做定位了，但复元素现在 发生了一个问题，他的顶部的 mog in 有影响，但是我们左右 mog in 是不是写的是 out， 对吧？那这个时候在我们进行定位就是进行布局的时候， marking the aut 对于脱离稳挡流的元素是不起作用的， 看他在这里的话呢，是有影响的。所以在这种情况下啊，我们就尽量不要去选择 apsolut 或者是什么 face 的啊，因为这两个方式的话呢，尤其 face 的。你想一想，如果说现在我们的淘宝网 上的这个区域，他用的是固定定位啊，中间的这个，这个广告的这个区域用的是固定定位，那你就会会会发生一个什么样的一个情况， 当我的鼠标滚轴在进行滚动的时候，这个元素会产生移动吗？不会，对吧？所以这里就会产生一个问题，我的页面分明已经滚动了，这个时候我不希望当前元素 固定在这个位置，但是他会产生一个效果，就是你的滚动条在滚动的时候，这个广告的部分他会定位在这里， 对吧？好，所以在这种情况下，不要去选择让你的元素做绝对定位或者固定定位，那么在这里我们直接让他为相对定位。为什么用相对定位？首先来看，当他做了相对定位后，元素的原本位置是不会 产生修改的，也就是我们刚才几个问题。首先第一个原本位置不会产生修改，也就是说他会对 marking out 这个东西是有作用的啊，说白了其实也就是我们对他所进行位置设置这个东西是不会有影响的啊，因为他的原始位置会保留，对不对？ 好，既然原始位置保留了，那么你在布局的过程当中，就一般来说哈，就不会再产生其他的什么影响了。 所以在这种情况下，我们使得元素的定位啊，复元素定位为相对定位，然后紫元素再去做绝对定位，那这个时候你的紫元素就是基于复元素来做的一个定位，所以左边的这个元素现在就很明显的放在了 你需要放的位置。那同理右边的这个元素我们要放到右边来，是不是就应该是单独去写点 rat position？ 首先让他为绝对定位，然后距离右方为零， 来这里，距离右方零，他是不是就会跑到这里来了，对吧？复联四做个定位，那么这个时候 紫元素距离右方零就会跑到右边上下和左边的啊，也就是他距离顶部的位置和左边位置持平，所以同理他也有一个 top 一百二十 px。 好，那这个定位就完成了，好， ok 了，所以在这里如果说我们要去解决一个 元素啊，他的一个什么元素要基于复元素来做定位这样的一个操作的话呢，那我们就可以用到刚才的这个概念啊，用到刚才的这个概念，好吧， 好，那这里的话呢，我们就简单讲解了一下定位的三种方式啊，以及在我们进行定位的过程当中， 这个元素它发生的一些这个什么一些特殊的一些位置关系哈，里面要注意的这样的几个问题。 好， ok， 那么定位的话呢，我们就先讲到这里，那么后面的话呢，我们在实际的这个，呃，业务开发的过程当中啊，会有一些嗯，效果。比如说我们这里可以先看一看，像我们可以去书写出，可以通过定位来书写出这样的下拉列表 以及侧拉列表啊，以及这样的侧拉列表都是可以去进行书写的，这些都是通过定位来的啊，都是通过定位来的。但是呢还有一个什么，有一个紫元素和复元素的一个包含关系。那好，大家可以尝试着先去做一下啊，那具体的一个写法的话呢，我们下节课的时候来进行一个重点讲解。

到大家，那么接下来呢，咱们继续下一个叫做属性选择器，属性选择器，那么什么是属性选择器呢？ 那所谓的属性选择器啊，那就是对带有属性的元素啊，指定样式，对吧？哎，叫为带有属性的元素呢，去指定样式，那么这时呢，就需要利用属性选择器， 那么属性选择器的话呢，它有几种语法格式，但是呢都是比较简单的，比如说来个语法格式一，语法格式一指的是什么呢？就是标签必须包含某属性，对吧？哎，我们要选中必须包含某属性的标签啊，就是 是标签，标签呢，必须包含某个属性，他的语法格式呢，首先呢就是标 标签名，然后中括号来个属性名，必须某个标签包括包含某个属性，那么比如说呢，我们来一个叫做音铺他标签，然后呢我给他指定一个 y 六属性，比如说来个呵呵，然后呢我再来一个音铺他 标签，哎，音铺他音铺他标签，然后呢他没有外流属性，看懂吧？哎，那么此时呢，我要利用属性选择器的第一种语法呢，选中 带有歪溜属性的音铺的标签啊，那么此时那就标签名音铺他带有什么呢？带有歪溜属性，我要一对大挂号送冰块，我要为他设置个 bag 广场的卡了，就是背景颜色来一个绿豆沙色可以吧，那么此时执行 大家注意看，我们没有歪六属性的文文框，是不是就没有被选中啊？哎，然后呢带有歪六属性的背景色就变成了绿豆沙色， 好吧，那这就是属性选择器的第一种语法格式，那么属性选择器呢，他也有第二种语法格式，语法格式二， 那么指的就是标签啊，标签的属性必须等于某个值，标签属性必须等于某个值，那就还是格式呢，就是标签名中括号后边来个属性名，然后等于后边来个属性值啊，就是属性必须等于某个值， 那么比如说我们再来一个，对吧，为下边这个音铺的呢，也指定个歪柳，但是他的歪柳呢，叫，哈哈，看懂吧。哎，那么此时呢，我们利用这个语法格扇去选中这个，哈哈， 那就印铺的标签，然后外流属性呢？外流属性呢，必须得等于，哈哈，然后呢，我要为他设置个背景颜色，设置个叫做胭脂红色啊，胭脂红，那么以直行 此时看，是不是哈哈变成了胭脂红啊，而而原来的，呵呵，还是绿豆沙 好啊。 ok， 那么相应的呢，实际上 css 三呢，也对这个属性选择器做了一个扩展，说 cs 三，嗯，对属性选择器的扩展扩展有哪些呢？那咱们再来个叫语法 格式三，语法格式三指的什么呢？就是指的是标签属性啊，以某个值开头，哎，标签的属性以某个值开头的，那么它的格式 就是标签名中括号，然后来个属性名，属性名，大家注意，又来个新的符号，就是 shift 加键盘六的这个符号啊，这个符号我叫不上名字啊，就是 shift 加键盘六，然后等号，然后对应的属性值， 看懂吧。啊，那么此时我们得搞几个，说以什么什么开头，比如说我们搞几个 div 吧啊，比如说叫 div 几，然后我是 div 几 乘以个三，是不是那个爱慕他语法啊，一个推宝剑啊，搞了三个 div， 他们都拥有 class 属性，对吧？然后呢，当然 class 属性是不是都是以 div 开头的呀？那么为了区分呢，我们再来几个 div， 比如说呢，这几个 div 呢，叫做第几杠哈喽吧，啊，然后呢，里边写点内容，我是 是哈喽几，可以吧，来，乘以个三， ok， 那么这几个 div 呢，他的名称是不是不是以 div 开头的呀？那么接下来啊，我要选中属性名为 div 开头的这几个 div 标签，看懂吧。那，那么过来，那就是 div， 他得有 class 属性，然后值呢？以 div 开头的，我要为他设置一个背景色，来个海天蓝，对吧？都是一些比较好看的护眼啊， 保护眼睛的颜色啊，那此时我一直行，哎呦，呃，大家此时注意啊，我，我是故意的，对吧？为什么呢？因为大家注意这个符号呢，比较的特别，所以说呢，我为了给大家强， 我故意演示了一个，对吧？哎，你忘加了这个符号，那是选不中的，听懂吧。哎，所以说这个符号呢，大家一定要注意一下，我为了给大家做一个强调，哎，我就故意没写他，听懂吧，是不是大家一下就记住了，哎， 那这次注意看啊，可，呃， div 可辣子属性叫做以这个名开头的，听懂吗？那这时再执行，此时看，是不是有个背景色叫海天蓝呢？哎，那这就是以某个折开头，对吧？并且对这个小符号我们做了一个强调， 解释的有点牵强，是吧？行，那下一个叫做语法格式四，那刚才都有以什么什么开头，那是不是相应的也有以什么什么结尾啊，叫做标签属性以 某个值结尾，那么格式的话呢，那就是标签名中括号数， 姓名，然后大家注意美元符等号，然后后面跟上属性值，那就是以某个值结尾。比如说我下边的这几个 div 是不是都是以哈喽结尾啊，也就是克拉斯属性以哈喽结尾，嗯，克拉斯属性名以 哈喽结尾的，我要把这三个标签选中，那怎么办？哎，那么此时我们去选中他就是 div 有可拉斯属性，并且可拉斯属性以这个什么结尾呢？以哈喽结尾的， 哎，克拉斯属性的值啊，你哈喽结尾，我选中他，这次干嘛呢？我给来个文本颜色吧，来个卡了，来个 red， 文本颜色变成红色。大家注意啊， 有六个 div 呢，我们看看谁的文本颜色会变成红色。那是不是这几个以哈喽结尾的会变成红色呀？哎， 那么这个就是，呃，标签属性必须以某个折结尾。那么还有第五个语法格式，对吧？语法格式五， 第五个语法格是什么呢？叫做标签属性啊，嗯，必须包含某个值，叫做包含某个值。 格式呢，那就是标签名中括号属性名，然后叫星号等于号，对吧？星等某个属性值，那么此时 啊，包含。我们说这六个 div 是不是都包含 d 呀？对吧？克拉斯属性都包含字母 d 啊，那这时我们就选中包含 d 这个值的 属性，那还是叫 div， 然后有 class 属性，并且 class 属性呢？包含地啊，包含地。那么此时我要为他设个方特赛子吧，字体大小，我要把这个包含地的呢字体大小全设置成三十像素，那么过来我们刷新， 那这几个就被选中了，好吧，哎，这个属性选择器呢，你别看有好几个，对吧？有五个，那都是对属性值做一些要求，所以说属性选择器呢，还是比较简单的。好吧，哎，大家稍微练一下即可啊。

好，接下来呢，咱们来带同学们学习清除浮动的第五种方法，叫做给复元素呢，设置 oplow 黑的这么一个属性。 那这里呢，同样咱们给同学们来演示一下哦，还是刚才那个例子，复元素没射高，有他标准流中的紫元素呢，所撑开的。但如果此时呢，咱们找到当前的紫元素，让他 flot love you 那子元素浮动之后在标准流中不占位置，所以他不能将他标准流中的复元素给撑开了哟。所以此事来去刷新， 咱们会发现，此时右击检查鼠标，找到当前的发字，他的高度呢，此时是咱们的零在这，那现在咱们想要清除掉 洞给咱们所带来的影响，要让复元素有高度，那咱们怎么办呢？哎，咱们可以此时找到法子给他设置一个属性，叫做 oppo， 只为咱们的黑的呢就行了， 写完之后咱们再来去刷新，同样也是能解决咱们当前的问题的。好，那么说到这里呢，咱们去大同学们介绍了第一物种可能会在开发中用到的清除浮动方法，叫做给复元素设置 offer 哦，黑的 啊，他的特点呢，就是使用起来比较方便，直接给复元素加证明行代码呢就可以了。好，说到这里呢，咱们带同学们已经介绍了五个比较常见的庆祝活动的方法，那么最终呢，咱们来带同学们进入 小节环节，同学们大概回想一下，咱们刚才一共讲了哪一些轻肢浮动的常见方法呢？哎， 咱们来回忆一下哦。首先一来就是如果可以直接设置高度，咱们就直接给复元素呢，设置高度是最简单粗暴的操作哦， 但如果复元素的高度呢不好直接固定，那咱们可能需要使用以下这么几个常见的方法，比如说咱们早期使用的方法呢，叫做额外标签法，就是在 复元素内容的最后呢添加一个快元素，并且给添加的快元素呢设置清除浮动的核心代码叫做可利亚 boss。 那额外标签法的缺点在于， 他会给网页中添加很多多余的标签，因此呢，咱们使用后面所新推出来的伪元素呢来去替代了一下。咱们可以使用单维元素清除法呢来去完成代码呢，就是如右图所示，同 同学们在实际开发的时候，可以将咱们代码背下来或者直接粘过去用哦，因为这个代码完全是固定的。 那么除了讲了单位元素清除法之外，老师还给同学们介绍到了双维元素清除法，他用到了两个元素， 那他使用两个伪元素之后，其实他有两个小功能，一方面可以用来轻织浮动，另一方面通过帽帽笔缝，在复元素内容的最前面添加了一个伪元素，他也能解决慢性的塌陷现象。 那最后一个呢，也是一个比较方便的做法，叫做给复元素设置 oplow 黑灯，他也是能解决咱们轻质浮动的影响的呦。 好，说到这里，咱们就带同学们介绍完了清除浮动的几个常见的方法，同学们对于这几个常见的方法，脑海中需要有印象哦 啊，咱们在实际开发的时候呢，其实还是伪元素轻奢法用的会更多一点，同学们可以将这两套代码呢给记住或者背下来多去练一练呢就行了。

我们继续来去学习 h t m 的基本语法，在这一部分我们主要去讲解一下对 h t m 元素的一个理解。那么什么是 h t m 元素？ 其实我们之前学了 hm 标签，那么 hcm 元素指的就是从开始标签到结束标签的所有内容。 标签呢就是一对监控，包括我们标签名，这是一个单独的标签，那么我们在开始标签到结束标签包括中间所有内容，他们一个统称叫做 h 贴膜的元素，他包含三部分内容，开始元素内容以及结束标签。比如 说我们在双标签内部包含了我们的纯文本的内容一段文字，那么这一段文字呢，就是我们的元素内容， 而他加上我们开始跟结束标签整体指的就是一个 htm 二元素。例如我们之前写过一个叫做皮标签， 带着中间内容呢，这就是 h t m 元素，理解清楚标签跟元素的一个区别，标签他其实可以当做我们 a t m 元素的一个组成部分。由于我们呢一个长久以来的习惯，可能你会去听到其他人说 h m 标签以及 h t r 标 先内部的内容，那么现在呢，我们有一个统称，你可以管它叫做 a 贴膜元素。接下来我们说 元素内容呢，实际上他是多种多样的，就比如说我们可以去直接在内部去书写一个普通的文字，他是我们的元素内容，当然这个内容呢也可以变成 一个其他的 ht 二元素，这种元素内容里面包含其他我们的 ht 二元素的情况，我们是管他叫做嵌套。就比如说我们在刚刚的案例里面去进行一个深化，在我们这个标签里边批 加双标签内容加结束标签，这是一个批元素。另外如果我们在这个位置呢，去书写一个 div 标签， div 开始，然后呢我们再来一个 div 结束， 这也是一个双标签，他其实本身也是一个元素，只不过里面的内容呢，暂时还没有。可是我除了在双标签之内呢，去写一些普通的文字之外，我还可以在他中间啊去写另外一个标签元素，比如说在他的里面再去写一个 p 标签， 有开始，有结束，那么在 p 标签中间我们再来一个，这是 div 内部的段落，看到了吗？ 这个里面呢，也是我们的一种叫做 h 贴膜元素，这个是 div 元素整体，但是这个元素内容呢，跟我们之前不一样，原来是普通的一个文字文本，现在呢他的元素内容变成了一个另外的批元素。 这个皮元素我可以看到他也是一个整体，他有开始，有结束，有自己的元素内容，他们作为一个整体元素来说呢，也可以当做 div 的元素内容。明白这个关系吗？也就是说我的 div 内部嵌套了另外一个元素，这是一种嵌套 的关系。那么这种嵌套的关系呢？我们如果利用我们人类的这个族谱关系去比喻他的话，可以称之为 div 是一个复元素，而 p 呢，是这个复元素里面的一个子元素，他们之间是有嵌套包含关系存在的，这是我们所说的第一种叫做嵌套。 另外除了我们之间可以去写一个元素之外，他可以去欠套更多的元素内容，也就是说一个 atm 元素，例如 div， 他的这个元素内容呢，可以是一个其他的元素，也可以是多个其他的元素。比如说我们刚刚有一个 p 元素在内，我还可以同时在旁边去添加一个 h 过来，也就说我在这个里面，在前面呢，再来一个 h 一，首先呢先把他肩膀写全，避免丢失， 这里面呢，来一个 h 一，我们说这是什么呢？这是 div 中的一级标题，这种圆 元素写法也是允许的，在这个里面呢，我们去看一下啊，他的包裹关系，最外层的实际上是 div， 包裹了里面的所有内容，这是属于我们元素内容。而这个元素内容里面呢，又包含两个另外的元素，一个是 h 一，一个是 p。 那么这种写法呢，实际上就是相当于 div 有两个子元素，他作为复元素来说呢，有两个子元素，而 h 一跟 p 呢，他们两个之间是并没有包含关系的，他们是平行关系，那么这种平行关系呢，我们可以管他叫做兄弟级关系。通过这样的一个小案例，我们可以去了解 下，在我们经常去写的上面结构中，我们会说一些叫做嵌套关系，父子关系和兄弟关系，指的就是这种嵌套关系里面存在的，那么这是我们所说的嵌套， 在这里呢，显示的更明确，外部有个 dna 包裹了两个子元素，一个 p， 一个 h 一元素，而 p 跟 h 一呢，他们就是同级元素，也可以管他们叫做兄弟级关系，这是我们所谓的元素内容。 当然单标签他只有一个标签的情况下，比如说这个闭眼没有办法跟另外的内容去包裹一个东西，所以 对这种单标签没有办法添加这一些元素内容，我们可以管他叫做空元素，就是里面元素内容为空，根据我们的这一个元素 内部的内容可以去装什么的问题，我们可以去将标签呢划分成两个级别，这两个级别呢希望大家去好好的理解一下。首先 我们去划分了一第一个级别叫做容器级，所谓的容器呢，其实就是用来去容纳其他内容的，而这个里面的容器级指的是标签内部的元素内容是可以存放任意内容的，这个任意内容呢指的是 可以写文字，又可以去写我们的容器级标签，还可以去写一些其他的级别的标签，比如说你可以在 h 一里面去添加 div， 添加 p 等等标签。 而 dnv 本身也是一个容器机标签，他们之间是互相可以去进行嵌套的，这种呢是容器机标签，也就说他内部什么都可以 没有任何限制。另外呢还有个叫做文本级标签，文本我们能看的清楚，所谓的文本呢就是文字类的内容，如果一个标签内部呢只能存放文字类的内容，那么我们称这种标签为文本级， 这种文本级标签是不可以放我们的容器级标签当做他内容，比如说 p 标签就是一个文本级内容，怎么去体现呢？我们来一起看一下。在这里 我们在 div 中去嵌套了 h 一和 p， 这个是在浏览器中加载，没有问题的，我们可以去打开我们的浏览器页面，刷新之后 右键的点击，我们说谷歌浏览器有自己的那个调试控制台，看我们的爱丽们的这个位置呢，是帮我们呈现的 htm 标签， 重点呢？看谁呢？看 div 跟里面的内容，你会发现我们这个过程中 div 确实包裹了 h 一和 p， 所以我们管这种 div 叫做容器级的标签。那为什么 p 就是文本级的标签呢？我们去举一个反的例子， 这个是呢，我们有一个 p 标签，如果我在 p 标签里面去存放一个容器级的，看允不允许，比如说呢，我们的 h 一是一个容器级，我能不能把 h 一放到 p 里面去 拿过来，这是一个 p 中的一级标题，那我们刷新之后呢？看这里看不出什么太大的效果，但是我们看一下我们的控制台，在这个地方，我们会发现，在 dnv 结束了之后，我明明是用一个 p 去包裹了 h 一，可是他包 我呢，把这个标签变成了三对，一个是自动结束的 p， 还有一个中间单独的 h 一以及自动结束的 p。 为什么他会去帮我补全了两个 p 呢？原因就是因为 h 一他的范围太广，而 p 标签呢，不能存放住， 所以说 h 一呢单独拿出来了，这就理解了，为什么我们说文本级标签里面呢？他不能放容器级的内容，只能放文本节内容，而前面这一个皮标签，他是放的普通的文字，没有任何的错误。通过这样的两个想象力， 希望你能理解什么叫做容器级，什么叫做文本级，就是根据他内部能够存放的内容不同去进行的一个划分。除了我们的标签级别之外，其实作为贴面元素来说，他有一些特殊的特性，我们需要去进行 一个了解。首先第一点我们的元素与元素之间对空格、换行、缩进等形成的空白不敏感，也就是说在我们的元素之间有没有空白，对他在浏览器中的加载效果是没有任何影响的。 那么我们的浏览器呢，他只会去识别元素标签开始在哪里，结束在哪里，中间的内容是什么，以及我们的互相之间的签到关系。 这有一个好处，可以给大家去进行一个展示。在这里我们看到刚刚我在去书写这一个 div 的时候，我们把它去写在了一行中间的，没有任何空白换行， 是现在我要去把这个一个 div 跟 h 一之间去进行一个换行，然后呢我再去书写一个太步键缩写，把 h 一跟 p 标签之内也去进行一个换行，然后去进行缩进， 最后把 div 呢再去进行换行。也就说我给他去进行了添加了一堆空白，有了这堆空白之后呢，看起来会更加好看一些， 但是这样书写之后对我们的浏览器有没有影响呢？我们直接 ctrls 保存在浏览器中查看我们的效果刷新，你会发现在我们的浏览器中保存之后，刷新效果没有任何区别， 这有一个什么好处呢？也就是说我们在书写代码的过程中，我希望代码呢是清晰可读的，那么我去写了一堆这种空白，对我们元素不影响的话呢，我是尽量让他有规范一些， 尽量能够去进行换行。同级元素之间的对齐夫子之间有一个缩进，这样的结构会更加漂亮，而他并不会影响我们浏览器 其中的一个加载效果，这就是我们所说的它的一个好处，就相当于我们写同样一堆没有换行的内容，他的加载效果跟我们的换行的内容呢是一样的。也就说元素，这是 一个完整的元素，与元素之间有任何的空白，都不影响我们的加载效果，我们可以利用这一点呢，将来自己在去写代码的时候做好换行和缩进。 怎么去换行缩进呢？我们的不同的元素之间去进行换行书写，如果是父子级呢，在子级跟父子级之间进行一个缩进书写， 就相当于我的 div 跟 p 和 h 一之间去进行缩进，同级之间呢进行对齐，这样的结构呢，会非常清楚，这是第一个特性，哎，天门元素第二个特性是跟他的元素内容有关系的，我们说 元素之间呢，对空白不敏感，可是元素内容呢，他对空白是比较敏感的，他会出现一种叫做空白折叠现象，这种空白折叠现象呢，是出现在我们的一些 纯文本的元素内容，或者是类似文本的元素内容之间的，如果他们在普通文字之间出现了大量的空格换行和缩进等空白， 在浏览器中加载的时候啊，你会发现他有个特殊现象，就是说连在一起的空白呢，他不会直接给你加载完整，而是压缩成一个空杆进行显示，这就是空白折叠现象。在这里呢，我们也来去进行一个演示， 假如说我们在这里有一个批标签在内部呢，我们去书写，这是一个 一个段落，我们的元素内容之间对空格换行缩进 形成的空白，会出现一个叫做空白折叠现象，那么这个现象 我们来去直接写下，比如说我在空吧空格两个字中间去写一堆空格，直接我们的空格键去敲， 然后在换行中间呢直接按一个回车，让他去进行换行书写，最后在缩进的文字之间呢，按一个太步键，让他去进行缩进。那么我们看一下这样形成的一些空白，在我们浏览器中是不是会保持原样去进行加载 刷新，看一下最新的这一个段落，这里边呢空格中间的很多空白只有一个空格加载出来， 我们的换行呢也被一个空杆去进行替换，我们的缩进呢也被一个空杆去进行替换，其实这就是一个折叠的效果，我们所谓的空白折叠现象就是出现在这种普通的元素 内容之间，跟我们刚刚的那个不敏感的，你要去区分清楚，一个是普通的元素内容，一个是元素与元素之间他们的空白，这两个理解清楚了之后呢，对你的页面中书写的时候出现的一些问题呢，你会更加清楚， 这是我们所谓的空白折叠现象。以上是我们所说的天马元素的两种特性。

什么是 flex 布局？当复原素设置 display 为 flex 或者 inline flex 时，我们就创建了一个 flex 容器，直系紫元素就会变为 flex 元素。 flexbox 是一种一维的布局， 因为一个 flexbox 一次只能处理一个维度上的元素布局一行或者一列 flexbox 的两根轴线， 主轴和交叉轴。主轴由 flexter action 定义，交叉轴垂直于他。修改 flexter action 属性可以让我们更改 flex 元素的排列方向。下面我们来看实际操作例子。当我们设置复元素 display with flex 时，此元素默认从左到右排列。 flexter action 的默认值即为荣。 当我们修改 flax pro action 为 row reserve 时，此元素则从右到左排列。修改为 column 时， 紫元素则从上到下排列。修改为 column reverse 时，紫元素则从下到上排列。 flex rap 属性指定 flex 元素单行显示还是多行显示？设置 flex rap 为 no rap 时，紫元素被摆放到倒一行，紫元素宽度会被压缩。设置 flex rap v rap 时， flex 元素被打断到多个行中。 justify content 属性用来使元素在主周方向上对齐。主周方向是通过 flex direction 设置的方向。 justify content 属性的只有 stretch。 flex start， flex end center， space around space between。 justify content 初始值是 flex start。 元素从容器的起始线排列， 把直设置为 flax end 则从中指线开始排列。设置为 center， 则在中间排列。 使用 space around 使每个元素的左右空间相等。 把值设置为 space between， 使元素之间间隔相等，两边不留空隙。 align items 属性可以使元素在交叉轴方向对齐。 align items 属性的只有 stretch flax start， flax end center align items 初始职位 stretch flax 元素会默认被拉伸到最高元素的高度，被拉伸来填满。 flax 容器 设置值为 flex start 时，此元素按 flex 容器的顶部对齐。设置为 flex ant 时，按 flex 容器的下部对齐。 设置值为三台 时，使他们居中对齐。我们也常用来设置一个元素在垂直居中方向对齐。关于 flex 布局，我们这节课就讲到这些，感谢您的关注点赞！

嗨，大家好，今天开始我们正式去编写我们的 jasque， jasque 这边引入方式有两种，一个是文档内直接引入啊，文档内直接可以嵌套我们的 jasque 代码片段。 第二种方式就是在外部文档的方式去引入，第一种方式在文档内，文档内我们通过 script 这个元素啊， script 元素去包裹我们的 jazz script 内容。那我们可以用一下，比如说 console 啊，然后 log， ok， 然后我们这边写一下啊，算是我们编程语言第一个都要去打印一下 hello world 对不对？那我们这边去 hello world， ok， 这是我们的 hello word， 这个是在终端里面输出文本内容的意思啊，这个是 consoles， 还有这个 log 方法啊，就可以去输出对应的一个文字，我这边给他传了一个自助串。啊，自助串是什么意思？我们后面会 讲解，在数据类型的时候讲解，大家放心。好，我们可以看一下，怎么样去看到这个文字呢啊？右键查看或者是按 f 十二都可以啊，然后你可以看到 hello work 已经被写到这里了， 它就是在对应的这个行数，就是第十四行直接去执行了。好了， word 啊，这个就行，上面这个错误大家可以忽略掉啊，这就是我们简单的在行内里边去编写。

好了，前面的一小节呢，给大家说了一下关于我们网页布局的概念。接下来咱们说一下关于复元素的样式。那我把这个呢再给大家复制一份。这个呢，咱们就叫什么呢？就叫 pent， 或者说就叫肯台的样式了。 ok， 同样的重命名一下啊，把它呢叫达摩林二。 那在复原素样式里面，他都会有一些什么样的样式可以供我们去处理呢？我们把这个台阶布局的样式呢，给大家放下来，单独来说明一下。好。在复原素里面呢有这么几种钥匙。首先呢， display flex， 这个呢其实就是声明什么呢？声明我们 的容器为一个什么呢？为弹性布局的这样一个格式。 然后它里面呢内部的一些元素，内部元素遵循弹性布局好。然后第二个呢，就是 flax direction， the flex direction 呢，末热情况下呢，它是弱。 ok， 给大家写上这个呢，其实就是一个什么呢？弹性布局的一个排列方向。 ok， 默认了是横向的。从什么呢？从左到右，左右排列好。那当然也有一些奇葩的可选值，比如说康纳某 就是裂的形式。然后呢，还有什么呢？还有反过来的，比如说我们呢在构建的过程中有 rovers 啊， rovers 了，就是倒过来的意思。我们来看一下，现在是横向正向排列刷新。 ok， 咱们呢保存一下啊。嗯，把这个呢改一下 来，右键重新打开一下。为什么不刷新呢？因为前面这个呢是我们什么丹木零一。这个呢是我们的丹木零二，大家就会发现了，他是什么倒着排列了。 ok， 那同样的呢，我们在这里改的时候呢，如果说改成什么康乐某，他就是什么呢？纵向排列，这个呢，大家应该能看出来了， 所以在构建的过程中呢，我们就会有这样的一个哎，排列的方向。那排列方向确定呢？比如说我还是默认的很像，那如果我要把它排列在中间，也就是说上下居中对齐应该怎么办呢？ 这个操作方式呢，也比较简单，也就是说上下局中对齐的时候，我们就可以设置什么呢？设置 st ok。 这个呢，其实就是我们的子项目的一个什么呢？对齐方式 ok。 那此项目的对齐方式森特的话呢，他就是居中。那在构建的过程当中，他可以有 flax stat 这样一个选项，有森特选项，也可以有 flaxn 的选项， ok， 他其实就是上对其居中 下对齐。那在操作的过程中呢，它里面如果说只有一行数据的话，我们就可以用它。注意它在操作的时候呢，只有什么呢？一行数据的时候呢，我们就可以用它。 那我接下来呢再解决一个问题，我们前面说到了说哎，这一行数据呢，每一个元素我们其实是设了宽度的，但是为什么他们全部这个宽度没有生效呢？是因为他们呢每一个元素都被压缩了， 因为一行放不下吗？那我们怎么样让他一行能放得下呢？这时候我们就用到了另外一个东西叫 flax。 什么呢？ rap， flexrap 呢，默认情况呢是 low rap。 这是一个什么样 东西呢？就是子项目是否换行 ok， 如果说 lo rap 的话呢，就是不换行 ok， 不换行意味着会压缩， 除了 lo rap 之外呢，他第二个呢就是 rap。 rap 呢是换行的意思。 rap 就是根据什么呢？实际宽度 换行展示。那我们来看一下，刷新之后呢，他就会根据实际的一个宽度呢，换行进行展示。咱们把这个复原素的高度呢，再给他设高一点，比如说是四百像素，这样呢，大家看呢会更加明显一点。 同时呢，在换行的过程中呢，中间明显出现了一个什么，出现了一个多项的一个空白。 那这种多项的空白，如果说我们在操作的时候不不想这样去做怎么办呢？其实就跟本来爱他们死有关系了。 ok， 那跟额外哎，他们是有关系。就意味着如果说会有很多数据的时候，注意 会有很多数据的时候呢。我们用的话就是紫元素的排列方式呢，用的什么来？康泰的，比如说新塔，这是什么呢？多横紫元素的一个哎，对齐方式， 他呢同样的也会有 flax。 什么呢？斯大塔也会有我们的嗯，哎，也会有 sunter 也会有什么呢？ flax 嗯的。当然除了这些了，还有其他的几个选项。稍等一下，我们先看一下这是他 一个什么剧中对齐。那除了剧中对齐之外呢，大家可以观察到有 flax in 的 flax stat 好 stat 呢，就是上对齐。这种操作方式呢，大家也是特别常见的。 那除了这种上对齐的方式，我们给他呢再加两个元素吧，让大家呢看的更加明显一点。十三 十四好。这种上对齐的方式，他会从上往下怎么样呢？逐个排列。那现在呢，当我在做一些网页项目的时候，我想让这三行 很均匀的分布到这个容器里面，并且上面和下面呢要对齐我们的这个边框应该怎么做呢？这时候呢，除了这三个钥匙之外呢，也就是我们 flax start 嗯斯特嗯的之外呢，他还有 space 什么的啊， route 和 space 比退。 ok， 大家呢可以来观察一下。比如说我们用 space around 的，它其实就是均匀的分布，就是将这三行均匀的分布到我们这个容器里面， 他的上面、中间以及最下面呢，分别留了等间距的一个宽度。就是每一行的两侧呢，都预留了等间距的宽度 和他对应的呢。还有一个什么呢， space between space 比退呢，他同样也会预留等阶距宽度，但是在我们的顶部和底部呢，是不留空隙的。这样呢就更加 符合我们什么呢？在网页里面进行元素定位的操作方式了。所以呢，在处理的过程中呢，对于复元素来说，他在构建的过程中 都有哪些钥匙可以供我们去处理了？我们来在这里简单说一下弹性布局中，负元素， 其实也就是我们的容器的钥匙设置。第一个呢是 display flex。 ok， 这是声明什么呢？这是我们的声明弹性布局。然后是 lex reaction， 这是我们的弹性布局的一个什么呢？排列方向。当然大家在其他的资料里面也会看到一些什么呢？说 主轴跟什么呢？交叉轴的概念。 ok， 刚开始的时候建议大家呢不要去想这个什么主轴，交叉轴的意思， 一开始就按照你自己的理解，直接把它理解成什么排列方向就可以了。然后呢是 flax rap， 也就是自元素是否换行， ok 啊，那一什么呢？ awm 四，这是紫元素的一个排列方式，对齐方式，这个一定要注意，是一行紫元素。 然后 line 什么呢？康泰塔，这是紫元素的对齐方式，这是什么呢？多毫次元素。 那在构建的过程中，弹性布局复原素钥匙的设置了是对什么呢？ 对所有的资源素进行统一的，统一的布局管理。这里呢是没有不具备什么的，不具备某个资源素个性化设置的，而是所有的资源素呢，全部都要经过我们的一个处理 对齐的处理方式。所以在这一点上来说的话，复原素的操作方式呢，就通过这样的几个钥匙对他呢做一个设置就可以了。 ok。 最后呢，我们可以通过各种各样的形式，通过这些钥匙的对齐方式，让每个元素在这个复元素的容器里面呢，去进行符合我们需求的一个排列。 ok， 下一节了，我们再说一下，如果说某一个字元素需要特定的排列，又应该怎么设置？