HTML5移动Web开发(二)——配置移动开发环境以及简单示例

一、准备

1.配置本地网络服务。对于Windows、Mac和Linux,最容易的方法是使用免费的XAMPP软件:http://www.apachefriends.org/en/index.html

  XAMPP下载:http://pan.baidu.com/s/1nt2APCH  提取码:94ui

  XAMPP安装和配置:http://jingyan.baidu.com/article/48a42057bda4d0a9242504b8.html

  XAMPP使用教程:http://wenku.baidu.com/link?url=XZUnoux92TbXzs96DrKMzQwY87mnA4HS9kfJipxlsHDmQy5ZCHnXPeldDs41ShB8YlJs4m0fD6E_rb4Vc31NPHAsjCFoTx93L09WeZyfn8W

  你的站点的根目录为xampp目录下的htdocs文件夹。你可以在htdocs目录下创建任意一个站点。例如将test.html放在\xampp\htdocs\new路径下,你就可以在浏览器的地址栏中输入localhost/new/test.html来访问这个文件。

2.确认你有无线网络。

3.同时你需要一个移动设备,或者是移动设备的仿真器、模拟器。

4.确保你的设备和电脑在同一个无线网络中。

二、实践

1.在你的本地服务器根目录中创建一个HTML文件并命名为ch01e1.html,在其中输入如下代码:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
        <header>
            Main navigation here
        </header>
        body content here.
        <footer>
            Footer links here
        </footer>
    </body>
</html>

2.获取你的IP地址,把它输入到移动浏览器的URL地址栏,然后你就可以看见页面加载成功并且显示如图所示的文字。

同一个局域网中,你的移动设备可以通过IP地址以访问桌面电脑作为主机的服务器。

使用桌面版Safari测试(如果你的主要用户使用iPhone和移动版Safari,在桌面上测试可以节省很多时间)

时间: 2025-01-02 01:14:07

HTML5移动Web开发(二)——配置移动开发环境以及简单示例的相关文章

二、web.xml文件配置 - java开发企业级权限管理系统

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.x

IIS服务器 远程发布(Web Deploy)配置 VS2010 开发环境 Windows Server 2008服务器系统

sp.net 网站有三种常用的发布方式:分别是拷贝开发机上发布好的文件到服务器硬盘上.打包成安装程序到服务器上安装.通过Visual Studio 开发平台远程发布到服务器. 在asp.net网站的开发阶段,经常需要将系统发布到开发者所在局域网的服务器上,供客户和项目负责人预览.之前都是在开发机上发布好之后再拷贝到服务器上部署,因为开 发阶段系统的更新很快,每次都拷贝文件很麻烦.于是开始研究VS2010发布到远程IIS服务器的方法,经过在网上查找相关资料和亲身实践成功的在Windows Serv

Linux环境下proc的配置c/c++操作数据库简单示例

在虚拟机上装了oracle11g数据库,原本想利用c/c++学习操作数据库.结果感觉摊上了一个大坑.从安装好oracle数据库到配置好proc的编译选项整整花了二天.但让我意识到自己自己几点薄弱:1.对Linux的命令和脚本的使用不够数量.2.对Linux的个文件夹的作用不够了解;(打算下次补充一篇这样的总结博客.)3.英文还是很差劲的我.好如真题. 由于我引进配置好了,不想在折腾了,所以就没有在重现错误,只是说一下思路和配置文件的内容. 1.oracle用户根目录下的.bash_profile

heartbeat安装配置及httpd高可用简单示例

注意事项: 1.节点名称:hostname./etc/hosts 2.ssh互信 3.节点时间同步 heartbeat的三个配置文件: authkeys:通信密钥文件 ha.cf:heartbeat服务配置文件 haresources:资源管理配置文件 安装配置(系统为CentOS6.5): WAN IP:192.168.101.168 node1:192.168.101.21 node2:192.168.101.22 1.配置node1.node2节点名称.ssh互信.时间同步 node1:

【转】ubuntu下安装eclipse以及配置python编译环境

原文网址:http://blog.csdn.net/wangpengwei2/article/details/17580589 一.安装eclipse 1.从http://www.eclipse.org/downloads/index-developer.php?osType=linux&release=undefined下载linux版本的eclipse 2.使用sudo tar xvfz eclipse-jee-galileo-SR2-linux-gtk.tar.gz  -C /opt,解压

html5移动web开发实战必读书记

原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mobilexweb.com/emulators https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators 2.html5 DTD <!doctype html> <meta charset=

web前端之html5开发中常用的开发工具

正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下: 一.HTML5全栈开发工具之Adobe Dreamweaver 首先是大名鼎鼎的Adobe Dreamweaver,Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站.由于同新的 Adobe CS Live 在线

【html5移动web开发】关于移动端开发

1.Google Analytics分析工具的使用:注册后页面中加入Google Analytics的代码,可以分析出有哪些设备在访问网站或者哪些页面访问量比较大. 2.Modernizr 可以检测浏览器对html5元素的支持性.可以判断是否支持localstorage等等 3.html5元素在旧版本的IE浏览器下显示为块级元素   article,aside,nav,section{ display:block;} 4.PC端采用固定布局与流体布局,而在移动网站中我们始终使用流体布局,它可以使

java web开发(二) 接口开发

java web开发(一) 环境搭建讲解了如何搭建基础项目,如果你还没了解,可以先去看看!今天我们就来看看接口的开发,打算使用比较古老的或者说比较原始方法实现的接口. 一.数据库设计. 我打算做一个简单的学生信息管理系统,数据库名为students_manage,并且先设计一张学生表,表名为student. 1.打开Sqlyong工具,如果还没创建连接,可以点击新建,输入名称,点击确定即可, 2.然后在保存的连接中选择,刚刚新建的连接,只需要在密码输入框中输入,安装数据库时的设置的密码,点击连接