• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5学习笔记简明版(3):新元素之hgroup,header,footer

HTML5学习笔记简明版(3):新元素之hgroup,header,footer

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,新元素,hgroup等相关知识,匿名希望在学习及工作中可以帮助到您

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 demonstration
  


 

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03h5的组织内容如何使用
  • 2018-12-03几个解决兼容IE678不支持html5标签的几个方法_html5教程技巧
  • 2017-08-06关于HTML5的22个初级技巧(图文教程)
  • 2018-12-03H5在Canvas中实现自定义路径动画
  • 2018-12-03pushstate、popstate操作url的方法
  • 2018-12-03HTML5新增的8类INPUT输入类型介绍_html5教程技巧
  • 2018-12-03HTML5拖拉上传文件的示例代码分享
  • 2018-12-03Html5 audio标签样式的修改 _html5教程技巧
  • 2018-12-03浅谈H5的data-*中容易被忽略的一个小问题
  • 2017-08-06HTML5-WebSocket实现聊天室示例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何快速开发多端应用?
    • HTML5 虚拟键盘出现挡住输入框的解决办法
    • HTML块级标签汇总(小篇)
    • HTML5+CSS3应用详解
    • HTML5不支持标签和新增标签详解
    • HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)
    • HTML5 学习FileReader接口代码实例分享9(图)
    • 深入探究HTML5的History API
    • HTML5 Canvas绘制圆点虚线实例_html5教程技巧
    • html标签之Object和EMBED标签详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有