HTML5元素分类-创新互联

HTML5元素分类:结构性元素、级块性元素、行内语义性元素、交互性元素。

成都创新互联主营东昌府网站建设的网络公司,主营网站建设方案,app软件定制开发,东昌府h5微信平台小程序开发搭建,东昌府网站营销推广欢迎东昌府等地区企业咨询

目的:使文档的结构更加清晰明确;

  增加新功能。

  1. 结构性元素:负责Web的上下文结构的定义,确保HTML文档的完整性。

    1.1 section(给内容分段):在web页面应用中,该元素可以用于区域的章节表述。

    section 元素用于对网站或应用中页面上的内容进行分区,关注内容的独立性;一个section元素通常由标题及内容组成;section元素包含的内容可以单独存储到数据库中或输出到word文档中

 1.2 header(头部元素): 页面主体上的头部

  应该用来标识每一个区域的头部区域

 1.3 footer(底部元素): 页面的底部

  应该用来标识每一个区域的底部区域

 1.4 nav(导航):用于菜单导航、链接导航的元素

  适用于以下场合

  传统导航条、侧边栏导航、页内导航、翻页操作。

 1.5 article(标识文章):用于标识一片文章的主体内容,一般为文字集中显示的区域。

  article元素用来标识文档、页面中独立的、完整的、可以独自被外部引用的内容。它可以是一

  篇博客或者报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件。

  article元素的标题通常放在header中。通常包含header和footer。

  article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。如一篇新闻是

  一个article,在新闻的最后的评论就可以嵌套article元素。

 【section 与 article 】

 article:代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。如博客中的一篇文

     章,论坛中的一个帖子或者一段浏览者的评论等。通常包含头部(header元素,article

      元素的标题(hn)通常写在header元素中)、底部(footer元素)。

 section:section元素的作用是对页面上的内容进行分段,如对文章分段等。通常为那些有标题的内

      容进行分段(*)。

     一个section元素通常由标题(hn,hn不需要放在header标签中)和内容组成。

    一个section元素一般不用包含header元素和footer元素。

    section元素的作用是对页面上的内容进行分段,如对文章分段等。

    相邻的section元素的内容应该是相关的,而不是像article那样独立。

    section article 不能取代div用于设置样式;

     如果article元素、aside元素、nav元素更符合使用条件,不要使用section元素;

    不要为没有标题的内同区块使用section元素;

  【我的整理】

    article用于标识内容独立的文章;

      aricle中通常包含header元素、footer元素;

    article的标题hn通常写在header元素中;

    article可以嵌套使用,但是内外层的article内容要有关联;

    section为有标题的内容区块划分段落,标题不需要写在header标签中;

    section 与 article可以嵌套使用;

    section 与 article用于划分区域,不能取代div作为设置页面样式的容器,如需要,则使

      用div设置;

    若aside、nav、article更符合使用条件,就不要使用section元素。

  【代码示例】

 

    

      


        潜行者m的个人介绍


    

    


      潜行者m是一个中国男人,是一个帅哥。。。


    

      


        评论


      

        


          评论者:潜行者 n


        


          确实,m同学真的很帅


      

      

        


          评论者:潜行者 a


        


          今天吃药了没?


      

    

  

[补:非主体结构元素]

 1.6 hgroup(给标题分组):为标题或者子标题进行分组,通常它与h2~h7元素组合使用,一个内容快中

         的标题及其子标题可以通过hgroup元素组成一组;

 1.7 address(添加联系信息):在文档中定义联系信息,包括文档作者或者文档编辑者名称、电子邮

              箱、真实地址、电话号码等。

2.级块元素:

 2.1 aside(设置辅助信息):用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内

              容。从一个简单页面的显示上看,就是侧边栏,可以在左边,也可以在           右边。从一个页面的局部看,就是摘要。    、

    aside元素的两种用法:

    作为主要内容的复数信息部分,包含在article元素中,其中的内容可以是与当前文章有关     的参考资料、名词解释等;

    作为页面或站点全局的附属信息部分,在article之外使用。最典型的形式是侧边栏,其中     的内容可以是友情链接,博客中其他文章列表、广告单元。

 2.2 figure:对多多个元素进行组合并展示的元素,通常与figcaption联合使用

上海卢浦大桥是当今世界第一钢结构拱桥,是世界上跨度大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥(除合拢接口采用栓接外),现场焊接焊缝总长度达4万多米,接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。

  

黄浦江上的的卢浦大桥

  

拍摄者:W3School 项目组,拍摄时间:2010 年 10 月

  

  

  2.3 code:表示一段代码块.前台显示的内容

  2.4 dialog: 用于表达人与人之家 的对话。该元素还包括dt和dd这两个组合元素,它们常常同时

      使用。dt用于表示说话人,dd表示说话内容。

   <暂不知何处使用>

3 行内语义性元素:完成web页面具体内容的引用和表述,丰富内容展示。

  3.1 meter:表示特定范围内的数值,可用于工资、数量、百分比等。

  3.2 time:表示时间

  3.3 progress:用来标识进度条,可通过对其max、min、step等属性控制,完成对进度的表示控制

  3.4 video:视频元素,用于支持和实现视频(含视频流)文件的直接播放,支持缓冲预载和多种视

      频媒体格式:MPEG-4,OggV和WebM.

  3.5 audio:音频元素,用于支持和实现音频(音频流)文件的直接播放,支持缓冲预载和多种音频

       媒体格式。

 【我的整理】

  设计微格式:

  添加发布日期:

4.交互性元素:功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础,这类元素包括

       以下几个。

  4.1 details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与

    summary (chrome 中测试为 summary,目前仅chrome和IE支持)交互才会显示出来。

 
    健康信息     身高:     体重:   

  4.2 datagrid:用来控制客户端数据与显示,可以由动态脚本更新。

  4.3 menu:主要用于交互菜单(这是一个曾经被废弃现在又重新启用的元素)

  4.4 command:用来处理命令按钮

【附】web前端开发规范:http://www.html5cn.org/article-558-1.html

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:HTML5元素分类-创新互联
本文链接:http://scyanting.com/article/hoeie.html