HTML5学习之语义化标签（一）

所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签。下面将介绍

、

等HTML5新增的语义化区块标签。

（一） header

通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。

我们不但可以放置页面或者页面中某个区块的标题，还可以放置搜索表单、logo图片等元素，按照最新的W3C标准，我们还可以放置

导航栏。

下面是一个使用

标签的网站头部实例：


    
    **信息科技有限公司

需要注意的是，一个文档中可以包含一对或者一对以上的

标签。标签的位置是次要的，不一定非要显示在页面的上方，我们可以为任何需要的区块标签添加

元素，例如下面将要讲解的

、

等标签。

（二）nav

表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。

不但可以作为页面独立的导航区域存在，而且我们可以在

标签中使用。此外，

标签还可以显示在侧边栏中。由此可见，一个页面之中可以有多个

标签。

根据HTML5标准，

标签只用于页面的主要导航部分。因为搜索引擎或者屏幕阅读器会根据

标签来确定网站的主体内容，所以并不是任意一组超链接都适合放置在

标签中,我们只要将主要的，基本的链接组放进

即可,对于有辅助性的页脚链接则不推荐使用

标签。

下面来看一个结合

标签的导航栏应用案例：


   
   **信息科技有限公司
   
       首页
       客户案例
       技术服务          
       关于我们
       联系我们

值得我们注意的是,HTML5规范不允许将

标签嵌套在

标签中使用。

（三）aside

所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。

一般使用在页面、文章的侧边栏、广告、友情链接等区域。

示例如下：


   HTML5学习之语义化标签
   ....正文.....
   
       什么是语义化标签
       语义化标签就是......

（四）footer

一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。

跟

标签一样，

标签的使用个数没有限制，可以在任意需要的区块底部使用。

示例如下：


    
        版权所有 © 2016-2017 **信息科技有限公司

（五）article

表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。

元素应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用

元素。通常情况下，一个

元素包括标题、正文和脚注。和

标签一样，该标签同样不能用在

标签中；

示例如下：


   HTML5学习之语义化标签
   ....正文.....
   版权所有*伪版必究

标签还可以嵌套使用，但是它们必须是部分与整体的关系。例如在一篇发表的博客中，我们可以对读者评论使用

标签。

示例如下：


   HTML5学习之语义化标签
   ....正文.....
   
       
           读者评论
       
       
           
               评论人：张三
               评论时间：2017-2-15 11:45:23
           
           张三到此一游

（六）section

是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段

标签所包裹的是有一组相似的主题的内容，可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。

通常包含一个头部

、可能还会包含一个尾部

。

示例如下：


    JavaScript框架
    Javascript框架是指以Javascript语言为基础搭建的编程框架。
    
    
        angular.Js

        angular.Js是一款优秀的前端JS框架
    
    
    
        Vue.js

        Vue.js是用于构建交互式的Web界面的库
    
    
    
        Node.Js

        Node.js就是运行在服务端的JavaScript

在这篇关于JS框架的文章中,所列举的三个框架都是文章主题构成的一部分，所以我们使用

标签对其进行分段。

我们不但可以在

标签中使用

标签，还可以在

标签中使用

标签。

示例如下：


    HTML5技术栈
    广义而言的HTML5包含HTML、CSS和JavaScript三个部分
    
    
        HTML

        内容
    
    
    
        CSS

        样式
    
    
    
        JavaScript

        行为

在这个例子中，

代表一段内容，在这段内容中，HTML、CSS、Javascript是三个完全独立的部分，因而我们使用

标签。

、

三者的比较：

：应用广泛，只要我们想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签

：包含的内容是一个明确的主题，通常有标题区域

:如果我们的页面中需要一个多带带的模块来实现一个多带带的功能，就用

，其他的时候都用

。

最后，欢迎IT专业学生及编程爱好者加入QQ交流群：154658901领取学习资料，一起学习，共同进步。

私有云云服务器标签语义化 html 标签语义化语义化学习之substr()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60102.html

HTML语义化

摘要：头部主标题副标题举例信息科技有限公司首页客户案例技术服务关于我们联系我们学习之语义化标签正文什么是语义化标签语义化标签就是学习之语义化标签正文版权所有伪版必究框架框架是指以语言为基础搭建的编程框架。 HTML语义化 HTML 引入语义化标签的好处主要有下列三点：比div标签有更加丰富的含义，方便开发与维护搜索引擎能更方便的识别页面的每个部分方便其他设备解析（如移动设备、盲人阅读...

sixleaves 2019-08-05 18:01 评论0 收藏0
java并发编程学习之Volatile

摘要：但是的语义不足以确保递增操作的原子性，在多线程的情况下，线程不一定是安全的。检查某个状态标记，以判断是否退出循环某个方法这边和用普通的变量的区别是，在多线程的情况下，取到后，的值被改变了，判断会不正确。多线程为什么是不安全的这边简单的讲述一下，参考java并发编程学习之synchronize（一）当线程A和线程B同时进入num = num + value; 线程A会把num的值...

thekingisalwaysluc 2019-08-16 18:28 评论0 收藏0
重学前端学习笔记（四）--div和span不是够用吗？

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

lx1036 2019-08-02 16:15 评论0 收藏0
重学前端学习笔记（四）--div和span不是够用吗？

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

ctriptech 2019-08-23 17:10 评论0 收藏0
重学前端学习笔记（四）--div和span不是够用吗？

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

wemall 2019-08-05 16:50 评论0 收藏0