html5制作手机端页面,手机页面制作教程

现在很多手机页面都是用html5制作，html5有什么优势？

"对于用户来说，html5提高了用户体验，加强了视觉感受。

1、HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。

2、HTML5的视音频新技术解决了移动端苹果和安卓4.0+，对flash的支持问题。在视音频方面，性能表现比flash要更好。

3、网页表现方面，HTML5中的CSS3特效样式、Canvas、webgl的介入，不仅加强了网页的视觉效果，甚至能够使用户在网页当中看到三维立体特效。

4、另外其跨平台的特点，可以避免传统移动终端上的Native App，开发者必须针对不同的操作系统进行研发工作的弊端，从时间和资金成本上讲远小于跨系统移植。

而且html5的语言简单，容易学习。

现在国内已经出现一批html5页面制作平台，让不懂编程的用户也能自己制作。国内制作html5页面的平台出名的有maka.im和vxplo，maka.im通过选择模板，添加效果、图文即可完成制作，vxplo界面类似于photoshop，个性化程度高，但是操作比较复杂。"

相关问答

Q1: 我想做一个动态的手机网页，能用什么做？是用HTML5做

1、首先，我们创建一个移动APP项目，然后，添加一个index.html页面。代码里，添加一个图标，以及添加引入一个JS文件，该文件的作用在于：请求后台JS文件。

2、接下来，我们看看service.js文件是如何请求后台JS文件的。编写该service.js文件的重点是：A、如何异步请求后台JS文件；B、请求回来的后台文件，如何动态添加到页面的Head里。

3、紧接着，我们对APP项目进行打包操作：选择需要的打包类型，然后，填写相应的证书信息。如果选择IOS打包，请在打包证书里，添加需要安装的苹果手机UDID（未提供UDID，则不能安装APP)。

4、打包完成后，便可以下载安装APP。先用苹果手机连接电脑，然后通过工具安装APP。当然，这种连接数据线安装的方式，只能适合个人测试使用。如果想给别人批量安装测试，请参考《HTML5 APP开发之APP测试》经验。

1HTML5 APP开发之APP测试

5、APP安装完成后，我们看看打开APP现有的效果是怎样的。我们看到APP页面的左上角，显示了一个联系人的图标。

6、由于菜果手机不同系列的屏幕大小不一样，而且屏幕的分辨率也不一样【安桌手机的也一样】。导致同一个页面布局，在不同的手机上，显示的位置有时偏差比较大，有时也好。当然，这也加大了开发和测试的难度。不可能因一些位置问题，就重新发布APP。下面是苹果手机不同系列的屏幕大小分辨率说明：

7、所以，才有了动态调试页面布局的想法。回到第二步，我们是有请求后台JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何编写的：A、首先判断手机操作系统类型；B、判断屏幕大小。

8、添加了showJSPage.js代码后，启动后台服务。然后，关闭原来打开的APP软件，再重新打开APP软件，便可查看修改后的效果。

9、整个方案的理解重点在于：熟悉JS执行的先后顺序，以及对手机屏幕大小与屏幕分辨率的关系。才能灵活运用，达到自己想要的目的。

Q2: 怎么制作html5手机页面？?

1、学html5，然后自己编程，如果有html的基础，其实不会太难；

2、去html5页面制作平台，如vxplo、wix、maka.im都可以做html5的手机页面，不过wix现在没有中文网站；vxplo功能很齐全，但同时操作很复杂，一般人不会使用；maka.im通过模板组合、添加图文的方式制作，适合刚入门的同学。

Q3: html5如何开发手机端页面？谁有好的教程

web方式的手机应用那，我理解一种是纯Web的，其实就是设计在手机浏览器里面用的Web应用，这种应用，以前是WAP方式。现在智能手机流行以后，手机计算能力增强，所以在手机里面开始跑HTML页面，而且很多手机浏览器比较激进，开始支持HTML5，这样的话，其实你可以理解为在手机屏幕大小的屏幕上设计HTML5页面应用，由于屏幕大小不一样的原因，有个响应式设计的问题，还有一种叫hybrid（混合动力）应用，这种东西，外表看来是独立的手机APP，但里面的主界面其实是用Web页面实现的，在外面套个手机浏览器框架的壳儿，就成了手机APP应用，这种东西有很多框架可用，你在框架下设计页面，然后框架把你页面打包成手机应用，著名的框架比如：PhoneGap。

Q4: html5做手机app和做手机网页一样吗

不一样，需增加自适应标签来保持一样。

代码如下：

meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/

解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。

扩展资料：

HTML5的事件属性和异常处理

事件属性

HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。

HTML 5 中的新事件属性：

onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。

Q5: 怎么用html5开发app页面

可以通过webview方式访问远程，也可以把html5页面放在手机app端，本地方式进行访问。但都离不开webview。

HTML5现在现成的框架比较多，photogap,jquery mobile,bootstrap等都可以，如果功能简单，也可以不使用框架，自己写几个html5页面就行了。