扣丁学堂HTML5培训分享H5元素介绍

本篇文章扣丁学堂HTML5培训小编给读者们分享一下H5元素介绍，对HTML5开发技术感兴趣的小伙伴们就随小编来了解一下吧。

扣丁学堂HTML5培训

1、设计辅助信息

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条以及其他类似的有别于主要内容的部分。

使用场景：

（1）作为主要内容的附属信息部分，包含在article元素中，其中的内容可以是与当前文章有关的参考资料、名词解释等。

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

2、设计导航信息

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。

使用场景：

（1）传统导航条。常规网站都设置有不同层级的导航条，其作用是将当前画面跳转到网站的其他主要页面上去；

（2）侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去；

（3）页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转；

（4）翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。

3、标识文章

article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的部分。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。

一个article元素通常有它自己的标题，一般放在header元素里面，有时还有自己的脚注。

当article嵌套使用的时候，内部的article元素内容必须和外部article元素内容相关。

article元素支持HTML5全局属性。

4、给内容分段

section元素用于对网站或应用程序中页面上的内容进行分区。一个section元素通常由内容及其标题组成。

使用场景：

通常用section元素为那些有标题的内容进行分段。section元素的作用是对页面上的内容分块处理，如对文章分段等，相邻的section元素的内容，应当是相关的，而不是像article那样独立。

article元素更强调独立性、完整性，section更强调相关性。

使用section元素需注意的问题：

（1）不要将section元素当作设置样式的页面容器，对于此类操作应该使用div元素实现；

（2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素；

（3）不要为没有标题的内容区块使用section元素。

5、标题块

header元素是一种引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其它内偶然那个，如数据表格、搜索表单或相关的logo图片，因此整个页面的标题应该放在页面的开头。

在一个网页内可以多次使用header元素。

6、标题分组

hgroup元素可以为标题或者子标题进行分组，通常它与h1-h6元素组合使用，一个内容块中的标题及其子标题可以通过hgroup元素组成一组。

<article>
 <header>
 <hgroup>
 <h1>主标题</h1>
 <h2>副标题</h2>
 <h3>标题说明</h3>
 </hgroup>
 <p>
 <time datetime="2012-6-20">发布时间：2012年6月20日</time>
 </p>
 </header>
 <p>新闻正文</p>
</article>

7、脚注块

footer元素可以作为内容块的注脚，如在父级内容块中添加注释，或者在网页中添加版权信息等。

与header元素一样，页面中也可以重复使用footer元素。

8、联系信息

address元素用来在文档中定义联系信息，包括文档作者或文档编辑者名称、电子邮箱、真实地址、电话号码等，还可以描述与文档相关的联系人的所有联系信息。

想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间