04_尚硅谷_h5_语义化标签.wmv原创

好，来我们来看一下啊。好，其实大家看我们讲到现在啊，我们讲到现在是讲了个，首先讲了HT是什么，其次讲了HT跟H4的一个区别是吧，然后第一节课我们说了一下H的一个pro对吧，那说完之后也提了一下H75里面新增些小功能，是不是我们说我们这几天要讲H新增标签跟新增属性嘛，是不是今天是不是讲了新增属性了。是不是class？还有呢，Data set吧，这些是不是都是新增属性啊？OK，那我们来说一下新增标签啊，新增标签第一个肯定是余化标签，不管怎么样也得讲一下余化标签了，是不是？OK，那余化标签为什么要余化标签？啊，我们常见雨花标签大家肯定知道。这么几个不全可是我们最常用的，其实最常就上面几个的负责就停了，其他我们基本不会用讲，而且我们说你可以把余和标签认为就是。

第是不是，可是为什么要用余化好看一下啊，来看一下，我这边有一个统计表。看走你。好，这个是谁的统计表啊，交通事故呃，Open的啊，Open他干嘛，总共统计了180万个URL，提取了里面560。万个命名，什么命名？ID啊，克拉斯的命名懂不懂？你看有28万个给他取名叫福腾。有起叫had的，还有起叫什么肯定的啊，这他是拿的什么，看一下ID的，你看ID懂懂，就是说拿了这么多个URL里面。取名为ad的这个value，你看28万个取名为负的是不是？当然还有个列表，是啊，关于。

拉的是不是来看一下。这是欧帮我们做的一个统计，CTRLC。理好，你看这是class里吧，你看负的还是有17万个是不是？OK，由此我们的W，呃，那个H5的什么自定小组，他觉得干嘛有必要给干嘛，给我们搞一个比较有意义的表现出来。是吧，好，那这些语义化标签就是干嘛，首先是从这边这种这些表的一个统计数据上面开，开始干嘛，就是去制定的懂不懂哪些东西应该做成余化标签的一个标识啊，像这个福都是什么开都什么数字，我这些表里面，那这是open它自己一家的，其他的企业都有统计等的，只不过没有没有干嘛把数据给我们暴露出来而已，懂吗？好，那我们看一下。好，那我们说，哎，这个余花标签其实没有什么好讲的的，是不是我们说在H5出来之前，我们用divb来表示啊，页面头部、章节、页脚等这些div毫无意义吧？各大浏览器厂商分析了上百个页面，从中发现了div名称，通用ID名称是吧？大量重步吧，很多开发人员喜欢用div I等于来标记页脚内容是吧？所以HTL5元素引入了。

语义化标签，一组新的片段类描述，把它理解成就是个div，只不过它相比其div的话，它有语音，懂不懂整个前端HTL这一块div是最干净的。身上什么都没有，懂不懂，OK，然后其实就是余化标签，懂吗？OK，那余化的好处HTM可以让更多余化结构化的代码标签，代量什么大体无一，什么大量无一的么点鱼标签嘛。最终与提升了网页的质量跟。寓意对搜索引擎更加友好，是不是，那我们怎么看对搜索引擎是否友好呢？啊，我们可以来看一看啊，比如说我写我写个小东西。

好定理棒是不是我们说讲一下语义化标签，如果没有语义的我们看一下。棒，无语无语五。语文艺术教你OK，无语吧，怎么无语呢？比如说来个did，是不是我给ID叫做的吧，我这里面再来什么，再来一个。H1吧，是不是啊，我说这个一叫什么呢？主我是1AD啊，开了是不是再来什么，我说他一个标题叫H2吧，是不是OK那什么我是。还的副标题是不是只你那我下来，比如说我这边还有个叫什么ID叫什么C是不是，比如说干嘛我也来了奇艺能有几次哦一次吧，那改成二吧，我是。

看是不是轴，你看下CTRLC比做嘛，副标题有什么H。是不是占了100啊，这里我们说再来一个负。好比说再来个fo啊的是不是，比如说我是啊。福特，我福特的。副标题，是不是啊，我们来看一下这个站点的语义到底怎么样啊，这边我有一个站点。好，看一下这个站点，CTRLC贴过来，好，这个站点可以测试整个你的网页的语音到底怎么样，这里。好，选中一个文件吧。嗯呃，选中文件是不是我们的code d盘扩。扣了一啊零八不不不1208是不是沃克第八天七秒里面这个无语意外打开了，OK，点击这个测试一下。

周NY，你看我是he，我是he的副表情，我是肯啊，我是鱼。什么鬼哦，没改吗，CTRLC。当然，这是希望，这是我们希望的结果吗？继续。OK，这是我们想要的结果吗？是吗？这不是我们的语义吧？我们的语义是三段吗？是不是，你看你是他是按照爱奇123给五分的吧，是吧，爱奇艺在最前面嘛，你看爱奇二品牌。I3在后面，这家不是我们的语义嘛，是不是我们说在文化当中，I是不是只能用一次。是不是啊，那比如说那爱奇艺用多次行不行。

H2嘛，是吧，这里。看可不可以。爱奇艺用多次的话，会不会破坏我们的网页的语啊？H1H2这种标签的话是不是自带的。是不是啊，OK，看一下哎，这好像是我们希望的一个结果啊，是不是，可是我们说我们是不是用了多改器啊，能不理解啊，OK，我们说不是太友好，是不是啊，OK，来看一下我们的鱼化。T2负塔是不是，所以CTRLCCTRL1我是负的。好，我是福特的副标题，OK，我们来看一下语化标签，好，我们说什么语化标签有这么多是不是啊？好余化的好处我们刚才是讲了，好，我们说语第一个标题应该group元素，代表网页或者三性的标题，三是另外一个语，语化标写法，你们可以把简单的认为一个独立的部分就可以用三个题来包起来。

懂吗？你说我这个h group可以代表一个网页呢？或者说一个独立三的一个标题懂不懂？当元素有多个层级时，该元素可以将H1到H6放在室内，譬如文章主标题跟副标题一个组合，一般我们会这么做。等等，OK，注意啊，如果只需要一个奇艺到H标签就能完成的，就不要用去包裹了，那讲OK，如果需要联系多个奇，就需要什么爱来包裹住，而且一般这个group要需要放到什么。还边前能不理解h group还有一个用法，H group只要使用上了h group，其实H1在页面上面出现多个也没关系，它会自动降级的。我们待会可以看到啊，我说他的元素，这是个还有还的，还的元素代表我要或行的。页眉通常包含H1到H6。

或。对，不懂这些元素就应该包含在他的内部，网OK的一个使用，注意可以是网页或者任的部分没有。个数，如果h group自己就能工作的很好，那就不要使什么意思。比如说你有一个。是不是，然后你H旁边还有内容的，那你这些东西就应该用什么。还的标签干嘛给他包起来，如果没有这个内容是不是自己就可以做的很好，那就使用就可以了，不要标签。能理解我的意思吗？能不能理解啊，OK，再来看。在吗？导航你就把它认为是个D懂不懂，而且一般我们奶粉里面放租导航。不会放一些小标题，或者说一一块结构的小导航，主导主导航我们用never啊，OK，还三题呢，你只要看见元素上只要是一块啊吧，页面上只要是一块独立的内容，那你就可以使用三。

懂不懂？OK，再来看。还什么二个文章就。借名之意嘛，懂吗？如果你发现页面上是有文章的，那就用什么啊，你会给他包起来对不对？OK，最种还有什么。赛的好，什么是赛？如果你文章里面有那些侧边来的标题来的就是什么赛的，如果你不是我页面的主导好，而是一个副导航。那你就应该使用。塞可以嵌在20度里面，也可以嵌在。Section里面懂不懂，OK，其实这边我只需要你们记住什么，其实这两个都不需要记住，用的很少，前面能不记住，Group很好记吧，你把他们认为就是来我们来看看的怎么样。

来看他们的语义到底怎么样，加在我们说这个标要叫D了，这个叫什么？H1A是不是，你里边是不是有H1H2，因为H要均应该什么h group及RO是吧？是只要你给它包起来，可能你外部还有一些其他内容。懂不懂，比如说这边还有div的，还有什么三个形的，能理解好，第二个什么一个内容区啊，直接什么。独立的区域就是用什么section ctrl c ctrl v，好，我问你现在里面是不是也有部分标题啊，这个标题应该是什么？

爱不嘛，包起来最好来个是不的走你。包到里面来吗？能看懂吗？OK，教你这不是我一个三吗？里面不是开了吗？你肯能下面还有一些什么其他内容的，可能还有一个三题吗。懂吗？好周，你最后是什么？福foot福特是吧，一样用一个还个嘛给它。包起来是不是，比如干嘛，这里面叫什么。这个是做什么负特长？是吧，OK，走你。周年，OK，这个是什么？Content吧，所你看一下这个这个东西的语义到底怎么样，CLCLB来看一下。正好来，我们重新选。

不对，不是，他重新选择文件语音话打开好测试一下，看它的语音，你看我是had，我是跟的，我是我是foot吧，可是你会发现这个语言是不是还是不是我们所希望的。是不是我们说你在这边大家我们之前说干嘛，我们说页面当中是不不能出现多个爱奇艺标签啊，是不是，可是在余化当中干吗可以出现啊，因为干嘛，因为我外层你看是不是。是不是有had的三，他会主动给你降低这个语的，有出现多个I标签，有没有关系啊，没关系，我外面包裹这一层干嘛是不一样的，我是害的，说明你这个奇艺比较重要，我是在个说明你这个爱干嘛，比我这个手干嘛。可能要说微干嘛弱一点等等，最终我一个站点里面可以出现多个。H1表现懂吗？那这样的话整个语义就多了。就出来了，看一下走你。

好，是不是你看，哎，你看这不是我在开的吧，我的内容是不是就应该在里面负的，是不是就应该出来，你看这个爱奇艺是不是它会自动干嘛都是爱奇艺吧。它会自动给你降级对吧，是不是它会认为你这个had跟你这个负来显你的重要。三个星是干嘛，可能是一个小标题啊，虽然说你也是用来奇嘛，可是是在你这个肯定的维度上的一个小标题吧，懂不懂，而且它还有功能，是不是会把副标题干嘛。鉴定隐藏掉，因为一般我们不希望受损，你去抓到我们的副标题。因为副标题是不是都是对我们主标题行什么解释啊，所以一般不需要被搜索引擎抓到，能你讲你看这是不是语化，再把我们默认干的事情懂不懂，首先语句化会自动给你降级的，根据你这个语域标签的什么等级，它会自动降级的，知不懂热览器有它自己的一套规则，那搜索以擎把它对个它对什么数据，它对搜索擎会极其的友好。

能解吗？所以说一般我们写页面的时候的话啊，如果要求你改成余化的页面，那就改成余化懂不懂，那一般我们还是D多一点懂不懂啊，这个语句话的话，说实话啊，我是没怎么用过懂不懂，可是它确实要比div的语义来的好。可是我们说用div写也没也没问题，因为最终会做SEO优化的。懂吗？OK。好。