尚硅谷前端基础 (16)

刚刚我们说了这个Meta标签，然后接下来我们的课程继续向下进行，那接下来其实我们学习SL主要就是要学习一些标签，那我们往下再说一些相对来说比较简单的标签吧，我们直接来创建一个这个诶零四，哎，我们来说一些什么呢？呃，说一些我们叫做一个鱼化的一个标签点一个HPM啊，什么叫鱼化的标签？那我们之前去讲这个nmr时候，我们也说了，我们说了我们一个网页分成三个部分，结构、表现还有行为，而HTML它是专门用来负责我们页面的一个结构的，什么是结构？哎，我在页面里哪里是标题啊，哪里是段落，诶，哪是头，哪是尾，哪是链接，哪是图片，这些都属于结构。哎，所以HTM2只是用来控制结构的，而我们说所有外在表现出来的，什么颜色呀，什么自己的。

小啊，什么自己的一个位置啊，这些东西都属于表现啊，外边看见的东西都属于表现，而表现由谁来控制呢？哎，表现由我们的CSS来控制，所以一定要注意这个分工，HTM2专门负责结构，而我们的这个CSS专门负责表现，所以啊，我们这儿再强调一下，在我们这个网页中，诶，在网页中我们这个HTM2诶专门用来负责我们这个网页的一个结构，所以哎，在我们这个使用我们这个HTML标签时，我们应该关注什么呢？哎，我们应该关注的是我们这个标签的一个语义，而什么呢？而不是它的一个什么呀？哎，它的这个样式什么意思？在这我写一个H1 h1我们叫做一个一级标题啊，一级标题然后我们换行，我这再写一个H2 h2呢，这我们叫做一个二。

二级标题啊，二级标题这一保存，我们直接给它运行一下，诶直接在这儿运行。稍微等一下运行出来以后，把它放到这个位置，我们来看，H1叫做一个一级标题，H2叫做一个二级标题，从这个直观的查看上来看，我们会发现H1比H2要要大一些，对吧，要大一些，但是注意了，我们刚才已经强调了，H1跟H2谁大谁小，这个东西是不是一个我们所关注的内容啊，一定注意它不是我们所关注的内容，换句话说，H1跟H2谁大谁小，这个东西对于我们来说并不重要，我们可以通过CSS。让H1变得比H2还小，也可以反过来说，我让H2可以让它变得比H1还要大，这些我们都是可以改变的，所以这注意，我们学习H天猫标签主要关注的并不是它长什么样子，而是这个标签代表的是什么意思啊，关注语义，而不是关注我们的样式啊，所以关注的是语义啊，关注的语义，那我们H1跟H2什么意思呢？诶，那这里边我们就说我们的第一种，我们叫做一个。

标题标签，哎，标题标签，标题标签，我们一共有六级标题，就是我们H11直到H6，也就说我们一共什么呢？一共有六级标题啊六级标题，所以你在这写的话，我们直接给他来，我再写一个，我们还有什么呢？我们还有一个H2H3，这个是我们一三级标题，那注意我们换行直接CTRL加回车换行诶当然这里边注意有同学说老师换行不就是回车吗？哎，但是回车跟CTRL加回车有个区别，我如果因摁回车的话，这个光标后边内容它会跟着一起去换航，你看这个H3结束前是不是下来了，哎，就下来了啊，所以这个时候如果摁CTRL加回车，它只是让光标下移，光标后边的内容不会跟着走啊，不会跟着走来，我们这来一个HH4，我们叫做一个四级标题啊，四级标题，然后呢，我们再来一个H5 H5我们叫做一个五级标题啊，五级标题，然后我们再来一个H6。

6H6是我们的一个六级标题啊，这么几级的一个标题，从我们直观上去看的效果，从一级标题到六级标题，是不是一级比一级小啊，哎，但是这里边注意我们关注的还是不是大小，我们关注的是它一个语义，一共有六级标题，从H11直到我们H6，哎，我们的的这个什么呢？哎，它的这个重要性，哎重要性干嘛呢？递减啊，重要性递减什么意思，H1最重要，哎，我们这个H6最不重要啊，H6最不重要，这是我们说两个东西，H1最重要，H6最不重要，所以这里边我们来说H1的，H1在我们这个网页中的这个重要性啊，重要性仅次于我们这个开头标签啊，这个是我们说的，从这个哪儿呢？从这个SEO的角度去考虑的。

我们说一个搜索引擎，它检索到你的网页，它第一个要看的就是你这个网页的一个title，它会通过这个title来判断你网页的一个主要内容，你这网站的主要内容，那下一个看的就是谁呢？就是H1，因为H1就是一个一级标题嘛，如果拿一个作文来讲的话，H1就是我们作文那个标题，所以留搜索引擎也会第二个去看H1，通过H一来判断网页的一个主要内容啊，它是仅次于这个title标签的啊，仅次于title标签，所以这个时候注意我们说了，哎，一般情况下，哎，我们这个一个页面中只会有一个H1啊，一般情况下一个页面中只会有一个H1，为什么只有一个呢？有同学说，老师既然H1这么重要，我多写几个，那搜索引擎是不是把我这网站就给我列的特别重要呢？诶不会注意重要，重要的前提是什么？重要的前提是它它少啊它少，如果你页面里全是一，那你的页面里边是不是就意味着都不重要。

诶，所以都重要就意味着都不重要，所以往往情况下，我们页面里的大标题，你作文大标题只会有一个，你作文不可能满篇都是大标题，对吧？大标题只会有一个，所以我的网页中H1往往也是只有一个的，就是设置到我这个网页中最重要的那个内容，设置成H1，其他都不会再写，但是你说老师我就写俩，写俩也没人管你，但是呢，不建议你写俩啊，不建议你写多，写多个啊，然后呢，诶一般情况下，哎情况下我们这个标题标签只会什么呢？诶只会使用到我们这个H1，一直到我们这个H3，我们用的话一般就是H1H2H23这么一个情况，H4到H6它很少用，为什么很少用呢？因为我们说了六级标签重要性，H1最重要，H2其4H3再次，那到了H4H5H6这个时候，它其实它的重要性基本上可以。

忽略不计了，因为你你到那儿以后，因为重要，哎不重要，然后就重要，其次再次都已经再再次了，这个时候它就跟普通标签没有什么区别了，所以我们在用的时候，这些H1H3H2这些标签你在用的时候还可以考虑一下有语义，而H4你H到H6你用的时候就可以当成是一个普通这用了，也就是说搜索引擎基本上不会去很关注这些东西啊，不会很关注这些东西，好这个是我们说的一个标题，标签从H11直到H6，那这里边注意了，你还要注意一点啊，还要再强调一下，看标签关注的是语义，它代表的是什么意思，而不要关注它长什么样子啊，长什么样，那这里边我们来再说一下，其实你会发现我们这写完了以后，这个H一级标题，你看它在第一行，二级标题在第二行，三级标题在第三行，也就是说我的每一个标题标签，它是不是都独占一行啊，哎，都。

独占一行，所以像这种注意我们简单提一嘴这个东西啊，我们叫做一个块元素，哎，块元素我们叫什么呢？哎，会在我们这个页面中独占一行的元素，我们称为叫做一个块元素啊，块元素我们叫做一个block。Block block音体，嗯，Block element啊，所以像H1H2H5，诶H3就是H1，一直到H6，你看他们是不是都是独占一行啊，他没有说让一级标题跟二级标题在一起，所以这种元素都称为叫做块元素啊，记住了，独占一行的元素称为块元素，但是细节我们往后再说，现在你先理解一下啊，理解一下再往下说，我们还说了一个标签，我们叫做P标签，P标签表示什么呢？哎，表示我们这个页面中的这个一个段落啊，一个段落这就像什么呢？就像我们写的写作文或者上学的时候学那个语文，语文我们是要标自然段呀，哎，一个自然段，两个自然段，三个自然段，那我们的一个自然段就可以是一个P标签啊，所以我写一个P标签啊，我是一个什么呢？诶在P标签中的这个内容，诶就。

表示一个这个段落啊，一个段落保存，那就这么显示的字，没有任何特殊显示，但是你这复，你这如果是再写一个P标签，两个P标签，其实你会看到什么呢？诶你看段落P标签它是不是也独占一行啊，诶并且段落跟段落之间也会有一个间距，这跟我们语文当中学的那个事儿是一样的啊，是一样，但是还是这种这种情况，我们并不关注它里边有没有间距，因为这个东西我们后边都可以给它去掉啊，都可以给它去掉，所以你要关注语义P就表示页面中的一个段落，所以P，哎，PH它也是一个块元素啊，你看P元素是不是也独占一横啊，哎，并没有在一起啊，并不在游起，然后这我也写一个一啊，这么直接写吧，我们这个标题标签，它也是一个什么呢？它是一个都是块元素啊，都是块元素啊，这是什么说两种标。

签一个叫做我们这个H1到H6，还有一个是我们P标签，然后往上我们再补充一个，现在我们这一共有六级标题，对吧？六级标题那我们想一下，我们写文章的时候，比如说写一个文章，我们这个文章，诶通常情况有几个标题，诶通常情况下可能只有一个标题是吧，通常之下可能只有一个标题，比如说写一个是吧，写一个文章，诶我的这个，呃，我的好老师是吧，我的好老师写这么一个，那这个可能就是我的一个文章的标题，一般我们都放到什么呀？放到最上边表示是文章的一个标题，诶介绍一下文章一个内容，表示我们文章的一个主题，但是有一些特殊情况下，我们一个文章可能会有两个标题，比如说我们之前说的那个，我写那个那个那个那个那个。

这个诗是吧，哎，这个诗我们叫做一个茴香。哎，突然想不起名字来了，哎呀，这块全都全都乱码了，对吧，我来啊，我先在外边来打开一下，哎，我们直接用我的这个编辑器打开一下，叫做一个茴香偶书两首对吧？茴香偶书两手，但是呢，它还有一个嘘标题，叫做一个其一，叫做一个其一，那这是什么情况啊，这是情不情况来回到我们这块，我们这儿直接回到我们这个语句化标签乱码，这个待会我们来处理一下，但是我们先说这个问题是吧，我们可能叫做一个茴香偶书，突然刚才想不起来名儿了，哎，这个题目叫做一个良二手，这是一个大标题，但是实际上它里边还有两个嘘题，一个叫什么呢？诶，一个叫做其一，还有当然还有一个叫其二，对吧，还有个其二，我们先说这个其一，这个事，那现在等于说我那首什么少小离家老大回，乡音屋改碧毛催，那我这儿就应该是这么写的啊，我把这诗写过来，哎，少小离，哎，我就不写了啊，我就不写了，大概这么一个意思，你要知道。

就是我这首诗有两个标题，一个叫做H1，一个叫做H22，那这个时候我们就会专门有一个标签可以放，他们叫做一个什么呢？叫做一个H的一个group h的一个group h叫什么呢？就叫hier group叫什么呢？叫分组，所以这个标签的作用，它的作用很简单，就是给我们这个标题分组。来，我直接把这个标题给放进来啊，放进来这叫做一个h group group就是分组群组的意思，对吧？H group这个标签，诶用来什么呢？诶用来为我们这个标题分组啊，我们可以什么呢？可以将我们这个一组相关的一个标题，哎放到什么呢？诶同时放入到我们这个h group中啊，一定注意我放进去，为什么我可以放进去，因为这两个标题它们之间是有联系的，你别是这是一个文章的标题，那是另一个文章的标题，没有任何关系，你不要放到一起，有关系的标题可以统一给它放到这个里边，标题组啊，标题组这个东西我们可以直接看一下文档，文档里边应该也会有说明，我们直接看一下，直接搜一下h group在这儿直接一点开，诶，你看他举的这个例子啊，他举这例子，你看他也是这么一个h group里边放了一个H1H2，这东西咱也不认识是吧，但是很明显这两个肯。

这是一个，一个是大标题，一个是这个小标题，哎，这么一个意思啊，这么意思，所以啊，这个HD group叫做一个标题标题组啊标题组好，这是我们说的几组标签，一个是我们H1到H6标题标签，还有一个是我们这个HD group叫做一个标题组，还有一个是我们这个P标签啊，P标签那这些统统都是我们的标题标签啊，就不是标题标签统一都是块元素啊，都是块元素都会独占一行，然后我们接着再说几个啊，其实这种标签语化标签有很多很多啊，我们再说几个比较典型的做一下区分啊，我们还有什么呢？呃，有的时候的话，我们在我们的这个哎文章里我写一个东西是吧，我比如说我写一个啊，我写一个哎，写一个什么呢？写一个今天，哎，天气真不错啊，今天天气真不错，我写这么一个东西啊，写这么一个东西，这是我写这么一句话，那现在我想干嘛呢。

真不错啊，我现在就表示啊，我这句话里边，我在读这个针的时候，你应该加重一点，应该注意今天天气啊，真不错，哎，可能是一个反的，你说今天天气可能不好，我要加重一下，等于我这个事儿反说这句话啊，反说我说今天天气啊，真不错，哎可能外边在下雨呢，对吧，我怎么能在我的HTML里边能体现出这么一个语音语调的一个加重这么一个意思呢？哎，那在这我们有一个标签叫做一个em。

Em标签啊，一定注意关注它的一个语义，诶，Em标签它用于表示什么呢？哎，用于表示我们这个语音语调的一个这个加重啊，语音语调的一个加重，所以比如说我现在想让这个针不错，这个针让它加重，怎么办呢？我直接放一个em标签啊，直接放一个em em标签，然后可以把这个针放到em的。

里面去，首先我们来看效果，那这个时候这个针显示的效果是不是就是一个斜体啊，你可能别的跟别的不一样了，他斜了还是那句话，爱谐不谐不重要，重要的是什么，这em什么意思诶，Em就表示语音语调的一个加重啊，就是表示这个东西你读的时候需要重读啊，需要突出，诶表示其实有点类似于一个重点的这么一个东西啊，就是语音上的一个重点啊，读音上一个重点，E就是什么amize嘛，就是发音的意思啊，读音的意思，这是我们说一个em标签啊，Em标签那这里边我们还要再注意一下，你看我给这个针加了一个标签以后，这个em这个针它有没有换行，没有换行吧，这个针是不是还跟这堆字在一行啊，但是你说我这如果把em换成什么呢？我换成了P了，哎换成P咱们这没法演示啊，这块没法演示，这个P我们在外边演示啊，我把这个P标签我给它去掉，我给它去掉，现在我这是一个em标签。

洗完了以后，这针并没有换行，在这儿我干嘛呢？我把em呀，换成一个P标签啊，我都换成一个P标签，这时候你来看这针就干嘛了，是不是就换行了，哎，所以你看我的em跟P它是有区别的，你如果写的是em，它的这个位置不会换行，但是如果写的P，它是不是就会产生换行了，哎，所以像这种em这种标签，它不会独占页面的一行，那这种标签我们叫哎它它不会独占一行，也说它可以跟别的东西在同一行，对吧？那这种标签我们叫做行内元素啊，行内元素。哎，我们说了行内元素，哎在什么呢？在我们的液面中不会不占一行的元素，称为什么呢？诶，称为行内元素，我们叫一个因诶，LA element啊，或者我们可以叫内联元素啊，它不会独占一行，所以这个时候我们元素我们标签了两大分类，我们就看到了，一个叫做em啊，记不，一个叫做内联元素，像em这种它不会独占一行的，一种像P这种块元素，它会独占一行的啊两种元素啊，两种元素区别，到时候我们还会要再往下讲，现在你先知道独占一行的叫块，不独占一行的叫行内元素，叫内敛元素啊这么一个东西，好，这个em我们说完了，我们来再说一个，我们还是写什么呢？哎，我们说了，哎你今天，你今天必须要完成我们这个作业啊，完成作业，我写这么一个，那这个时候，假如说我这句话里有个。

重点叫做完成作业是重点，诶你必须要完成作业，我想在我的语义里边表示完成作业的重要性，那怎么办呢？诶在这里边我们有一个标签叫做s strong，叫做一个strong strong，那这个时候我就可以把这个完成作业放到这个strong里啊放到strong里，诶strong什么意思呀？哎，Strong表示的是一个强strong，嗯，完成作业，哎，然后在这儿来看完成作业它是不是有一个加粗的效果，哎加粗效果，但是还是不关心它的显示效果，我们要关心的是它的一个语意，语意strong表什么意思，Strong表示。

表示我们这个强调，哎，重要的内容啊，重要的内容，所以这个时候我们的em跟死状稍微的有一点点像，但是em主要表的是表示的是语气的加重，它语义上内容上并不是很重要，这是语气，我读的时候需要重读一下，而strong表示真正的强调，哎，就是表示我们的一个重要的一个内容啊，重要的一个内容就这么一个东西啊，但是这两个标签呢，它都是一个行列元素啊，它都属于一个语义化标签，还是长什么样子不重要，重要的是它的一个语义啊，然后呢，呃，这些是一些这个语义化标签，然后语域化标签，还有我们再挑几个来说一下啊，我们再挑几个来说一下，往回找，往回找有什么呢？呃，在这块啊，都在，大概都在这个text content的这个文本，这，哎，这有一个什么呢？这有一个东西叫block cut，哎，Block cut block cut和它对应的呢，应该是。

是在下边这个位置，还有一个东西叫做一个叫做一个Q，这是干嘛的。哎，这是干嘛的？哎，Block cute啊，我们来看一下。那有的时候我们写一个东西啊，可能我们经常需要。引用一下别人说过的话，哎，比如说我能写一个写什么呢？诶写一个这个，哎，鲁迅说过，哎鲁迅说过，鲁迅说是吧，鲁迅说一句话，那这个时候我是不是要引用我们这个鲁迅的一个话了，所以在这个我们的HTML里边有一个标签叫做一个block，一个cute cute表示什么意思，表示的是引用啊，Block cute表示一个块引用叫做成语用，我们先看看什么效果啊，鲁迅说过，鲁迅说过一个什么话呢？哎，鲁迅说，诶这句话，诶这句话我是从来没有说过的啊，我是从来没有说过的，我写这么一个，那现在你看这就是一个block q的这么一个效果，你看它前面是不是有一个这个缩进的效果，哎，缩进的效果，这就是一个引用的一个效果，表示什么呢？这个内容啊，不是我自己写的，我是引用别人说过的话啊，这叫一个block block表。

是一个引用，哎，它表示一个引用，它用来表示一个这个长引用，什么叫长运用的，你看它的特点，这个block q，它是不是一个块块元素，你看它是不是也是自己独占一横，哎，独占一横，所以这个时候它也属于一个块元素，它会独占页面一行，一般这个玩意儿用来干嘛呢？用来引用一些，可能我引的内容比较多，我就用一个block cute啊，Blockcu这东西比较常见的话，其实在这个知乎上可能看的比较多，知乎上可能有的人去引了别人的一句话，引了别人一个网页，他就一般习惯用一个block啊，一个长语。

这是一个长语句，还有一个跟它类似，叫做一个QQ什么玩意儿的，我们来写一个啊，孔子曰，子曰，嗯，子曰，我写一个啊，我写一个，直接写一句话吧，写一个，这个Q叫什么呢？叫学而时习之啊，学而时习之，乐呵乐呵。随便写一个是吧，随便写一个，那这个时候这个也是一个引用，它的一个QQ表示一个什么呢？Q表示一个短语用表示一个短引用，它主要就是引用一些这个名人名言呀，表示一个短引用，所以你看Q的特点，Q有没有换行，有没有换行，哎，没有换行啊，没有换行，所以它是一个行内元素啊，它是一个行内元素，你看啊，有人说老师是不是因为你这你block q都换行了，而你Q没换行，你换不换行它都一样，看到了吗？因为我们说了多个空格换行会被合并成一个嘛，所以你换行也只是多一个空格而已，所以这换不换行都一样，它独不独占一行跟它换不换行没有关系啊，那block q的就是块元素，就是不会独占银行，而Q就是行内元素，它诶block q的就会独占银行，它是块元素嘛，Block，而Q就是行列元素，它不会独占一行啊，那这两个东西用的时候啊，其实用的也没有那么多啊，用的没那么多，Block q的是长用。

内容比较长的时候可以用它，Q是一个短语，用引用，内容比较短的时候就可以用它啊，所以用的时候区分一下，主要还是从语义上，而且Q你会发现它前面自动给你加什么了，哎，自动给你加引号，但是这东西还是我们不关注，这东西我们可以改啊，我们可以改好，这个是我们说这几个标签啊，我们回顾一下刚才说了什么，说了这个H1我们的标题标签，然后这个P标签，我们的段落，还有我们这个引用，还有我们这个strong，还有em这几个标签是吧，回去待会儿自己来试着写一下，重点的话还是H1到H6我们这个标题标签，以及我们这个P标签比较重要，然后你下去看的时候，你可以再看看别的标签什么用，呃，比如说我可以给你看看啊，我们来看看你需要，你可以看什么呢？诶我们把这个标签先说了，这一个标签叫BR，叫BR，我们先说一下吧，啊这个东西呢，我们直接写一个，我还是写一个这个今天天气真不错。

今天天气真不错，然后呢，在这儿我们来看一下效果，这个时候我这句话写完了以后在哪呢。在这儿呢，在这呢，对吧，因为它是一个，你看这句话是不是等于跟上边这句话变成一行显示了，诶这是为什么？哎，因为它是个行内元素，它是个文字，是本身就不会换行啊，虽然我这两个之间有一个空行，但是在我们浏览器显示的时候，这个换行是不会显示出来的，所以在这如果你想换行的话，我们有一个标签叫做BRBR标签写完了以后，你看是不是就换行了，哎，你再写一个BR，它可以换换两行啊，再写一个BR可以直接换两行，所以BR表示什么呢？表示一个换行，哎，BR标签表示我们这个页面中的这个换行啊，写一个BR就换一行，写两个就换两行啊，这是这几个语义化标签，待会自己尝试着写一下，然后我看一下，待会儿你们可以试了，可以试什么呢？我看看啊。

诶，你们自己啊，可以试试这个，呃，我们先看这有一个B标签对吧，B标签还有什么呢？还有爱标签啊，还有爱标签这个都可以去试一下，包括我们还有什么呢？还有这个small，哎，Small啊还有什么呢？还有我们这儿有一个看看有没有。

什么什么什么，然后这儿还有一个叫做。诶span不用管它，S还有一个S啊，这两个标签，你们都这几个标签，你们都可以试一下，甚至如果你有有时间有耐心的话，你可以把上边整个标签给它过一下，这里边很多标签我就不一个个说了，因为说的话其实也都这么一个套路，等我们以后用到，我们会再详细的去解读一下啊，再去解释一下，然后待是我们还有一些我们还要讲是吧，可以自己来把这些标签给它试一下啊，试一下，然后回到我们刚才看到这个问题，刚才我们看到这儿的话，当我打开这个页面的时候，你会发现我的页面原本的时候在我们的这个，在我们的别的编辑器里，比如说在这儿编辑器里显示是好好的，但是跑到了我们的这个，这个这个叫做一个Vs code里边这东西就出现了一个乱码，其实这个问题一般情况下我们也不需要解决，乱就乱了，因为这块其实也也无所谓对吧，也无所谓，因为这个东西是我们之前在外边写的，但是我们说一下为什么会产生乱码，乱码产生的原因就是我们这个字符级的问题，你看它现在。

在这打开的时候，它这是不是什么用的是UTF杠八打开的，而我们之前这个文件，我们是不是通过记事本编辑的，通过记事本编辑的话，它的编码是多少，你看是GB2312，记事本编辑过的文件默认编码是GB2312，也就是说在我们的Vs code里边，它是用UTF杠八去解析一个用GB2312去编码的文件，那你猜猜它能不乱码吗？诶必须乱，不乱才奇怪呢，所以这个时候如果你要想避免乱码问题，你它它下边是不是有一个UTL杠八呀，你点一下，你让他换一个格式，诶叫什么呀，通过编码重新打开，你点一下选中那个GB2312，选中那个G标三二，我们找一下。GB2312在这儿，是不是这有一个GBK啊，哎，我们这个简体中文，简体中文GBK是对GB231的扩展，所以你用GBK打开也OK，那这样是不是就不乱码了，其他文件也都一样，你只要用的是正确编码去打开这个文件，就不会有这个乱码问题了啊，就不会有乱码数据了。好，这个是我们说的一个这个编码的问题，但是刚才这是一个题外话，主要还是说我们这些语义化标签还是再强调一遍，关于标签关注的是它的语义，不关注它长什么样，还有两大类，一个叫块元素，还有一个叫做行内元素，矿元素独占一行，行内元素不，不占一行，好，我们先来评一下。