课程免费试听
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
元素中新增的主体结构《HTML5系列教程10》

来源:新川教育 阅读数:1476
添加时间:2017-4-11   类别:网页设计教程

元素中新增的主体结构《HTML5系列教程10》

    很多复杂的网页都是由若干个区域构成的,在HTML5中,为了使网页的文档结构更加清晰明了,新增了页眉、内容、页脚等与文档结构相关的主体结构元素。在本次的教学中,我们就来学习HTML5元素中新增的主体结构

的一些方法和演示案例。

1.nav元素

    nav元素用于定义导航链接的内容,可以作为页面导航的链接组,其中的导航元素链接到其他页面或者当前页面的其他部分,使HTML代码的语义化方面更加精准,同时对于屏幕阅读器等设备的支持也更好。

    在html5之前,通常情况下我们会使用<div>元素或者<ul id="nav">这样的代码来表示页面的导航,而在HTML5中,我们可以直接将导航链接列表放在<nav>元素中,比如下面这个例子:

html5元素中的nav元素

    nav元素在网页中有着非常重要的作用,比如网页顶部的导航条,其作用是在多个页面间进行跳转链接;网页侧边栏导航,其作用是从当前页面跳转到其他页面;网页内页导航,其作用是在一个网页中的多个主要部分进行跳转;翻页导航,其作用是在多个网页间实现实现前后页滚动。


2.time元素

    time即时间,该元素用于定义日期和时间。由于时区的问题,网页上显示的时间如果处理不好,就会让人产生歧义,比如应该是上午9点15分,却显示成下午22点30分。为了在网页上能准确低显示时间,让所有人都不会产生歧义,因此HTML5新增了time元素。time元素可以表示带时区的时间,还可以定义多种格式的日期和时间,代码和效果如图所示:

HTML5中的time元素

3.article元素

    article元素用于定义外部的内容,可以是一篇新的文章、一篇博文、一个帖子、一段评论等等,还可以是来自其他外部源的内容。一个article元素可以有它自己的标题、内容和脚注,还可以与其他的article元素嵌套使用。演例代码如下图所示:

HTML5中的article元素

    在这段代码中,header元素中嵌入了文章的标题部分,p元素嵌入了文章的正文,嵌套的article元素又引用了另外一篇文章,最后在结尾处,footer元素嵌入了一下版权信息。


4.section元素

    section元素定义文档中的节,比如章节、页眉、页脚或文档中的其他部分。一个section元素通常由内容及其标题组成。代码演示如下图:

HTML5中的section元素

    在这段代码中,<h1>元素嵌入了这段文字的标题,<p>元素嵌入了这段文字的正文,标题和正文构成了文档内容一个独立的块,这个快使用section元素表示。

    section元素用于表示文章的段,是一个独立的块,而article元素用于表示文章外部的内容,虽然它也是独立的,请不要把这两者相混淆。比如要在一篇文章中如果需要引用另一篇文章的某些段落时,其代码如下图所示:

HTML5中的section元素

    在比如你要在一个段落中引用一篇文章时,其代码如下图:


5.aside元素

    aside元素用来定义article元素以外的内容,其内容应该与article的内容相关。这样的情况在生活中很常见,像文章中的名词解释。名词解释作为文章中的一部分,其内容与文章相关,所以这种情况下就可以使用aside元素。其代码和效果如下图所示:

aside元素

aside元素

    另外,aside元素的内容还可以用作文章的侧栏,其内容作为文章的附属信息。例如nav元素导航作为aside元素的内容,这样就实现了一个侧边栏导航条。代码及效果图如下:


这些元素就是HTML5元素中新增的主体结构了。我们在学习这些代码的时候一定要勤加练习,这样才能够记住它们。下一期我们介绍HTML5元素中新增的非主体结构。了解更多动态资讯请加我们的官方微信号:pyyuanxing。谢谢大家的观看,祝大家生活愉快、身体健康。

学营销送淘宝大优惠活动!    限20名! 报名从速。

      友情链接

  1. 办公文秘
  2. 美术培训
  3. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 学校图片
  7. 联系方式
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   
电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息 
咨询微信:18926224142   微信公众号:新川教育
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6