1.新增html页面。
2.声明html5Document。
3.载入jQuery Mobile Css、jQuery与jQuery Mobile链接库。
4.使用jQuery Mobile定义的html标准、编写网页架构及内容。
向网页中添加jQuery Mobile,添加方法如下：
从CDN引用jQuery Mobile(推荐)
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js">script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">script>
从jQuerymobile.com下载jQuery Mobile库
从 jQuerymobile.com 下载文件。
<link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js>script> <script src=jquery.mobile-1.3.2.js>script>
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
- data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
- data-role="footer" 创建页面底部的工具栏
在写移动端的网站的时候， 一定要写一个meta的name为viewport的属性， 因为该属性代表着网站页面的自适应。简单的写法为：<meta name="viewport" content="width=device-width, initial-scale=1">代表着网站为驱动设备的宽度。
- width:控制宽度，可以指定一个宽度值，或输入device-width，表示宽度随着设备宽度自动调整
- height:控制高度，或输入device-height。
- initial-scale:初始缩放比例，最小为0.25，最大为0.5。
- minimum-scale:允许用户缩放的最小比例，最小为0.25，最大为0.5。
- maximum-scale:允许用户缩放的最大比例，最小为0.25，最大为0.5。
- user-scalable:是否允许用户手动缩放，可以输入0或者1，也可以是输入yes或no。
代码示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js">script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">script>
head>
<body>
<div data-role="page" >
<div data-role="header">
<h1>我的网站h1>
div>
<div data-role="content">
<p>这是正文部分p>
<ul data-role="listview">
<li data-role="list-divider">我的目标li>
<li><a href="http://www.baidu.com">精彩内容即将呈现a>li>
<li><a href="http://www.baidu.com">百度一下，就知道a>li>
<li><a href="http://www.baidu.com">坚持才能成功a>li>
ul>
div>
<div data-role="footer">
<h1>这个是页脚文本h1>
div>
div>
body>
html>
结果页面：
