HTML5学习笔记简明版（3）：新元素之hgroup,header,footer-H5教程-PHP中文网

首页

web前端

H5教程

HTML5学习笔记简明版（3）：新元素之hgroup,header,footer

黄舟

Jan 21, 2017 pm 04:34 PM

hgroup

d8eccd9ed644b68a6460a2bb84548c82 标签用于对网页或区段（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>

同一个页面中，每一个内容区块都可以有自己的1aa9e5d373740b65a0cc8f0a02150c53元素，例如：

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

1aa9e5d373740b65a0cc8f0a02150c53元素通常包含一个标题标签(h1至h6)或是hgroup。另外，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片；根据最新的W3C HTML5规范更新，c787b9a589a3ece771e842a6176cf8e9元素标签也可以在1aa9e5d373740b65a0cc8f0a02150c53中使用。

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>

在同一个页面中可以使用多个c37f8231a37e88427e62669260f0074d元素，即可以用作页面整体的页脚，也可以作为一个内容区块的结尾，例如，我们可以将c37f8231a37e88427e62669260f0074d直接写在2f8332c8dcfd5c7dec030a070bf652c3或是23c3de37f2f9ebcb477c4a90aac6fffd中：

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

下面是另一个范例，同时还使用到了c37f8231a37e88427e62669260f0074d及46dd80ba616c57a652514755c74c4211 元素：

<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元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进c787b9a589a3ece771e842a6176cf8e9元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用c37f8231a37e88427e62669260f0074d元素是最恰当的，而不需要c787b9a589a3ece771e842a6176cf8e9元素。

一直以来，我们都习惯用如下这种方式来定义导航条：

<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的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越基础：H5代码中的高级技术May 02, 2025 am 12:03 AM

H5的高级技巧包括：1.利用进行复杂图形绘制，2.使用WebWorkers提升性能，3.通过WebStorage增强用户体验，4.实现响应式设计，5.利用WebRTC实现实时通信，6.进行性能优化和最佳实践。这些技巧帮助开发者构建更动态、互动和高效的Web应用。

H5：网络内容和设计的未来May 01, 2025 am 12:12 AM

H5（HTML5）将通过新元素和API提升网页内容和设计。1）H5增强了语义化标记和多媒体支持。2）它引入了Canvas和SVG，丰富了网页设计。3）H5的工作原理是通过新标签和API扩展HTML功能。4）基本用法包括使用创建图形，高级用法涉及WebStorageAPI。5）开发者需注意浏览器兼容性和性能优化。

H5：网络开发的新功能和功能Apr 29, 2025 am 12:07 AM

H5带来了多项新功能和能力，极大提升了网页的互动性和开发效率。1.语义化标签如、增强了SEO。2.多媒体支持通过和标签简化了音视频播放。3.Canvas绘图提供了动态图形绘制工具。4.本地存储通过localStorage和sessionStorage简化了数据存储。5.地理位置API便于开发基于位置的服务。

H5：HTML5的关键改进Apr 28, 2025 am 12:26 AM

HTML5带来了五个关键改进：1.语义化标签提升了代码清晰度和SEO效果；2.多媒体支持简化了视频和音频嵌入；3.表单增强简化了验证；4.离线与本地存储提高了用户体验；5.画布与图形功能增强了网页的可视化效果。

HTML5：标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等，提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage，支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性，简化处理和验证。