HTML5技术

移动设备HTML5页面布局 - 柠檬先生

字号+ 作者:H5之家 来源:H5之家 2015-11-28 17:27 我要评论( )

在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。 下面简单介绍一下这个元素: 1.header header元素定义文档的页面组合,通 常是一些引导和导航信息,标签内通常包含 secti- on的头部信

在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。

下面简单介绍一下这个元素:

1.header

header>元素定义文档的页面组合,通 常是一些引导和导航信息,标签内通常包含 secti- on的头部信息,如h1~h6 或 hgroup等。

<header>

  <h1>HTML5布局学习</h1>

  <P>勤学苦练</p>

</header>

与下面的代码是一致的:

<div class=”header”>

  <h1>HTML5布局学习</h1>

  <P>勤学苦练</p>

</div>

2.footer

<footer>元素定义文档或章节的末尾部分 包含一些章节的基本信息,如作者信息,相关连 及版权信息。 一个页面上可以使用多个 header 和footer,也可以插入一些别的元素,比如div ul 等。

<footer>

  <p>隐私信息</p>

  <p>关于我们</p>

</footer>

3.nav

<nav>元素用于定义构建导航,显示导航 链接,用于放入一些当前页面的主要导航链接。

<footer>

  <nav>

    <ul>

      <li>隐私信息</li>

      <li>版权信息</li>

      <li>关于我们</li>

      <li>联系我们</li>

    </ul>

  </nav>

</footer>

4.aside

<aside>元素用于定义一个页面的区域, 用来表示包含页面相关的主要内容,用于装载非 正文的主要内容,如广告栏,侧边栏等。

5.article

  <article>元素表示文档,页面,用来显示一块独立的文章内容,如一则网站新闻,一偏博客文章等。

  <article>

    <header>

      <h1>HTML5新元素</h1>

      <p>article 新元素</p>

      <footer>

        <ul>

          <li>文章标签1</li>

          <li>文章标签2</li>

        </ul>

      </footer>

    </header>

  </article>

6.section

   <section>元素第一位文章中的节,比如章节,页眉,页脚。

  <article>

    <section>

      <h1></h1>

      <p></p>

    </section>

    <section>

      <h1></h1>

      <p></p>

    </section>

  </article>

7.hgroup

  <hgroup>定义为对网页或区段的标题元素进行组合,通常使用多级别的h1~h6标签节点进行分组。

  <header>

    <hgroup>

        <h1></h1>

        <h2></h2>

    </hgroup>

  </header>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    2017-05-02 12:04

  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

网友点评
s