尚硅谷前端基础 (15)

好，接下来我们来继续学习我们这个HTM的标签，在这里还是新建一个文件，我们零三啊，我们就基本上。嗯。一些特殊的标签我就单独说一下了，那接下来我要说的是一个这个Meta标签，Meta标签稍微特殊一点，特殊在哪呢？诶这个东西它其实我们之前写Meta，你也看到了，Meta的话，它其实是写到了我们的这个hide里面，所以Meta这个标签我们之前也提到过，它主要就是设置一些我们这个网页的一个原数据。啊，还是用我们这个浏览器打开，它主要用来设置我们这个网页的一个这些原数据，那这东西它有什么用啊，有什么用，那这个东西呢，其实作用相对来说也比较固定，但是我去讲它的时候还是，呃，我们说了标签HTML涉及的标签很多是吧，100多个标签，那不可能我把所有东西都给他记住，那包括迈它的话可能我也记不住，那这个时候假如说还是那句话，你在学这个东西的时候，这个知识你记不住，记不住怎么办？诶记不住你就要学会去查这个文档，查文档的时候我们来说一下怎么去查，当然你可以用我们那个WC school那个那个文档去查一下，中文的可能也比较清楚，但是那个中文的我演示起来就没有什么意义了，你可以自己去试着使用一下，那我们还是说一下我们这个更权威的一个英文文档啊，或者叫做一个MDN的一个文档，MN是什么呢？大家注意，我们在这儿下载这个文档，实际上就是一个网站上的文档，叫做MDN。

MDN叫做a developer的一个network，就是一个A基金会的一个开发者的一个联盟，就是其实基金会就是我们那个火狐浏览器，它的那个那个那个。一个基金会嘛，他的所有者等于是那这个时候他其实整的这个文档相对来说是比较一个权威的，内容也是比较全的，所以在这儿我们直接点开这个LT直接点开，你要看谁就直接找，或者你在这搜也行，那我这果找Meta，直接往后找Meta Meta它是按照字母顺序排的，前面加了一个T，表示它是一个tag，是一个标签，直接点过来，然后它这里边会有很详细的描述，首先上边这一句话是基本上是对他的一个总结，一个总的一个介绍，你看。

HTML的me element元素，哎，就是HL中的这个me元素，它表示什么呢？表示原数据，Me就是原，哎，这个data就是表示数据啊，就是原数据，诶表示哪些原数据呢？哎，不能，哎被其他的这个原原这个标签所表示些数据，所以就是说Meta它是表示原数据的，它所表示原数据是这些标签所不能表示的，就说诶你像base也是原数据，Link script的style，哎，Title，它们都属于一些特殊的原数据，而这些每一个标签都有它自身的功能，而这些标签不能表示的全都由这个Meta去表示，对吧？就这么一个意思啊，当然这些标签我们还没有学，先不管它啊，先不管它，那这里面我们就知道Meta表示原数据，原数据你可以理解成就是我们网页这个与生俱来的，然后这个文档的话，你可以看一下是吧，它会在基本上每一个标签，它会给你提供这么一个类似于表。

格这么一个东西啊，类似于表格东西，你看第一个是什么呀？哎，Content的一个categoror，内容的一个这个哎内容的一个分类，也就说告诉你我的这个这个这个这个Meta标签，它属于什么标签是吧？给你告诉你了什么什么什么什么东西啊，然后下边一个是这个呃，Pro一个content，就是什么意思呢？就是我的这个标签当中能使用哪些，呃，就是能放哪些内容啊，能放哪些内容，当然我们也说了，Meta是一个自结束为，所以人家写了一个钠，什么意思啊，什么也放不了啊，什么也放不了，因为什么？因为它是一个这个empty的一个element是一个空元素，也就是我们所的一个字结束的一个元素啊，然后这个什么呀，诶标签的一个省略，那标签写的时候可以省略哪些东西啊什么呀，哎呃，就是如果它是一个空的元素，这个什么呀，哎，开始标签，哎，因为啊，它是说因为它是一个空元素啊，它是一个空元素。

所以开始标签诶是必须的啊，必须有的啊，必须有的啊，Percent是吧，Percent必须有的，然后呢，这个N的标签是必须没有的是么意思，它必须有开始标签，但是不能有结束标签，不是不是不能有了，就是必须不能有，不像别的有一些可以有可以没有，但是它就是必须不能有，是这么一个描述，然后这表示是它是一个，它可以在哪些这个副元素里有哪些副元素可以去有卖它我们其实主要看的就是就是就是这些玩意儿，现在来讲我们主要看的就是这些玩意儿是吧？大概什么意思你都得知道，第一个是它的一个诶分类啊，它的一个分类，它表示什么东西，然后第二一个它里面可以放哪些东西，诶，然后第三一个表示一个省略的写法，这一般也不需要看，然后这个是表示它的副元素，比如说它可以放在哪些元素里面，这个东西其实也不用去关心它了啊，也至少Meta这块是不用看的啊，是不用看的，然后你再往下看，还有一栏比较重要的啊，所以这一栏基本上这。

这是一个介绍，整体的介绍，然后是它这个是一个分类信息的一个介绍，再往下attributete attribute什么意思呢？属性啊属性，这就表示说我的这个Meta标签里可以包含有哪些属性，你看这黑体字在Meta标签里可以设置叉诶，可以设content的，可以设置HTTP的一个诶E扣，然后还可以设置什么呢？还可以设置我们叫做一个name属性，这些都表示我们这个标签里边它可以设置哪些属性，然后属性的描述在这是不是都说了，诶其中叉赛们说了，它是可以设置我们这个字符集的网页的一个字符集，那接下来下边是不是还有一堆属性，哎，那这里边其实对于Meta来说，我们用的最多的是content的，还有这个name啊，Name，那这里边我们来接着来说一下，在这我们直接来说一下Meta标签，我们再强调一下啊，它主要用。

于设置我们这个网页中的一些这个原数据啊，而这个原数据我们说了，原数据不是给我们看的，原数据它不是给我们这个用户看的，它是给谁看的，诶是给我们这个浏览器，或者说是给搜索引擎那个爬虫程序去看的，我们用户看不见的，所以其实刚才我打开这个网页啊，有点多此一举，你写欢Meta这什么也看不见啊，什么也看不见，那这里面Meta我们常用的一个属性，有一个属性叫做name，还有一个属性叫做一个content，当然还有一个啊，还有一个，还有一个我们叫做一个，哎呀，这点错了，我给它关掉啊，还有一个我们叫做一个叉赛，叉赛的呢，这就是指定我们这个网页的一个字符级的，这是固定用法，就上面这种用法啊，然后name name是什么呢？我们说了Meta是用来设置原数据的，但是我们想一下，在我们的网页里，它有多种原数据啊。哎，你可。

能对于你来说可能一种也不知道对吧，但是像我们叉赛的它就属于一种原数据，那除了叉赛以外，还有其他很多种原数据，所以内幕指定什么呢？诶指定的是我们这个数据的一个名称，诶你要指定是哪个数据，而content指定什么呢？诶指定的是我们数据的一个内容，哎，就说name要指定，诶你要指定的是哪些数据啊，Content就是你这个数据的值，具体值是什么？所以这里面直接举个例子。直接举个例子啊，啊，我们在上面写吧，在这儿我直接写一个Meta Meta我们先写一个内幕属性，比如说我们常见的内幕属性有一个东西叫做key keywords啊，Keywords啊，Keyword什么意思叫做一个关键词或者关键字啊，关键词或者关键字，然后在这儿呢，我可以直接写一个，哎，这不用写逗号是吧？在这儿我直接写一个content content我写什么呢？诶，我写一个这个，呃，写一个诶HTML5，哎，然后呢，我写个逗号，写一个这个前端写个逗号，写个CSS3，那这是什么意思啊，我写这什么意思，那这个时候这个句话就表示啊name幕叫curs，这表示什么呢？我设置的这个原数据，这个原数据的名字叫做curor啊，叫做curor，它的值是什么呢？值你就不能在这看了，值，你要看count后边跟的，Count后边写的什么，就表示值是什么，所以这句话意思就表示我设置了一个原数据，这个原数据的。

名字叫curs，而它的值就是H5前端还有CS3这么一个值，就这么一个东西，所以这就是设置一个原数据，Name指的是名字，Con指的是一个值，所以关于这个name和con本身比较简单啊，本身比较简单，那我们着重要关注的就是它这个原数句到底什么意思，这keywords表示什么意思？哎，Keywords这个原表示我们这个网站的一个关键字啊关键字什么叫关键字，也就是说我们去百度啊，我们去百度在这儿百度，比如我搜一个，我搜一个购物啊，我搜一个购物，我搜完购物，为什么我这一上来就能出现京东啊，为什么我就会出现诶，你会发现这里边很奇怪是吧，只有京东啊，只有京东啊，为什么我就能出现京东，为什么我一搜购物就能出现京东？为什么？因为购物是京东这个网站的一个关。

电字啊，购物是京东网站的一个关键字，那问题来了，我们的搜索引擎怎么知道购物是京东的一个关键字，为什么？那就是因为什么在京东里边通过keywords就关键字指定了一个购物，那这个时候我们搜购物就可以搜索到这个京东，我们来看看有没有，因为他刚才给我显示的是这个移动端的网站，我们看个P端还不一定有，你们来看一下，查看源码，Keywords在这儿，你看他是不是写了一个网上购物啊，哎，我换一个，我搜一个网上购物，网上购物直接回车，诶，那这个时候你看就出来东西比较多了，你看什么亚马逊呀，什么京东为什么能出来，就是因为它指定的keywords，而keywords里边有购物，所以有网上购物，所以我们搜网上购物的时候，它就会出来就这么一个东西，那这个时候它就是用来让搜索引擎为你这网站进行分类的，啊搜哪些关键字，你这网站会出来，所以在这儿，那像我这这个网页，那可能如果被百度。

这个爬虫程序爬到了以后呢，可能我搜H5我这网站就出来了，哎，我搜前端我这网站可能也出来了，我搜CS3可能也出来了，也就是说我这指定了几个关键字，诶指定了三个关键字，关键字之间使用逗号隔开啊，我们可以同时什么呢？同时指定哎多个关键字，哎，关键字间哎使用我们这个逗号啊，注意还是我们英文的逗号隔开啊，隔开所以像这种东西啊，如果你用的时候你忘了怎么用了啊，最简单的方式打开京东查看源码，它是不是有一个keywords，你直接给它粘过来，然后你要是忘了怎么用的话，你直接给它。

模拟一下不就行了，模仿一下京东怎么写我怎么写呗，我把这名改一下是不是就行了啊，他还keyword还是大写，但是说了这东西不区分的，要写大概也都行，比如说我们看看亚马逊吧，亚马逊我们来看一下，直接右键检查，呃，我们来看一下它的这个headde里面headde head，点开head head里边有没有MY呀，MYMYMY是不是在这儿啊，哎，直接复制过来，你看它就是一个小写，所以这个东西它不区分大小写啊，大写小写哎都可以啊，大写小写都可以。

哎，我这个。我好像就复制了它是吧，我直接把标签都复制过来，Copy element直接粘过来，那这个就是亚马逊的关键字，你看哎，网购网上购物，在线购物，网购网站，网购商城啊，他这关键字也起的，也挺无聊的啊，卓越亚马逊这还是很老的这关键字对吧？很老关键字还是当时，呃，亚马逊收购卓越的时候这关键字，那所以啊，还是那句话，你在看那些网站的时候，诶，除了你去看文档也好，还是我们说去记也好，去背也好，还是看自己的笔记也好，这是一种方式，还有一种方式，有一些标签你忘了怎么用，可以直接去看一下我们真实的网站的一个案例，看他怎么写的，你可以完全去模仿，还行啊，这是我们第一种叫做一个curor啊cur，那如果你仔细看的话，其实你还会看到这么一个东西。

CTRLC我们直接粘过来。翻过来这写的是一个什么呢？我们来看一下，叫做description啊，Description，然后他的一个content，你看写的是什么？写的是一个京东寄利点com，然后专业的综合网上购物商城，销售家电什么什么什么乱七八糟，然后什么什为您提供愉悦的网上购物体验，是不是给你写了一系列的一个description啊，哎，Description那这个东西是干嘛的？哎，Description我们叫做一个描述，我们可以模仿写一下，哎，Meta，哎，我们直接写一个name name description，然后它的一个content，我们可以写一个啊，哎，这是一个非常不错的网站，不错的网站，所以description是什么意思，叫做一个描述。

Description用于什么呢？哎，用于指定我们这个网站的一个描述啊，网站的描述也就是说，呃，它就是介绍一下网站这个东西跟关键字就不太一样，关键字就是你搜那个关键字就可以可以可以显示结果，这个就是一个描述啊，就相当于是一个你的网站的一个自我介绍一样啊，自我介绍一下，所以这东西主要干嘛，你看啊，我这一搜网上购物，我这一出现京东，你看京东这是不是会有一个介绍，哎，京东京东京东点com专业的综合网上购物商城，你看这一套是不是跟这玩意儿是不是一模一样的，哎，一模一样的，所以这个时候description就是用于指定网站的一个描述，哎，网站的描述会在哪显示呢？网站的一个描述，它会显示在我们这个搜索引擎的一个搜索的这个结果中啊，所以注意它这块。

它为什么会显示这玩意儿，就是因为什么它指定的就是这个东西啊，所以你看看亚马逊也是一样，我们直接右键查看网页的一个，呃，直接这吧查看。再检查一下，检查还不行，检查也能看啊，但是我们希望呃，它等于你看在京东这儿是有查看网源代码的，但是在我们亚马逊这儿啊，在这儿呢，们一点点开以后，我们来看一下啊，稍微等一下源代码往下找，往下找content content，我们叫做一个呃。Meta Meta是不是他是不是也有一个description啊，你看咱们随便找一句话，亚马逊中国提供专业服务，我们来看这有没有亚马逊中国提供专业，是不是这么一个个，哎，所以描述主要就是显示在我们这个搜索擎的搜索结果，这啊搜索结果好，这是一个，然后再看还有一点我们补充一下，看这。

这个是不是我们这个。超链呀，哎超链接，你说我一点这链接就可以给我跳到京东这网站了，那这个字是什么玩意，诶这个字什么玩意儿，还是看京东的源码看是哪，诶看这是不是就是它的一个title啊，哎，就是抬啊你看它这显示的，你看诶京东正品低价，品障保障啊，品质保障，配送及时，轻松购物你看。是不是一模一样，哎，一模一样，所以这我们正好补充一句，我们叫什么呢？Title标签的内容。会作为什么呢？作为我们搜索结果的这个什么呢？诶，超链接上的这个文字显示啊，所以这是我们title作用，你说你看这玩意儿啊，这上边的搜索结果显示什么东西，都是哪来的，就是因为这个页面的title就是它，所以这显示的就是就是这个东西啊，就这个东西啊，好，这个东西就了解就行了啊了解一下就当然我们的这个东西除了curious description还可以设置什么呢？还有别的呢？啊，你可以直接看文档name，你看都有什么，哎，你看description这是不是都给你介绍了，哎，都给你介绍了，还有什么author啊generator author表示作者generator是怎么生成的是吧，怎么生成的，那这个东西就没有那么重要了，但是你要知道它什么意思，就是你要想写，你也可以写上，但是一般呢，一般用不上啊，一般用不上好这是我们两个关键作用，一个叫做keywords，还有一个叫description description啊还有一个东西我们叫做一个HTP的一个E。

啊，EQ这个东西是什么呢？这个呢是用来设置我们这个HTTP协议的，关于那个HTP协议吧，涉及到东西比较多，在这我就不再强调它了，那其实这个玩意儿我们要用的话只有一种作用，往下找它下边会有一个例子，例子我们看看在哪啊，在这写这么一个啊，我直接给粘过来，CTRLC。

然后呢，我放到这个位置啊，直接放过CTRLV，我先给它注了啊，先给住了，来看一下这个me写了一个HTEQV，然后写了一个refresh refresh，这写了一个content，然后写了一个地址，那这东西是干嘛的呢？这个东西其实你上网的时候应该见过，这是什么呢？诶，这是将哎我们这个页面，哎叫做重定向的哎另一个网站啊，也就是说就是你经常看到什么呢？比如说可能比较常见的吧，我们去比如说我注册一个网站的用户，我注册完了以后，它会出现这么一个界面，这显示一个是吧，诶几秒以后跳转，诶就说这时候咱假如说写了三秒啊，三秒以后跳转，那当我这个倒计时过了三秒以后，这个页面会自动跳转到一个新的页面，那这个你就可以理解成叫做成镜像啊，这个你就可以理成叫成镜像，那这也是这个意思，这玩意儿前边值都是固定的，包括content这都是固定的。

唯独哪不一样，就是这儿，这儿它写了一个三，然后写了一个分号，然后写了一个URL，三表什么意思，三表示的是一个时间，也就说我跳转，我隔多少时间以后跳转，分号后边是一个地址，这个地址表什么意思呢？表示的是往哪跳啊往哪跳，所以比如说我希望我的这个网站三秒以后跳转到百度怎么办呢？行模拟呗，诶模仿一下它，哎，来一个htb equ IV，这是一个re free for RA，我们直接来一个content，我先写一个三秒后跳转，然后URL我给他一个地址。既然要往百度跳嘛，我就直接写了HTTPS冒号鞋盖鞋盖3W点百度点com，然后我们这一保存，那这个时候啊，它这已经跳了，但是这个地址我没写完的时候已经跳了啊，所以这个时候我重新呢关掉再访问一下。

我们来看效果，这个时候你会发现有什么效果呢？哎，你看现在没反应过三秒123跳转到什么了，百度了啊，这叫做一个请求的一个重镜像，说白了就是把这个网址换成百度的地址啊，这个呢，一些特定情况下会用，相对来说比较少啊，相对来说比较少，这个是一个用法，好，那也就是说Meta，我们就说这么多了，哎，总之me首先你要知道它是写到hi的标签里的，它的主要作用其实这么几个，第一个设置我们页面的字符字编码啊，字符集第一个作用，第二个作用设置我们页面中的关键字keywors啊，第三个作用设置我们网页中的一个描述信息啊，它会显示到搜索结果当中。第四一个可以用来对网页进行重定向啊，用的没那么多，但是这些功能你要知道，然后后边其实我们还会有一个作用，当我们去学移动端的时候，我们会说我会用这个Meta标签来设置我们移动端的视口大小。但是这些东西稍微往后我们要。

说一下啊，我们说要说一下，但是你要现在关键记住name和CONTENT2个属性，Name指定的是你要设置那个数据的一个名，Content是那个指定的一个值，这么一个关系，好我们先说这么多，停一下。