我是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. hibernate一对一主键单向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  2. Atitit ABI FFI 的区别与联系 attilax总结

    Atitit ABI FFI 的区别与联系 attilax总结 FFI stands for Foreign Function Interface. A foreign function interf ...

  3. [转]Linux下g++编译与使用静态库(.a)和动态库(.os) (+修正与解释)

    在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较熟悉,但是,在linux环境下,则是另一套模式,对应的静态库 ...

  4. npm常用命令

    npm常用命令 环境:win7 npm 是什么 NPM(node package manager),通常称为node包管理器.顾名思义,它的主要功能就是管理node包,包括:安装.卸载.更新.查看.搜 ...

  5. 升级xcode8 之后遇到的一些问题

    昨天趁着快下班,就将xcode升级为8了,运行起来并没有什么问题,今天一早过来运行,结果,模拟器打不开了.... 1. unable to boot the Simulator 解决办法:重启Mac时 ...

  6. ASP.NET Core中的依赖注入（3）: 服务的注册与提供

    在采用了依赖注入的应用中,我们总是直接利用DI容器直接获取所需的服务实例,换句话说,DI容器起到了一个服务提供者的角色,它能够根据我们提供的服务描述信息提供一个可用的服务对象.ASP.NET Core ...

  7. 从零开始编写自己的C#框架（14）——T4模板在逻辑层中的应用（三）

    原本关于T4模板原想分5个章节详细解说的,不过因为最近比较忙,也不想将整个系列时间拉得太长,所以就将它们整合在一块了,可能会有很多细节没有讲到,希望大家自己对着代码与模板去研究. 本章代码量会比较大, ...

  8. 【分布式】Zookeeper数据与存储

    一.前言 前面分析了Zookeeper对请求的处理,本篇博文接着分析Zookeeper中如何对底层数据进行存储,数据存储被分为内存数据存储于磁盘数据存储. 二.数据与存储 2.1 内存数据 Zooke ...

  9. Python基础（一）

    本章内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.pyc文件.脚步传入参数.变量.输入.流程控制与缩进.while循环) 练习题 Python 的种类 Cpyt ...

  10. Python爬虫小白入门（二）requests库

    一.前言 为什么要先说Requests库呢,因为这是个功能很强大的网络请求库,可以实现跟浏览器一样发送各种HTTP请求来获取网站的数据.网络上的模块.库.包指的都是同一种东西,所以后文中可能会在不同地 ...