尚硅谷前端基础 (18)

好，刚刚我们介绍了块元素，还有这个行列元素的一些特点啊，那你就是。主要还是记一些我们总结的这些东西，稍微记一下行了，但是后边还有一些东西我们还需要补充啊，然后呢，我们接下来再来，接着往下说，这些我先都关掉，然后在这我再新建一个文件，我来个零六，零六呢，我们还是叫做一个语义化标签，因为一直都是这话题，你只要说的是我们的这个，呃，网页M基本上就是说这个语义化标签，那这回我们来说一组，说一组块元素啊，说一组块元素，这一组块元素呢，主要是用来对我们这个页面进行一个布局的啊，它主要的作用就是对我们页面进行布局的。嗯，或者这些标签呢，我们也可以叫做一个这个结构化的一个语义标签啊，结构化啊就直接写吧，我们这个布局的一个标签啊，结构化语音标签，结构化一个语音标签，这组标签在哪呢？啊，你打开这个文档以后，在这儿有一个叫做content content section，哎，Section啊，Content section content就是内容，Section就是区块啊，主要就是用来对我们像我们刚才说的块元素，主要用来布局的。

那布局呢，作用就是把我们的网页分成一块一块的对吧，一块一块的，而这哥几个就是干这事儿似的，哎，这里边我们说过谁呀？呃，这个我们说过了，我的拽我们不管它，所以我们就说下边这个大这这也这也不用说了，是吧，大概有六七个啊，六七个标签，我们来说一下，那其实这些标签啊，你如果英语差不多的话，一看名字你就大概知道什么意思啊，我们来看一下，我们先按照一个顺序说吧，它这个顺序不太好，因为它是按照这个字母顺序排列的，但是我们很多这种东西的作用，它不一定是按照字母顺序排序的，对吧？那这里边我们先说第一个叫做had had什么玩意。

一看名儿就知道了，所以这玩意儿讲起来很没有意思，对吧，没有意思，他的headd啊，所以这个东西如果你自己稍微的有点基础的话，你完全可以自己看，不用听我讲，因为它主要就是介绍一下hier什么玩意，Hier什么意思呀，Head啊，Hier表示什么呢？表示头部啊，它表示我们一个网页的一个头部，呃，这标签啊，我就我我其实我这演不演示我给你写什么，这个叫做一个hi点标签，我就不不往里边写内容了啊嗨点表示网页的头部，哪算头部哪算头部，头部的其实定义挺大的，比如说在这里边像这个，这是不是都可以算头部，诶，所以这个整体你就可以放到hide里，或者说这个不算头部，这可能是一个套把，是吧，上边的一个导航，这可以单独放一个，那这个东西你就可以放到一个开hier里，所以hier是什么呢？Hier就可以理解成是我们网页的一个，诶上边那个部分啊，上面部分或者换一个网站嘛，看QQ。

QQ诶对吧，QQ网站，那像我们的这个也是，其实就是上边这块，它属于一个属于一个头部，包括这儿你都可以属于头部啊，网站的一个顶部啊，网站的顶部，网页的一个头部啊，网页头部，然后呢有头部，我们还有一个西叫做一个闷，嗯，闷表示什么呢？表示我们这个网页的一个主体部分啊，主体部分，主体部分就相当于是我们这个主要内容，所以这块我们可以写一个man man我们叫做一个闷标签，它表示的是我网的一个主体，哪是主体啊，说白了就是头部往下，头部下边那像这块区域就属于主体啊，就属于主体叫做一个闷啊闷标签，但是闷它会有一个特点，你像hi点这个东西吧，我一个网页里边可以有很多头部，比如说这儿可以算个头部，再比如说我这个位置，那可能它就算个头部对吧，网页里边可以有很多位置都有hier，但是主体部分闷就表示主要表示网页主体部分，所以闷这个东西啊，一个页面。

二中只有一个，诶，页面中只会有一个，闷，因为主要区域嘛，还是那句话，你都主要，那就等于没有主要区域了啊，所以叫做一个men，一个网页中只有一个啊，然后还有一个我们叫做一个foot foot的一个footer footer很典型的footer是我们网页什么呢？哎，表示我们这个网页的一个底部啊，底部是哪儿啊，底部我们来看看。腾讯这个网站底部。这东西你就可以说它是一个foot啊，它是一个底部，所以其实headerman呀，Footer你可以这么理解，我一个网页可以分成三部分上。中还有下上边这个就是头部，哎，这就是head，这个是我们这个主要内容，Content叫做men，哎，闷，只有一个对吧，只有一个foot表示的是一个底部，我们的网页的一个最下边啊，可以分成这么三个部分，当然这里边其实如果你还不理解的话，可以看一下文档，Header直接点过来，哎，哎，什么什么乱七八糟的是吧？哎，这是hier这个元素表示的是我们这个介绍的一个内容是吧，哎，然后。

啊等等一系列吧，什么navigation呀，它说的是我们这个hier里边可以包含哪些内容，看他这个例子，你看最上边就是一个hi点，你像这儿，它里边其实就主要放这么一个logo，对吧？Logo，然后下边这个闷，就是下边这个主要内容啊嗨的就是最上边你可以看一下，然后呢，闷的话一样可以点，点开以后这部分就是它一个案例啊，还是头部，下边就是闷，我们这个主要内容啊，叫做一个闷，再看foot foot呢，在在在在在在在这啊，Foot直接点开看，你看foot就是表示一个底部，哎，你要注意啊，Header和我们的这个footer，它不仅可以表示说我整个网页的头部，整个网页底部，也可以表示什么呢？我网页中的某一个部分的头部或者底部啊，所以这里边注意它并不是说固定的，但是像闷的话，只能有一个，就是网页的一个主体，而这个hier和fer相对来说应用范围比较比较广，但是啊，但是我们说一句这个实在的，像这三。

那个标签其实整体来说用的频率没有那么大啊，没有那么大，因为这三个标签都是后来我们H5以后新增的，包括待会儿我们要介绍这些标签都是H5以后所新增的标签，呃，现在来讲用的不是那么多，或者说它并不是一个你必须要用的标签，所以在这儿主要你了解一下行了，至于具体开发中，哎，其实用不用都行啊，看你公司的一个需求，为什么用的比较少，因为H5新增的嘛，新增的，而且它主要是语义化标签，这个标签我们用不用主要是看它在SEO当中的用，那现在他们在SEO中的作用呢，没有那么明显，所以其实用的也比较少，而且你这个文档往下找的话，往下找在这儿你会看到有这么一个，诶，兼容性的一个列表，就是告诉你这个标签有哪些浏览器支持，所以你看啊，像复标签这个标签Chrome chrome5开始。

支持，哎，Age，我们IE的age它始支持的，哎，火狐从四开始支持，那就基本上没有问题了，对吧？诶IE从哪开始支持，IE9以上才支持，也说这东西在IE8里认不认识啊，不认识，虽然我们也有办法让他认识，但是我们需要多做一些事，对吧？后边都会有列举一些兼容性，所以我们在真正用的时候有一些标签，你在用的时候你就要考虑一下我需要兼容哪些浏览器，而这些浏览器又支不支持这个标签，当然标签的兼容性上问题不是特别大啊，了解一下，OK，好，这三个玩意儿啊，Hier，我们的men，还有我们的foot啊，然后还有几个啊，我们来看有什么呢？这有一个叫做navy。

Navy，嗯，还有一个叫做aside aside还有一个东西叫做article啊，Article，我们来说这几个，嗯，Na，呃，我们先说什么呢？先说navy吧，Navy其实是我们这里面用的最多的，Navy什么呢？Navy表示什么呢？诶表示我们网页中的这个导航，导航nay，它本身意思叫navy gator是航海家的意思啊，航海家的意思航海嘛，或者说这个指南针对吧，它可以就表示一个指示你方向的东西，所以就是导航，就是那位像我们这个QQ，腾讯的官网。这个就是一个navy对吧，就可以是一个nay啊，这些都是不是不是固定的，你可以看一下腾讯用的是什么，检查一下源码，你检查的时候看啊，在点这个elements的时候，你可以在这看这个源码，当然你可以还可以怎么办呢？你看这有一个这个小鼠标的图标，你这一点在你的这个网页中就会出现这种框，也就是说你可以选中你要查看的元素，你在这儿看，你这一点开，你看很明显腾讯这儿就没有用nay啊，就没有用nay，所以这些标签都不是必须的，可以用也可以不用啊，可以不用nay，就表示导航，所以像这种东西我们就可以用一个nay去做啊，用一个nay去做啊，还是关注它的一个语义navy，然后还有什么呢？还有我们叫做side啊，叫做aside aside啊A呢，Aside表示的是一个。

这个东西有点像，你要从语义上来讲的话，就是好像我们上学的时候学那种学那种文章啊，我可能学一篇文章，哎，文章边上可能有一个，这有一个生词啊，生词或者一个人名是吧，然后在边上可能画一个图，对这个词进行解释说明，哎也就说这个东西并不属这个东西，并不属于我的主要内容，但是它也是一个相关的内容，但是呢，它融入不进去，所以这个东西就可以使这个aside啊aside，所以这个aside表示什么呢？表示一个这个和我们这什么呢？哎，和我们这个主体相关的这个其他内容啊，其他内容和主体相关，又不属于主体，那比如说我们看腾讯这里边，咱们可以算得上aside的，就比如说像这个东西。

像这个东西就可以算aside对吧，它是一个边嘛，它是一个边的东西，如果再看的话，京东可能比较也比较明显一点，京东的话，你像这个你都可以用navy，这个你都可以用nay是吧？Nay，然后像这个边上的东西，你就可以用这个aside啊，像这个都可以用aside，因为是边边蓝嘛，所以aside在网页里可能主要就表现的是一些这种侧边栏啊，侧边栏侧边栏啊，然后还有什么呢？还有一个东西，我们叫做article article，哎，A叫做一个article article什么玩意，Article表示的是一个文章，哎，表示什么呢？哎，表示一个独立的一个文章啊，你写篇文章是吧，这个文章里边有十个自然段是吧，你就可以把这文章放到一个article里啊，Article里这是这三个啊，Navy aside article navy表示导航，Aside表示侧边栏，Article表示文章。还是我们看一下它的例子，例子先看navy。

那个在这，你看他用OL实现了这么一个菜单啊，这么一个菜单，OL以后我们会学啊，实现这一个这么一个菜单，菜单在哪呢。他这菜单在这还没有显示出来啊，我们这样在这儿啊，有的时候它这显示效果不好，你可以右键有一个叫open配置音desk top browse，就是打开这个页面，通过这个桌面的这个。浏览器啊，直接打开我们来看一下，看到这个了吗？哎，这个一个导航，那实际上它就把这个整个放到一个navy里啊，放到一个navy里，Navy就表示的是一个导航啊导航，然后再往下看看我们这个aside aside叫边栏啊，边栏你看这个，这就属于aside，它整个这是一个文章，这可能对某一个东西解释说明，那这就放到一个CE里，他们啊注意在这儿他都加了CSS这个东西，这些标签，我们刚才所讲的这些标签，你在页面里写的时候，他们没有任何区别，就是显示效果啊，你看啊，我写一个AA。

这写一个BD，这写一个CC，这写一个DD，这写一个E，这写一个FF，它们显示效果上没有任何区别，都是一模一样的，因为他们只是分区块表示语义的，所以显示效果没有什么区别，你在这个案例里之所看你有区别，有区别是因为它里面用了CSS啊，所以还是关注语翼，不要关注它这个样式啊，回去再看还有谁啊，还有刚才说的一个。Article article表示是一个文章，你看它这就是整个article是一个文章，然后article里边还有小article，就是每一个独立的文章，你都可以用一个article去表示啊，一个博客也好，一个文章也好，一个独立的区块都可以用它，那每一个文章里，其实它一般都会有一个标题，你看这就有外边这个article里边一个大标题H1，然后里边有三个小的article，每个里边是不是都有H2啊，这是一个什么呀？这是一个这一个天气预报对吧？这整个是一个天气预报的信息，然后这是每天的具体的一个天气预报，是这样一个效果啊，所以article表示的是一个文章，好，那这些都是一些语义化的一个标签，你要记住关注的是什么，关注的是一个语义，我们来看我们都说什么address，不管它了，Articleside foot hi，然后man，还有navy，当然还有最后一个叫做section section是干嘛的？哎，Section很简单，Section的意思就是其他这东西我给你去掉啊，我就不写它了啊，我就给你把标写出来。

它标签表现效果没有任何区别。e section section表示什么呢？Section它表示。

表示一个独立的区块，哎，什么意思？上边的标签，上面的标签都不能表示是，哎，我们可以使用section啊，你说我用head不合适，用men不合适，用那不合适，用S不合适，那这个时候就可以用section啊section section就表示分区分块的意思，那比如说我在head里边，我们head表示整个一个头部，可是我head里边可能还要分成三部分，那我就可以放三个section啊，三个section就是他们都没有的时候，我可以用section啊，用这些不能表示的时候，我就可以用section啊呃等。总之吧，Section表示就是其他的意思啊，绊示其他意思，那这里边我们还要再说一嘴，那像这些东西，其实这几个标签整体来说在网页中用的都不是那么多，因为它是H5新增的，所有女性对他们并不是那么的重视，也或者说不是那么的友好，所以用的并不是那么多，可能其中我可能看到比较多的就是na，还有second，可能包括heer可能看的比较多，其他的什么man呀，用的都比较的少，所以这个时候你就了解一下就行了啊，了解一下了，那一般情况下我们会用什么呢？哎，同学说老师你这玩意不让用，用的不多，那我们用什么？哎，其实有一个最多的叫什么呢？叫div div跟section也是有点像，Div是什么呢？Div它就是一个div，没有语义啊，没有语义，就是就用来用来表示一个区块啊，用来表示一个区块，目前来讲div还是我们。

主要的一个布局元素什么意思，所以现在啊，随便打开一个网页啊，随便打开一个网页，你直接查看它的源代码，你看它里边编号最多的一定是div，你都不用，都不用想一定是div，一定是div div是最多的，所以其实说白了就是div可以代替上边的所有的，哎，你说hier我用个div，我men我用个div foot我用个div na我用个div的都行啊，这都行，但其实的话用div有点违反我们这个H5的思想，因为我们思想就是我用H加B去确定各个内容的一个语义嘛，对吧，语义，但是这个时候其实这东西我们也用习惯了，往往的情况下，我们一个网页没有必要分的那么细，所以一般情况下，通常情况下我们都用div来代替。

所有，所以div还是一个主要布局手段，这是一个啊，当然这些说的都是块元素，还有一个跟DIV1对的叫什么呢？叫死SPASPA是什么呢？死SPA是一个行内元素。此SPA是一个行内元素，行内元素也是没有任何的语义啊，没有任何的语义，一般用于在我们这个网页中啊，网页中选中我们这个文字，这两个东西啊，是我们布局的一个主要手段，上边这个了解一下就行了，主要手段就是div和死SPA块，一般就用div内联元素，横天元素一般就用什么呢？死SPA什么意思啊，我大的布局外头用div，里边有个字，比如说有个hello，这hello没人管，没人管干嘛呢？我就可以用死SPA给它套起来啊，给它套起来，但然后边我们还会去演示，但是你现在其实主要的还是这两个东西，Div还有SPA div是块，SPA就是行内元素。

显示效果上没有任何特殊效果是吧，你待会儿要做的事儿，把div和SPA显示效果试试，包括上面这些你都试试，你看看显示效果上他们有什么区别，其实没有区别，除了败是行列元素以外，剩下的一点区别没有啊，只是语义上的一个差别，好，这个是我们说的语义化标签里边的一些，诶，结构化的一些元素啊，我们来听一下。