尚硅谷前端基础 (17)

好，那么接下来我们继续还是来学习一下我们的语句化标签零五。我们接着来说还是。同样一个话题，语义化标签，那说到这儿呢，我们要先说一个东西，那刚才我们提到一个概念，叫做一个块元素，还有行内元素。Course，还有叫做行内块呢，我们叫bcklo啊，Element就是元素的意思，行内呢，我们叫做一个in LA ET element啊，行内元素我们分这么两大种，矿元素，还有行内元素，那它们都是干嘛的？那都是干嘛的？块顾名思义块，什么叫块诶块我们把这一个网页我可以分成一块一块的是吧？诶上边一块，下边一块，左边一块，右边一块，这是不是都可以说是一块一块的，诶所以块它属于是一个布局啊，它属于对网页进行一个布局啊在我们这个网页中，我们一般什么呢？诶通过块元素诶来对我们这个页面进行布局，所以你像你看网页里面的，比如说我们还是拿一个网站举例子吧，比如说京东吧。

京东它这个网站，其实这网站你可以看啊，虽然很乱，但是大体上其实你也可以发现它可以什么呢？它实际上可以可以分成这么一块一块，诶比如说诶这可能是一块，然后上边这是一块，左边这是一块，中边又是一块，右边又是一块，也说你会发现我这个网页可以分成一块一块的，这一块一块的就是布局，那这一块一块的实际上每一块我就可以用一个块元素去表示，所以块元素主要是对网页中进行一些宏观的一些布局的啊外边大块上用块元素进行布局是吧，就像我们那个有点像什么呢？这块元素有点像我们这个房子，哎，你说我这加加房子，加上房子有三居室，两居室是吧，这几居室就那个块进行布局对吧？一块就是一居室，两块就两居室，对吧，这么一个意思啊，块主要是对网页进行布局的，而这个行内元素呢，就跟布局没什么关系了啊，行内元素就跟布局没什么关系的行内元素。

其实你看见了，刚才我们像那些行内元素，我们用到哪些行内元素了，像啊strong，像em，哎，像Q是不是都是行内元素，哎，你看它主要是什么？主要就是选中一个文字，给那文字设置一些特殊的效果啊，这个给它关上了，所以行内元素主要，哎主要用来什么呢？哎，用来包裹我们这个文字，哎所以行内元素一般就不不是布局的了，哎文字有特殊意义，我拿个行内元素给它套起来，哎文字需要设置特殊效果，我拿个行内元素给它包起来，那这些才会用到行内元素啊，两种元素，块元素，还有一个叫做行内元素，行内块元素呢，这里边我们来说一下块元素，我们一般，哎我们一般呃，咱们在下边写吧。

哎，一般情况下我们会在什么呢？会在块元素中放行内元素啊，而什么呢？而不会在我们这个行内元素中放块元素啊，放块元素什么意思，我这写个H1 h1里边我放个em，但是很奇，有点奇怪是吧，但是这么写没有问题啊，一般不会有什么问题，这么写不会出不会出什么大问题，对吧？但是如果反过来说，我在em里放一个H1，这种情况就它就很奇怪，所以一般情况下，我们都是往这个块里边，我可以放行内元素，哎，但是绝对不会往行内里面放这个。内联这个块元素啊，一定要注意这个东西啊，一般情况下我们不会，哎，我们会一般情况下我们会在块元素中放恒电元素，而不会在恒定元素中放矿元素啊，这个一定要注意，然后再来说一下，再来说一点啊，再来说一点，当然还有一些其他点，我们往后再说啊，还有一点叫什么呢？我们叫做一个P元素中，哎，不能放任何的矿元素啊，不能放任何的矿元素，什么意思？我这里边P，我这放一个什么呢？我放个he行不行，哈哈，我在P元元素别范围之一行不行。

诶，有同学说没问题啊，段落里边放个标题没有问题，我们直接运行一下，你看看有没有问题，诶没问题啊，不正常出来了吗？诶是不是没问题，诶到底是不是没问题，那这里边我们来说一下啊，一般情况下我会在块元素中放航天元素，而不会在航天元素中放块元素，这是一个，那我们说了我的P元素是不是就是块元素，哎，P元素就是块素，那块元素中我们说了也可以什么呢？哎，当然块元素中基本上什么呀，基本上什么都能放，你既能放行内也能放块元素啊，基本上什么都能放，但是唯一一个特殊的就是P元素中不能放任何块元素，H1是不是块，是块放到P元素里就不行，同学说怎么不行，这不行了吗？诶，那这里面我们就要说一个问题，说一个问题，什么问题，之前我们说了很多东西，像这种语法相关的东西，对吧，我们说了。

哎，页面里边的所有标签必须写到HTM里边，HTML只有两个组标签，一个叫hide，一个叫body，对吧？我相信很多同学那个时候就产生疑问了，我就不信邪，你不说写到HH里边吗？我就不写里边，我就写外边，我写一个，哎，我就要写在写在我们这个HTL标签的一个外部，我就写外边行不行？诶，他不是也出来了吗？你不说不行吗？不是也出来了吗？

哎呀，瞬间感觉到打脸了，对吧？瞬间感觉到打脸了，那这里面我们要补充一个问题，叫什么呢？我们的浏览器在解析网页时一定注意，一定注意我们网页是我们写的，我们写完了是谁解析，是浏览器解析，之前我就跟你说过，浏览器想让网页长什么样，网页是不是最终就长什么样，哎所以注意浏览器在解析网页时，会自动对我们这个网页中不符合规范的内容进行什么呢？进行修正，比如哪些东西它会修正，比如比如什么，比如我们这个标签写在了什么呢？写在了我们这个HTML的，写在了HTM2里，哎，就这么写吧，写在了我们根元素的一个外部，像这种情况，哎，比如我们这个P元素中嵌套了。

嵌套了块元素啊，P元素中嵌套了矿元素，再比如我们这个根元素中出现了什么呢？出现了除我们叫做氦的和我们这个body以外的子元素等等等等，还会有很多的特殊情况，只要出现这些情况，那么对不起，浏览器会自动去修正，去纠正你的代码什么意思，你这标签是不是写到H天猫外边了，哎，但是这个时候浏览器发现这东西符不符合语法规范，不符合语法规范，所以我们的浏览器它会自动把这个东西放到body里面，它会自动给你调整啊，自动给你调整有没有调整，哎，我们看看呗，直接右键查看网页代码，诶你看一下H1 h1在哪呢？H1是不。

还在H天边的外边呢，没有纠正啊，哎，注意我们说的纠正是怎么纠正，它不会在源码里给你纠正，源码是我们写的，我们写什么样就什么样，他所谓的纠正什么是他在把我们的源码加载到内存以后，他会纠正，他纠正是什么？不是源码，而是我们代码在内存里的结目，诶那这时候就产生问题了，内存里的结构我们怎么看呀？哎，很简单，直接点击你的网页有一个检查，看到了吗？直接一点，这会出现一个开发者工具，我们可以直接通过开发者工具来查看，这个可以通过检查来打开它，或者直接点击你键盘上的F12也可以调出来，都是一个东西啊，都是一个东西，然后把这东西啊，我们往下调一下，我们来看什么呢？我们看这这里边会出现一个东西叫做element element什么意思？元素这个elements的作用。

就是显示我们网页在内存里的结构，所以你直接点elements，你就可以看到你的代码在内存里到底是长什么样的，我们来看一下我们H1是不是写到HL外边了，哎，我们来看看在这里面有没有HTL外边有东西吗？没有任何东西，你再看body body里边。是不是H1放到这儿来了啊，放到这儿来了，所以怎么回事，就是浏览器自动给你纠正了，这个东西实际上会自动给你放到包里，懂这意思吧？哎，说白了，浏览器它惯着你，你出现什么问题，浏览器不会想，哎呀，它出错了，错了不让它显示吧，它不会这么做，它会干嘛呢？自动给你进行修正，同理这儿也是一样，这个时候我们在P元素里放了一个H1，这符不符合规范，不符合规范，所以这个时候我们来看这H1到底在不在P元素里，我们直接看一下。

H1在不在P元素，你来看在不在，哎，不在H1是不是在P元素的外边啊，你看前边一个P元素，后边一个P元素，H1在外边，这是怎么回事啊？哎，这怎么回事？其实很简单，浏览器在解析这网页的时候，先读啊，诶先读这时候出现一个P标签的开始啊，诶读开始这一读，嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟一读到这，哎呀，这怎么出现了一个H1啊，浏览器会响哦，H1呀。不能放到P元素里，哎，这哥们儿肯定不想把H1放到P元素里，所以这儿呢，一定是他落写了一个结束标签，一个P的结束标签，所以它会在H1的这个位置，是不是给你补了一个结束标签，所以这边哪来的是我们的浏览器补上的，然后继续往下读h he he，这都没问题，一看一读到这，诶这读到一个什么，一个P的结束标签，浏览就会讲，哎呀，哥们肯定又不小心写错了，诶他落写了一个开始标签，所以浏览器在这儿又给你补了一个开始标签，那也就是说你这个代码最终在浏览器里是不是长了这个样子，哎，长这个样子，所以注意我们的H1不能，哎快元素不能放到P元素啊，P元素中不能放，不能嵌套任何的块元素，任何抗染素都不能出现到P里，出现到P里它就会自动给你进行修正，诶那我同学说了，老师既然它会自动进行修正，那是不是意味着我就可以。

随便写了呢，哎，当然不是这样，你随便写，你想一下浏览器去修正，首先修正过程当中是不是也会稍稍的去影响一些我们浏览器的一个性能啊，哎，它不修正跟修正相比肯定是不修正要来的快一些，对吧，稍稍的会影响一些性能，这是第一点，第二点。他修正呢，是不是说每一次修正就符合你的预期呢？像这种修正其实就不符合我们的预期，我们希不希望这样，不希望这样，所以我们尽量不要去麻烦浏览器啊，不要让浏览器去替我们改代码，诶，尽量就是我们写什么呀，浏览器就给我们写什么呀，不让他去修正，因为让它修正就可能会出现问题，所以这些规则一定要记住啊，你要记住好，刚才我们简单说了一下，块元素和行内元素一个嵌套的一个规则，这块需要你去记一下。二一个我们又介绍了一个我们浏览器的开发者工具怎么运用的，直接右键点检查，或者你键盘上的F12调出来，我们先介绍第一个叫做elements elements用来查看网页的一个源码，换句话说，查看的是网页在我们内存中的结构啊，接下来自己把这规则记一下，然后尝试着用一下这个开发者工具查看一。

一下网页的源代码，好，我们来评一下。