<!DOCTYPE html>
<html>
<head>
<title>稆糨孝汶;jQuery Mobile 基本页面结构</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a
3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></scrip
t>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobil
e-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Content goes here</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
代码说明
要使用 jQuery Mobile，首先需要在开发的界面中包含如下3 个内容：
CSS 文件jquery.mobile-1.0a3.min.css
jQuery 类库文件 jquery-1.5.min.js
jQuery Mobile 文件 jquery.mobile-1.0a3.min.js
在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN 方式，开发人员也可以下
载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在 div 标签中并在标签中加入data-role=”page”属性。
这样 jQuery Mobile 就会知道哪些内容需要处理。
说明：data-属性是HTML5 新推出的很有趣的一个特性，它可以让开发人员添加任意属性
到html 标签中,只要添加的属性名有“data-”前缀。
在”page”div 中，还可以包含”header”， ”content”， ”footer”的div 元素,这些元素都是可选
的，但至少要包含一个 “content”div。
jQuery Mobile 入门：
使用 jQuery Mobile 的第一步，先创建一个html 页面，并在head 标签中加入以下内容：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.
min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script
>
正如你在代码中看到的，jQuery Mobile 是jQuery 的一个扩展。目前来说，压缩后的jQuery
Mobile 仅12Kb。
在创建第一个 jQuery Mobile 页面时你需要创建三块基本内容，下面的推荐模版展示了这一
过程，你可以在未来的项目中使用它：
在 head 标签内填写：
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-sc
ale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.
min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script
>
在 body 标签内填写：
<div data-role="page">
<div data-role="header"><h1>Page Title</h1></div><!-- /header -->
<div data-role="content"><p>Page content goes here.</p></div><!-- /content -->
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer -->
</div><!-- /page -->
![开发HTML5网站：[1]基本页面结构](https://exp-picture.cdn.bcebos.com/b666b2530688912ceb296d5b1b4800fc76f7977a.jpg)
在模版中有些地方值得我们注意。首先是DIV 元素的使用，我们知道，既然HTML5 在移动
设备中如此流行，为什么不使用HTML5 的header, article, section, footer 标签元素呢？这
是因为较老的智能手机浏览器无法明白新的HTML5 元素。在某些情况下，例如windows
phone 上老版本的IE 会出现一个bug 使得无法加载页面的css。而DIV 元素却被广泛支持。
此时你已经可以保存你的网页并在浏览器中查看了，这些代码同样可以在桌面浏览器中正常
工作。我推荐你使用Chrome 来进行本地测试。要在真实环境测试，你就需要相应移动设
备了。