移动设备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>

时间: 2024-10-14 11:02:02

移动设备HTML5页面布局的相关文章

html5页面布局总结

先写点题外话吧,算是对最近经历的一个总结.2017年,貌似是个多事之秋啊,工作中遇到些不顺,本来是很美好的愿景,可是现在貌似破灭了,抱着"山重水复疑无路,柳暗花明又一村"的希冀,目前可能也希望渺茫了,没事,工作的事情总能解决的,还是有自身优势的,我相信自己,OK,给自己打气的话就写到这吧. 以前做移动端webapp开发,屏幕比较小,手机都是一个版本一个版本的固定产品,界面布局随便布布,修修改改也就OK了.后来接触PC大屏幕开发,界面元素顿时增加很多,不注重布局就会很慌乱和被动,其实想好

HTML5新结构标签和移动端页面布局

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r

HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

html5 移动端单页面布局

序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ,再通俗的说就是类似于平常的选项卡 但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面 单页面的作用以及优势:    1.嵌套到native里实现app的混合开发    2.数据量小的页面用单页面便于开发    3.无需跳转页面响应更快 Demo效果

HTML5页面开发的基础性模板

分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name=&q

写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

我保证你一分钟就能看完这篇文章! 真的.. 角色解释: 需求方:有钱大爷 设计人员:美工殿下 前端工程师:前端文艺青年 一个HTML5页面从提出到完成上线的流程: 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给予反馈 5.设计人员与H5人员根据反馈进行适当调整 6.发布推广 如何提出一个合理的微信HTML5页面设计诉求? 合理分析诉求与公司团队拥有的资源: 1.需求完成时间: 时间给的越多,项目做的

移动端页面布局

移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C 2.Hybrid App 混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应用 3.Web App 基于Web的app手机应用程序 完全使用html5页面加前端js框架开发的手机应用 二.Viewport视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px

ios标准页面调用HTML5页面

ios原生态页面相对于HTML5页面具有渲染效果好,流畅,省流量的特点,但是比较难实现动态加载多个页面(如支付宝),动态修改页面布局. 我们使用的是WebViewJavascriptBridge这个第三方控件. 下面是一个完整的调用HTML5页面. _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data, WVJBResponseCallback

一步一步构建手机WebApp开发——页面布局篇

继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接上代码 注意:此教程是接上一篇教程,也就是所有的内容是直接从body开始写,当然,也会贴出所有代码给大家. 第一步:框架的布局及幻灯片的布局(Html) ① 如上图所示,我们应该准备以下容器,方便填充内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19