在开始单页面开发之前，首先先从制作多页面开始，为了简洁的说明，采取了简化了的简单的web登陆注册页面模型(如下图)

    首先建立一个项目文件目录， 如下图

  然后在html文件夹中建立4个空白的html页面，分别取名为index.html, login.html, register.html和goal.html, 代码如下

index.html

  login.html

register.html

goal.html的代码很简单，仅仅作为测试页

共同样式如下图所示

最后得到的页面截图如下

总结：

在传统开发web页面的时候，使用多页面的形式开发，每个页面的开发流程一般都是先根据美工图进行html结构化，再通过样式美化，最后在js上处理业务逻辑。

在样式美化上，个别不规则的图片可以用css内联svg代码来实现，这样减少页面的引用的同时，还能灵活的更改代码要实现不同的图片。

业务逻辑的流程一般都是先选取dom元素，然后注册事件，通过事件更改页面布局，前后端数据交互等。

后续更新：传统多页面形式相比较单页面失去了很多灵活性，下次更新将每个页面对象化，通过一个html页面的js引入多个对象，然后操作页面对象来切换不同的页面。

案例链接

---

原生开发移动web单页面(step by step)2——Page对象

原生开发移动web单页面(step by step)3——App对象

原生开发移动web单页面(step by step)4——tap事件与slide事件

原生开发移动web单页面(step by step)5——nodejs服务器的搭建

原生开发移动web单页面(step by step)6——history api应用