HTML5基本标签使用header、nav和footer-Html5-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝32
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:227回复:0

HTML5基本标签使用header、nav和footer

楼主#
更多 发布于:2016-06-10 20:10

  咱们也许都知道html5中呈现了许多以前没有的标签,例如,header,nav,和footer,在这之前咱们假如开发有关的页面规划的时分,通常都是运用CSS来界说有关的头部,导航及其页底有些,如下:
#nav{ padding: 10px ... }
#header{ padding: 10px ... }
#footer{ padding: 10px ... }
界说完以后呢,咱们运用div标签来安排页面构造,如下:
这么的代码让咱们创立了许多的非款式的CSS界说,是的代码构造杂乱并且不直观易懂。
在新的HTML5规范中,咱们界说了一系列的标签,协助你更语义化的界说页面层次和逻辑,你不需要自个界说有关的DIV,HTML5供给了现成的标签来完结上述的构造化界说,如下:
运用以上的标签,你只需要在css文件中界说有关的真实的款式信息即可。
在今日的这篇文章中,咱们将介绍有关的根本HTML5标签Header,nav和footer。
header标签
在新的规范中header标签界说如下:
"A group of introductory or navigational aids.”
根本意思是“一组介绍性的护着导航有关的辅佐内容”。字面上理解header标签不单单只是界说页头内容,也能够界说页头以下其它内容的介绍。这和咱们传统的页面header界说并不完全一致。例如:
HTML5根本标签运用,header,Nav和footer
作者信息:gbin1.com 文章创立种类:HTML5/CSS3
咱们也许都知道HTML5中呈现了许多以前没有的标签,例如,header,nav,和footer,在这之前咱们假如开发有关的页面规划的时分,通常都是运用CSS来界说有关的头部,导航及其页底有些
在上面的构造中,咱们能够看到运用header咱们界说了一篇文章的标题和内容。这儿header标签的运用并不是页面的页头,而是文章的页头。
所以在HTML5中,header的运用愈加灵敏,你能够依据你的需要来界说和安排document构造。
Nav标签
Nav标签全称navigation,望文生义,是导航的意思。依据HTML5的有关规范界说如下:
"A section of a page that links to other pages or to parts within the page:
a section with navigation links."
中文翻译大约意思是”页面中的一个用来连接到其它页面或许当前页面的区域:一个含有导航连接的区域”。
这儿十分明白的界说了nav标签的功能,这儿和header相似并没有指定必须是主导航,也能够是页面其它有些的子导航。如下:
gbin1.com文章列表
HTML5文章介绍
CSS3文章介绍
jQuery文章介绍
在上面这个比如中,咱们看到这儿只是一个区域的文章导航,相同也能够运用nav界说一个小型的页面内导航。
Footer标签
最终一个即是footer标签,即,页底标签。运用这个标签你能够界说页面的低端构造,当然,和上面咱们介绍header标签或许nav标签一样,它并不是只是运用在悉数页面的页尾处。有关的HTML5规范界说如下:
“The footer element represents a footer for its nearest ancestor sectioning
content or sectioning root element. A footer typically contains information
about its section such as who wrote it, links to related documents, copyright
data, and the like.”
中文意思是:”footer元素代表了页面内容或许区域内容最底端的展现。一个典型的比如是包含了作者信息,文档连接或许是版权信息等等“。
当然,这儿咱们看到并不局限于悉数页面的内容,也能够是一个文章的页尾内容,例如,来历或许是作者信息等等。如下:
有关标签 html5, nav, header, footer
来历:html5/css3教程
在上面的比如中,咱们界说了一个简略的文章内的页尾信息,能够看到咱们添加了来历和有关标签,这在博客类型的网站中经常呈现。
总结
相 关于其它的HTML5特性来说,header,nav和footer显得不是那么的酷,其时作为一个前端开发人员来说,怎么能够准确的安排页面构造关于一
个逻辑性很强,页面也很杂乱的项目来说,意义依旧是十分严重的。期望今日的这篇文章能够协助咱们简略直观的了解这些根本的HTML5标签,假如你有任何的
疑问或许主张,请在下面给咱们留言或许访问 极客标签社区 发问。假如你关于其它HTML5技能感兴趣,也能够阅览咱们的 HTML5专题教程 。





优质IT资源分享社区为你提供此文。 [font=Tahoma  ]
本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。 [font=Tahoma  ]
WEB前端开发教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客