本章介绍两个关键字[HTML5]和[Jquery Mobile]，简单说这两者的关系是：HTML5作为主体，Jquery Mobile在HTML5的基础上对其进行了优化、装饰。
?
- HTML5
HTML5大家早就不陌生了，HTML最新版本，提供了很多富客户端功能支持，但是在台式系统因为受到某些浏览器限制发展缓慢，而移动设备因为没有旧包袱，所有厂家都在向HTML5靠齐，因此移动设备（特别是最新的设备）的浏览器对HTML5支持度非常高。所以大多数智能移动设备上都能跑HTML5应用。
?
关于HTML5，并不是你想像中的那么神秘。说白了，HTML5功能也是由HTML标签来实现，只是这些标签以前没有出现过，你可以像以前编写普通html页面那样添加上HTML5某些新特性标签，然后在支持HTML5的浏览器（比如chrome）上运行。想比较全面了解HTML5，我建议新手花一两个小时过一遍w3cschool的HTML5教程，非常简洁，但是能让你了解什么叫HTML5。
?
?
- JQuery Mobile
jQuery Mobile是用于创建移动web应用的前端开发框架，可以使用于智能手机与平板电脑，它使用 HTML5 & CSS3 最小的脚本来布局网页。大家都知道，HTML原生的控件并不是那么“炫”，Jquery Mobile的主要作用之一是帮助不懂UI的开发人员让自己的HTML有“炫”的感觉。另外Jquery Mobile对HTML还提供了一些性能上的优化（比如Ajax转场，提高页面切换速度），并且提供了一些新的js事件供开发者调用。注：Jquery Mobile依赖于Jquery，所以HTML需要引用Jquery。
?
Jquery Mobile需要学习的内容蛮多的，我建议新手全面地过一遍Jquery Mobile的教程再做应用，我除了看w3cschool的教程外，还看了这位作者的文章，最近还发现Jquer Mobile中文API网站也很不错。
?
?
- 简单示例
首先到jquery mobile官网下载自己需要的版本，默认下载下来的文件包含Jquery Mobile和Jquery的js，同时也提供了很多Demo供参考。
注：*.min.*系列是压缩过的文件，文件大小要比完整源码小很多，应用正式上线时最好用min文件，能够提高页面加载文件效率。
然后随意建一个HTML文件，注意页面头部要有<!DOCTYPE html>标签，页面引用以下三个必备文件（文件位置根据你的HTML相对位置来决定）。
?
<link rel="stylesheet" href="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" type="text/css"> <script src="../scripts/jquery.mobile-1.3.2/jquery.js" type="text/javascript" ></script> <script src="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript" ></script>
?
?
?
在<Body>标签中编写页面元素，跟传统的HTML有所不同的是，jquery mobile把一个<div data-role="page">当做一个页面，在page中可以定义三个主体区：头部header、内容区content和底部footer，一个简单的示例如下。
?
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="content">
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
?
?
?
?
?
前面说了一个<div data-role="page">标签表示一个页面，那么jquery mobile支持一个<body>标签中存在多个page，它们的ID一定要不同，便于区分。页面初次加载时，默认只显示第一个page！而多个页面切换非常简单，只需要在跳转链接中加[#目标page的ID]即可。如下代码实现的功能是：点击[页面②]链接后页面切换到id为pagetwo的页面，然后点击[页面①]，又会回到pageone页面。
?
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">页面②</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">页面①</a>
</div>
</div>
?
?
?
如果要让第二个页面以dialog弹出框的形式显示，则只需要在跳转的<a>标签中增加一个属性[data-rel="dialog"]。不过如果pagetwo只有一个data-role=content内容区的话，弹出框是没有关闭按钮的，所以你需要给pagetwo定义一个header。
?
<div data-role="page" id="pageone">
<div data-role="content">
<p>Welcome!</p>
<a href="#pagetwo" data-rel="dialog">页面②</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1></h1>
</div>
<div data-role="content">
<p>Goodbye!</p>
<a href="#pageone">页面①</a>
</div>
</div>
??
?
?
至于其它jquery mobile控件，这里就不赘述了，大家可以自行去相关教程网站学习了解。
?
下面介绍一点jquery mobile的事件和方法。
?
jquery mobile用得最多的事件恐怕是pageinit，这个是指定page加载完成时调用的。而jquery的ready()反而用得比较少（这个后面章节说）。
?
$(documen
