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

举报
tea_year 发表于 2021/12/23 00:54:40 2021/12/23
【摘要】 大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下: #nav{ padding: 10px ... }#header{ padding: 10px ... }#footer{ p...

大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下:


  
  1. #nav{ padding: 10px ... }
  2. #header{ padding: 10px ... }
  3. #footer{ padding: 10px ... }

定义完之后呢,我们使用div标签来组织页面结构,如下:


  
  1. <div id="header"></div>
  2. <div id="nav"></div>
  3. <div id="footer"></div>

这样的代码让我们创建了很多的非样式的CSS定义,是的代码结构复杂并且不直观易懂。

在新的HTML5标准中,我们定义了一系列的标签,帮助你更语义化的定义页面层次和逻辑,你不需要自己定义相关的DIV,HTML5提供了现成的标签来完成上述的结构化定义,如下:


  
  1. <header></header>
  2. <nav></nav>
  3. <footer></footer>

使用以上的标签,你只需要在css文件中定义相关的真正的样式信息即可。 

在今天的这篇文章中,我们将介绍相关的基本HTML5标签Header,nav和footer。

header标签

在新的标准中header标签定义如下:

"A group of introductory or navigational aids.”

基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容,也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如:


  
  1. <header>
  2. <h1>HTML5基本标签使用,header,Nav和footer</h1>
  3. <div class="post-meta">
  4. <p>作者信息:gbin1.com</a> <span class="category">文章创建类别:HTML5/CSS3</span></p>
  5. </div>
  6. </header>
  7. <article>
  8. <p>大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分</p>
  9. </article>

在上面的结构中,我们可以看到使用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类似并没有指定必须是主导航,也可以是页面其它部分的子导航。如下:


  
  1. <h3>gbin1.com文章列表</h3>
  2. <nav>
  3. <ul>
  4. <li><a href="#html5">HTML5文章介绍</a></li>
  5. <li><a href="#css3">CSS3文章介绍</a></li>
  6. <li><a href="#jquery">jQuery文章介绍</a></li>
  7. <ul>
  8. </nav>

在上面这个例子中,我们看到这里只是一个区域的文章导航,同样也可以使用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元素代表了页面内容或者区域内容最底端的展示。一个典型的例子是包含了作者信息,文档链接或者是版权信息等等“。

当然,这里我们看到并不局限于整个页面的内容,也可以是一个文章的页尾内容,例如,来源或者是作者信息等等。如下:


  
  1. <footer>
  2. <div class="tags">
  3. <span class="tags-title">相关标签</span> <a href="#" rel="tag">html5</a>, <a href="#" rel="tag">nav</a>, <a href="#" rel="tag">header</a>, <a href="#" rel="tag">footer</a>
  4. </div>
  5. <div class="source">
  6. <div>来源:<a href="http://gbin1.com">html5/css3教程</a></div>
  7. </div>
  8. </footer>

 在上面的例子中,我们定义了一个简单的文章内的页尾信息,可以看到我们添加了来源和相关标签,这在博客类型的网站中经常出现。

总结

相 对于其它的HTML5特性来说,header,nav和footer显得不是那么的酷,当时作为一个前端开发人员来说,如何能够正确的组织页面结构对于一 个逻辑性很强,页面也很复杂的项目来说,意义依旧是非常重大的。希望今天的这篇文章能够帮助大家简单直观的了解这些基本的HTML5标签。

参考:

 

文章来源: aaaedu.blog.csdn.net,作者:tea_year,版权归原作者所有,如需转载,请联系作者。

原文链接:aaaedu.blog.csdn.net/article/details/105954667

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200