专栏首页柠檬先生移动设备HTML5页面布局

移动设备HTML5页面布局

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Extjs form 组件

    1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关...

    用户1197315
  • Reactjs 入门基础(一)

    实例中我们引入了三个库: react.min.js 、react-dom.min.js 和 browser.min.js:   1,react.min.js ...

    用户1197315
  • NEC 工程师规范

    工程师规范 - 开发准备 了解产品和设计 参加需求、交互、视觉会议,了解产品设计和项目成员。 了解产品面向的设备和平台。 了解产品对兼容性的要求以及是否采用响应...

    用户1197315
  • React第三方组件1(路由管理之Router的使用④按需加载-上)

    本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

    前端人人
  • React 学习:综合实例-留言本

    版权声明:欢迎关注博主公众号:矿洞程序员 https://blog.csdn.net/qq_...

    爱明依
  • 多平面图像的单视图合成(CS CV)

    最近在视图合成方面的一项工作是在已知的视点上通过给定两个或更多的输入图像,利用深度学习来生成多平面图像(以相机为中心的分层三维展示)。我们将这种表示方法应用于单...

    刘持诚
  • 矩阵求导与实例

    缘由 布局 求导的类别 从简单的例子说起 实例 SVM的对偶形式转换 Soft-SVM对偶形式转换 线性回归 logistic回归 参考资料 缘由 机器学习的很...

    用户1147754
  • 关于python开发CRM系统

    注意本项目是针对培训学校开发简化的CRM CRM简介 CRM全称:customer relationship management 无CRM的痛点 没有CMR的...

    coders
  • 云计算解决方案供应商分类大全

    尽管以Amazon为代表的互联网公司在云计算市场上屡获大单,但很多企业却出于安全、成本的考虑,依然选择自建私有云。那么,在上百家云计算解决方案供应商面前,企业该...

    静一
  • 小鱼易连:开放SDK,打造视频行业的“特斯拉”

    小鱼易连在北京成功举办了“AI小鱼,赢视界——2018全球合作伙伴大会”,全球范围内超过500家核心伙伴参与本次会议。小鱼易连董事长兼CEO袁文辉发表了以“AI...

    BestSDK

扫码关注云+社区

领取腾讯云代金券