先从头部信息开始吧：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="telephone=no" name="format-detection">
第一行，优先使用 IE 最新版本和 Chrome。
第二行是让网页的宽度自适应手机屏幕的宽度，避免有滑动：其中width=device-width:表示宽度是设备屏幕的宽度；minimum-scale=1.0表示最小的缩小比例；maxximum-scale=1.0：表示最大的缩放比例；user-scalbale=no：表示用户是否可以调整缩放比例；还有initial-scale=1.0：表示初始的缩放比例。
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。这里所以不需写这个
第三行用于禁止数字识自动别为电话号码。
这个页面都是在一个页面里完成的。共分为8个视图。首页，尾页加上6道选择题。我们先来说一说效果怎么实现的。
刚开始，除了首页，其他的视图都有一个样式
.strat_hide{
transfrom: translate3d(0, 100%, 0);
}
每一个视图就是都有一个item的class，当点击首页的开始测试的时候，给当前页添加一个缩小的样式：
.hide_small{
transform: scale(0.8);
}
这样当前页会缩小，再让下一个视图的translate3d(0, 100%, 0);的Y轴距离变为0，下一个视图就能升上来了。
.show{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
加上事件:
//跳转到下一页
if (swich<8) {
$(boxs[swich+1]).addClass('hide_small');
$(boxs[swich+2]).addClass('show');
$('.comment-div').eq(itemIndex).addClass('slideDown');
swich++;
if(swich==6 ){
$('.origin_div').hide();
}
}
给每一个视图设置一个自己的属性index=’number’，number是在视图中的位置，用于标明是第几个视图，当点击题目的某个选项以后，添加以上样式，并取到它的index属性，根据这个index属性，确定滑动时右边指示灯第几个视图显示第几个灯亮。
$('.origin_div').children().eq(itemIndex).addClass('origin_light').siblings().removeClass('origin_light');
初始时设置一个数组，用于存放正确答案在选项中的位置
var result = [1, 0, 2, 1, 0, 2];
点击选项，判断如果这个选项的编号属性和数组的一样，则给原始分数加上一个正确分数，否则加上错误的分数，最后把这个分数累加起来，就是得到的总数。
在微信配置里定义好分享时的话语，图片，链接，分享成功时，将遮罩hide掉。
关于更多的HTML标签，可以看一丝的常用的 HTML 头部标签
