HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav
来源:互联网 发布:大数据maven 教程 编辑:程序博客网 时间:2024/06/05 16:19
hgroup
<hgroup> 标签用于对网页或区段(section)的标题进行组合。
<hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2></hgroup><p>The rest of the content...</p>
header
header元素是一种具有引导和导航作用的辅助元素。通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。
我们可以使用该元素来写整个页面的标题部分:
<header> <h1>The most important heading on this page</h1></header>
同一个页面中,每一个内容区块都可以有自己的<header>元素,例如:
<header> <h1>The most important heading on this page</h1></header><article> <header> <h1>Title of this article</h1> </header> <p>...Lorem Ipsum dolor set amet...</p></article>
<header>元素通常包含一个标题标签(h1至h6)或是hgroup。另外,也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片;根据最新的W3C HTML5规范更新,<nav>元素标签也可以在<header>中使用。
footer
footer元素可以作为其直接父级内容区块或是一个根区块的结尾。footer通常包括其相关区块的附加信息,如作者、相关阅读链接以及版权信息等。
过去(及目前),我们通常使用类似下面这样的代码来写页面的页脚:
<div id="footer"> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul><div>
在HTML5中,我们可以不使用div,而用更加语义化的footer来写:
<footer> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul></footer>
在同一个页面中可以使用多个<footer>元素,即可以用作页面整体的页脚,也可以作为一个内容区块的结尾,例如,我们可以将<footer>直接写在<section>或是<article>中:
<section> Section content appears here. <footer> Footer information for section. </footer></section><article> Article content appears here. <footer> Footer information for article. </footer></article>
address
address元素用来在文档中呈现联系信息,包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等;address不只是用来呈现电子邮箱或真实地址这样的“地址”概念,而应该包括与文档创建人相关的各类联系方式信息。
根据以上定义,我们可以使用下面的代码来展示一些志愿者的名字及主页链接:
The HTML5 Doctor is run by the following group of volunteers:<address> <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>, <a href="http://html5doctor.com/author/richc">Rich Clark</a>, <a href="http://html5doctor.com/author/miker">Mike Robinson</a>,</address>
下面是另一个范例,同时还使用到了<footer>及<time> 元素:
<footer> <div class="vcard"> by <address class="author"> <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em> </address> on <time datetime="2009-11-04" class="published updated">November 4th, 2009</time> </div></footer>
如果我们确实需要在页面中显示某些与当前文档创建者联系方式无关的联系人信息,那么可以使用hCard微格式:
<div class="vcard"> <p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p> <p class="adr"> <span class="street-address">HTML5 Hospital</span> <span class="region">Doctorville</span> <span class="postal-code">Postal Code</span> <span class="country-name">Great Britain</span> </p> <p class="tel">+44 (0)XXXX XXXXXX</p></div>
nav
nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用<footer>元素是最恰当的,而不需要<nav>元素。
一直以来,我们都习惯用如下这种方式来定义导航条:
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> </ul></nav>
下面是W3C给出的一个代码示例:
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1> Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <div> <section id="public"> <h1>Public demonstrations</h1> <p> ...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </div> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer></body>
- HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav
- HTML5:新元素之hgroup,header,footer,address,nav
- 新元素之hgroup,header,footer,address,nav
- Html5新增语义结构元素:article section aside nav header hgroup footer time
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
- HTML5学习笔记简明版(2):新元素之section,article,aside
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
- HTML5学习笔记简明版(2):新元素之section,article,aside
- header元素和hgroup元素和footer元素和address元素
- DayDayUp之HTML5学习笔记 二 使用header、aside、section、footer实现一个简单的界面
- 从零开始前端学习[26]:html5的一些常用标签,header,footer,section,aside,figure,figcaption,nav,artical,
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- DayDayUP之HTML5学习笔记 三 article、hgroup、figure、figcaption、dialog标签简单应用
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5新特性-hgroup和address
- 栈实现括号匹配
- java enum(枚举)使用详解 + 总结
- quantity和amount在nopCommerce的Dashboard中的含义!
- 使用DOM解析XML(一)
- S3C6410移植u-boot-2013.01
- HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav
- android Http网络通信方式总结
- (关于编程实现数据的转换)说说 java与c语言的不同之处!!
- Hadoop RPC 源码阅读3
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
- 我常用到的hadoop命令
- HTML5学习笔记简明版(5):input的type超级类型
- Redis]windows下redis的安装和启动
- jquery.validate自定义规则