首页 > 教程 > 关键词  > HTML5教程最新资讯  > 正文

HTML5/CSS3系列教程:HTML5基本标签使用header nav和footer

2013-01-18 17:25 · 稿源:gbin1.com

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

#nav{ padding: 10px... }

#header{ padding: 10px ... }

#footer{ padding: 10px ... }

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

<div id=“header”></div>

<div id=“nav”></div>

<div id=“footer”></div>

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

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

<header></header>

<nav></nav>

<footer></footer>

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

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

header标签

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

“A group of introductory or navigational aids.”

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

<header>

<h1>HTML5基本标签使用,header,Nav和footer</h1>

<div class=”post-meta“>

<p>作者信息:gbin1.com</a> <span class=”category“>文章创建类别:HTML5/CSS3</span></p>

</div>

</header>

<article>

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

</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类似并没有指定必须是主导航,也可以是页面其它部分的子导航。如下:

<h3>gbin1.com文章列表</h3>

<nav>

<ul>

<li><a href=”#html5“>HTML5文章介绍</a></li>

<li><a href=”#css3“>CSS3文章介绍</a></li>

<li><a href=”#jquery“>jQuery文章介绍</a></li>

<ul>

</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元素代表了页面内容或者区域内容最底端的展示。一个典型的例子是包含了作者信息,文档链接或者是版权信息等等“。

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

<footer>

<div class=”tags“>

<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></div>

<div class=”source“>

<div>来源:<a href=”https://gbin1.com“>html5/css3教程</a></div>

</div>

</footer>

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

一个完整的HTML5页面

在这里我们使用基本的header,nav和footer标签书写了一个响应式的HTML5页面,如果你使用老版本的浏览器,例如IE6,7等等。需要引入相关的js来帮助识别新的元素,当然,你也可以使用下面js代码来简单生成。

/* * 创建HTML5标签 */ document.createElement(”article“); document.createElement(”section“);

具体代码实现,请下载后阅读。这里我们使用了一个前端框架 - Profound Grid ,如果你兴趣可以阅读这篇文章 -响应式网格系统 - Profound Grid。

总结

相 对于其它的HTML5特性来说,header,nav和footer显得不是那么的酷,当时作为一个前端开发人员来说,如何能够正确的组织页面结构对于一 个逻辑性很强,页面也很复杂的项目来说,意义依旧是非常重大的。希望今天的这篇文章能够帮助大家简单直观的了解这些基本的HTML5标签,如果你有任何的 问题或者建议,请在下面给我们留言或者访问极客标签社区提问。如果你对于其它HTML5技术感兴趣,也可以阅读我们的HTML5专题教程。

来源:HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

  • 相关推荐
  • 大家在看
  • TikTok联手Zynga推出一款基于HTML5打造的手机游戏

    眼下,TikTok正在进行游戏试验,它将率先跟手机游戏巨头Zynga展开合作。当地时间周一,Zynga宣布其计划在TikTok平台上独家推出一款基于HTML5的新游戏《Disco Loco 3D》。这款休闲游戏是一款单人无尽跑酷游戏,玩家在挑战朋友的同时要收集自己的舞蹈动作、在走猫步时要避开障碍物并收集奖章,这些跟Zynga的《High Heels》类似。虽然TikTok说这个游戏是为了测试其受众对其应用内的游戏的普遍兴趣,但该公司证实,他们跟其他游戏制造?

  • Chrome为学校推送企业策略补丁 可阻止学生查看HTML源码

    为防止学生在线上测验期间作弊和访问被屏蔽的站点,Chromium 开发团队刚刚更新了 Chrome OS 和浏览器,以允许学校 IT 管理员设置禁止查看 HTML 源代码。作为所有网页编程的基础语言,其在设计之初就考虑到了允许公开访问 Web 服务器提供的 HTML 代码,Chrome、Safari、Firefox 等浏览器也都支持这项功能。一方面,保持 HTML 代码的公开访问,对于标准化、渲染呈现、以及安全性都至关重要,但也有人表达了不同的意见。比如 2021 年

  • 微软警告NOBELIUM攻击技术愈加泛滥 谨防HTML代码夹带恶意软件

    早在 5 月,微软就认定有俄罗斯背景的 NOBELIUM 黑客组织要对持续数月的 SolarWinds 网络攻击事件负责,并同企业、政府和执法机构达成了合作,以遏制此类网络攻击的负面影响。早些时候,微软更进一步地剖析了 NOBELIUM 使用的一套更加复杂的恶意软件传送方法。可知其用于造成破坏,并获得“HTML Smuggling”系统的访问权。HTML Smuggling 技术概览(图自:Microsoft Security)微软表示,HTML Smuggling 是一种利用合法 HTML5 和 J

  • Chrome 97 Beta版发布:初步支持WebTransport 引入CSS媒体查询

    在 Chrome 96 稳定版发布之后,开发团队的重心已经偏移到 Chrome 97 版本中。在今天发布的 Chrome 97 Beta 版本中,最引人注意的是添加了对 WebTransport 的初步支持。WebTransport 是一个类似于WebRTC数据通道的协议框架,但主要是用于受网络安全模型限制的客户端,使用安全、多复式传输与远程服务器进行通信。WebTransport使用HTTP/3协议进行双向传输。与基于TCP的WebSockets不同,WebTransport依赖于类似UDP的数据包和可取消的?

  • 罗德推出AI-Micro新品:为USB-C与Lighting设备提供3.5mm音频转接

    如果你正在使用带有 USB-C 或 Lighting 端口的笔记本电脑 / 智能手机,那罗德(Rode)新推出的 AI-Micro 新品,正好可以极大地缓解你对于 1-2 个有线麦克风的接入需求。此前,该公司已经为 iPhone / iPad 等移动设备推出过类似的设备,iOS / iPadOS 用户或许不会对 Rode SC6-L 的功能设计感到陌生。不同的是,Rode 宣称 AI-Micro 运用了全新的“核心设计”,使之能够借助通用的 USB 输出,搭配更多的设备使用。得益于“增强的麦克?

  • SEO优化,URL突然变成HTTPS,对排名影响大吗?

    很多SEO同行和企业主都非常好奇,为什么我可以每天可以长期输出各种不同的SEO问题,并提供相关的解决方案,实际上,这些问题的来源,都是大量从SEO实战中遇到的。

  • 经历数月测试:苹果终于推出macOS版TestFlight预览

    早在今年 6 月的全球开发者大会(WWDC 2021)上,苹果就首次披露了 Mac 版的 TestFlight 。自那以后,该项目一直处于测试阶段。起初,我们在 8 月份看到了一些即将推出的迹象。当时开发者报告称能够通过 Xcode 13 beta,将 macOS 应用程序的测试版本提交到 App Store Connect 。数月过后,我们终于迎来了 macOS 版 TestFlight 预览。如承诺的那样,TestFlight 现已“正式”登陆 Mac App Store 预览,这也是该公司首次将应用程序测?

  • GM BrightDrop宣布Merchants Fleet加大订购规模:增至1.8万辆

    通用汽车(GM)的BrightDrop为其EV410电动送货车赢得了第二个客户:车队管理公司Merchants Fleet,这家公司周四表示,它已经订购了5400辆中型电动货车。新订单是在Merchants之前承诺购买12600辆BrightDrop旗舰车型EV600货车之外的。现在的总订单达到了18000辆,这是BrightDrop迄今为止接到的最大的客户订单。BrightDrop是GM在2021年初推出的第一英里到最后一英里的业务部门。它是从汽车制造商的内部组织全球创新中分离出来的,该组织

  • Model S Plaid上赛道:轻取宝马M5 CS与凯迪拉克CT5-V Blackwing

    在近日更新的一期油管视频中,Hagerty 将特斯拉 Model S Plaid 电动汽车带到了加利福尼亚州的 Willow Springs 国际赛车场,并与另外两辆速度同样惊人的燃油车展开了一番激烈较量。虽然电动车长期因为扭矩特性强大而被调侃为“无脑直线加速”的首选,但本次实测还是给了宝马 M5CS 和凯迪拉克 CT5-V Blackwing 一个下马威。说到电动汽车,许多人很是担心电池重量和过热,可能导致它无法在其它性能指标上超越传统燃油车型。这么说确实

  • Google Messages新功能:RCS不可用下通过Google Photos发送视频

    科技媒体 9to5Google 最新一期 APK Insight 报告中,对 Android 系统的原生 SMS/RCS 应用进行了逆向编译。Google Messages 即将可能获得一项新功能,让用户在 RCS 不可用的情况下通过 Google Photos 发送视频。Google Messages 10.4 Beta 版本中出现了“Google Photos: Share sharper clarity video in text (SMS/MMS)”的选项。该功能将会出现在该应用的设置菜单中。根据这一设置的描述,收件人可能会收到一个 Google Photos 链接

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天