使用 html5 开发一个动态网站方法：
工具/原料
HBuilder6.6
MUI2.5
方法/步骤
为了演示HTML5 APP页面是如何做到动态调整布局。
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执行的先后顺序，以及对手机屏幕大小与屏幕分辨率的关系。才能灵活运用，达到自己想要的目的。
HTML5混合式开发优点：1、 代码简洁
HTML5网页的冗余代码比传统网页要少很多，极大方便了程序员和用户。
2、全新的标签，网站定义更丰富
相对于旧版本的HTML，HTML5新增了很多语义标签，网站定义起来更为细致。
3、网站优化更简单
HTML5的全新标签对搜索引擎友好，对网站优化来说更为方便。
4、用户体验度好
网站各种酷炫的效果利用HTML5技术都能实现，而且HTML5正以前所未有的姿态颠覆这人们对网页设计的想象。
5、拓展用户浏览渠道
HTML5技术对用户是十分友好的，能支持多终端自适应，无论用户喜欢用手机平板还是电脑看网站，HTML5网站都能满足。
6、支持网站多媒体元素
以前的网站，过多的图片和视频不仅拖慢网站加载速度，对搜索引擎收录也是很不利的。有了HTML5技术，大家可以随意在网站上添加各种多媒体元素，完全不受限制。
7、可移植性好
一套完整的HTML5对开发者来说可以适用于多个设计，不用重新修改。
8、开发费用相对较低
由于HTML5网站的兼容性好，用户开发一个网站后就不用另外开发移动站，一定程度上节省了大笔资金。
9、大势所趋
HTML5技术是网站建设的未来，越来越多的国内网站开始打造自己的HTML5响应式网站，包括简书、新浪、三星、华为等品牌都加入了HTML5网站的建设大军中，企业建设HTML5网站是顺应未来的做法。
现在以HBuilder工具编写为例：
1. 打开此工具，在项目管理器中右键单击创建一个web 项目
2.右键单击项目名称，新建一个HTML文件----form01.html
<!DOCTYPE html>
<!--
作者：offline
时间：2017-01-06
描述：form表单
在form标签中，有两个经常使用的属性
action：表单提交服务器地址
method: 表单提交的方法/方式----get/post
其他提交方式---put delete
提交方式----get（默认的提交方式）
1.请求的参数放到地址栏中
2.不安全
3.存在缓存
4.传输数据的大小收到限制
提交方式----post
1.请求的参数放到http协议中
2.相对安全---账号密码等信息不会放到地址栏中
3.没有缓存
4.传输数据的大小限制较小
修改成post之后，可能会出现错误信息。
input标签：定义输入字段，用户可在其中输入数据。
属性：
type 指示 input标签的类型，默认的是text
按钮类型： 普通按钮 button 重置按钮 Reset 提交按钮 submit
value 定义要显示的文本。
-->
<html>
<head>
<meta charset="utf-8">
<title>form表单1</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" value="zhangsan" />
<input type="submit" value="提交" />
</form>
</body>
</html>
3.查看此网页是不是HTML5，主要看表头
4.HTML5新增了很多新内容，具体可以查看API，例如：在网页中嵌套音频/视频文件的格式
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）