本文介绍了使用HTML5和jQuery Mobile构建手机登录页面的方法，包括HTML5的新特性、jQuery Mobile的基础知识和简单示例，以及如何利用jQuery Mobile的事件和方法实现页面交互。文中提到，jQuery Mobile提供了一套易于使用的组件，能够使HTML页面更具吸引力，同时提供了Ajax转场等性能优化。此外，文章还给出了一个简单的登录页面示例，涉及页面结构、页面切换和事件监听。
1. html5
HTML5大家早就不陌生了，HTML最新版本，提供了很多富客户端功能支持，但是在台式系统因为受到某些浏览器限制发展缓慢，而移动设备因为没有旧包袱，所有厂家都在向HTML5靠齐，因此移动设备（特别是最新的设备）的浏览器对HTML5支持度非常高。所以大多数智能移动设备上都能跑HTML5应用。
关于HTML5，并不是你想像中的那么神秘。说白了，HTML5功能也是由HTML标签来实现，只是这些标签以前没有出现过，你可以像以前编写普通html页面那样添加上HTML5某些新特性标签，然后在支持HTML5的浏览器（比如chrome）上运行。想比较全面了解HTML5，我建议新手花一两个小时过一遍w3cschool的HTML5教程，非常简洁，但是能让你了解什么叫HTML5
2.jQuery mobile
jQuery Mobile是用于创建移动web应用的前端开发框架，可以使用于智能手机与平板电脑，它使用 HTML5 & CSS3 最小的脚本来布局网页。大家都知道，HTML原生的控件并不是那么“炫”，Jquery Mobile的主要作用之一是帮助不懂UI的开发人员让自己的HTML有“炫”的感觉。另外Jquery Mobile对HTML还提供了一些性能上的优化（比如Ajax转场，提高页面切换速度），并且提供了一些新的js事件供开发者调用。注：Jquery Mobile依赖于Jquery，所以HTML需要引用Jquery。
easyui 中包含easyui.mobile.js 可以很好的设计mobile页面，可以参考http://www.jeasyui.com/demo-mobile/main/index.php 中的demo
Jquery Mobile需要学习的内容蛮多的，我建议新手全面地过一遍Jquery Mobile的教程再做应用，我除了看w3cschool的教程外，还看了这位作者的文章（http://kayosite.com/web-app-by-jquery-mobile-and-html5-directory.html），最近还发现Jquer Mobile中文API网站也很不错。
3. 简单示例
1.随意建一个HTML文件，注意页面头部要有<!DOCTYPE html>标签，页面引用以下三个必备文件（文件位置根据你的HTML相对位置来决定）。
<link rel="stylesheet" type="text/css" href="../style/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../style/mobile.css"> <link rel="stylesheet" type="text/css" href="../style/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.mobile.js"></script>
2.在<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>底部文本
最低0.47元/天 解锁文章
2903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
