我是html5初学者，最近闲来无事，和各位一起学些下html5.

开发环境 jdk1.6,tomcat6,开发工具eclipse.

新建一个web工程，创建一个index.jsp页面。页面代码如下。

一般页面设计分为头(header)、体(content)、尾(footer)三个部分。

<!DOCTYPE html><!-- html5标识 -->

<html>

<head>

<meta charset="UTF-8">     <!-- 中文乱码处理 -->

<!--每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机-->  
        <meta name="viewport" content="width=device-width, initial-scale=1">

<!--相关jquery mobile框架的css和js的引入-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />    
           <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>    
           <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>

<body>

<!-- 页面结构 -->

<div data-role="page" id="firstExample">

<div data-role="header">

<h1>页面头部</h1>

</div><!-- /header -->

<div data-role="content">

<p>页面内容</p>

</div><!-- /content -->

<div data-role="footer">

<h4>页面底部</h4>

</div><!-- /footer -->

</div><!-- /page -->

</body>

</html>

打包发布，打开手机浏览器，访问。注：我的手机和pc机器在同一个无线网络。

html5页面结构的更多相关文章

  1. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  2. [HTML/HTML5]3 页面结构

    在HTML5之前,主要的容器元素是div元素,但在HTML5中提供了数种其它容器元素供我们使用. 因此,当组织Web页面结构时,首先使用HTML将内容分成多部分,然后在对其使用CSS应用样式和格式. ...

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

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  4. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  5. html5新结构标签

    html5新结构标签 <header>  定义 section 或 page 的页眉,也就是定义头部的标签. <footer> 定义 section 或 page 的页脚. & ...

  6. 前端HTML之页面结构

    前端工作一年了,期间由于工作需要,也做了一些产品的设计,因为自己的目标就是做编程,所以婉拒了与产品相关的一些任务,打算主要把精力放到编程这方面. PS:2015年1月进军编程行业. 废话不多讲,这一年 ...

  7. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  8. 【转】移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  9. 移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

随机推荐

  1. Entity Framework 与 面向对象

    说要分享,我了个*,写了一半放草稿箱了两个星期都快发霉了,趁着周末写完发出来吧. 文章分为五部分: 基础.类讲述的是用到的一些EF与面向对象的基础: 业务是讲怎么划分设计业务: 设计模式和工作模式讲述 ...

  2. Entity Framework 6 Recipes 2nd Edition（9-3）译->找出Web API中发生了什么变化

    9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Fri ...

  3. Spring学习记录(十二)---AOP理解和基于注解配置

    Spring核心之二:AOP(Aspect Oriented Programming) --- 面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软 ...

  4. 二、Redis基本操作——String(实战篇)

    小喵万万没想到,上一篇博客,居然已经被阅读600次了!!!让小喵感觉压力颇大.万一有写错的地方,岂不是会误导很多筒子们.所以,恳请大家,如果看到小喵的博客有什么不对的地方,请尽快指正!谢谢! 小喵的唠 ...

  5. 【Win 10应用开发】分阶段进行数据绑定

    使用x:Bind扩展标记进行数据绑定,是在编译阶段完成,至于说性能优化方面,大概主要是优化CPU资源的使用,因为免去了运行阶段进行绑定的过程.当然,使用这个标记仅仅是绑定上的优化,并不包括数据源.数据 ...

  6. 4. SVM分类器求解(2)

    最优间隔分类器(optimal margin classifier) 重新回到SVM的优化问题: 我们将约束条件改写为: 从KKT条件得知只有函数间隔是1(离超平面最近的点)的线性约束式前面的系数,也 ...

  7. Android动画效果之Property Animation进阶（属性动画）

    前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...

  8. 1Z0-053 争议题目解析

    1Z0-053 争议题目解析 Summary 题目NO. 题目解析链接地址 题库答案 参考答案 考查知识点  24 http://www.cnblogs.com/jyzhao/p/5319220.ht ...

  9. 【Android】 context.getSystemService()浅析

    同事在进行code review的时候问到我context中的getSystemService方法在哪实现的,他看到了一个ClipBoardManager来进行剪切板存储数据的工具方法中用到了cont ...

  10. 在 Windows Phone 中，为 Grid 添加 Tilt 效果

    在 Windows Phone 中,Tilt 效果是比较经典的效果,我们可以很简单的为按钮等控件添加这样的效果(使用 Windows Phone Toolkit 的Tilt 效果),但是,如果我们想要 ...