我是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. 揭秘Windows10 UWP中的httpclient接口[2]

    阅读目录: 概述 如何选择 System.Net.Http Windows.Web.Http HTTP的常用功能 修改http头部 设置超时 使用身份验证凭据 使用客户端证书 cookie处理 概述 ...

  2. 升讯威ADO.NET增强组件（源码）：送给喜欢原生ADO.NET的你

    目前我们所接触到的许多项目开发,大多数都应用了 ORM 技术来实现与数据库的交互,ORM 虽然有诸多好处,但是在实际工作中,特别是在大型项目开发中,容易发现 ORM 存在一些缺点,在复杂场景下,反而容 ...

  3. MapReduce剖析笔记之六：TaskTracker初始化任务并启动JVM过程

    在上面一节我们分析了JobTracker调用JobQueueTaskScheduler进行任务分配,JobQueueTaskScheduler又调用JobInProgress按照一定顺序查找任务的流程 ...

  4. 让tomcat支持中文cookie

    这的确是一个不正常的需求,按照规范,开发者需要将cookie进行编码,因为tomcat不支持中文cookie. 但有时候,你不得不面对这样的情况,比如请求是由他人开发的软件,比如,浏览器控件发出的. ...

  5. ubuntu中查看已有的mysql用户并修改用户名和密码

    你先进入/etc/mysql 然后该目录下会有一个debian.cnf文件,用sudo cat debian.cnf查看里面的内容. 如果用户名为 debian-sys-maint 使用 mysql ...

  6. 【java】jstack

    介绍 jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jsta ...

  7. python中的默认参数

    https://eastlakeside.gitbooks.io/interpy-zh/content/Mutation/ 看下面的代码 def add_to(num, target=[]): tar ...

  8. CodeSmith模板代码生成实战详解

    前言 公司项目是基于soa面向服务的架构思想开发的,项目分解众多子项目是必然的.然而子项目的架子结构种类也过多的话,就会对后期的开发维护产生一锅粥的感觉.为了尽可能的在结构层避免出现这种混乱的现象,我 ...

  9. Log4net入门（SQL篇）

    我们在Log4net入门(回滚日志篇)中详细讲述了如何将日志信息输出到日志文件中,在这一篇中,我们将讲述如何将日志文件写入SQL Server数据库,以方便我们分析统计日志信息. 首先,我们在SQL ...

  10. Android随笔之——Android时间、日期相关类和方法

    今天要讲的是Android里关于时间.日期相关类和方法.在Android中,跟时间.日期有关的类主要有Time.Calendar.Date三个类.而与日期格式化输出有关的DateFormat和Simp ...