由于个人主要负责任务是前端的工作，因此第一阶段主要学习了html、css、JavaScript和微信小程序的框架。

###1、html的学习超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。通过html可以编写静态网页，也可以通过编写js脚本添加用户与网页的交互。以下为一小段html文本：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

< !DOCTYPE html >声明为 HTML5 文档
< html > 元素是 HTML 页面的根元素
< head > 元素包含了文档的元（meta）数据
< title > 元素描述了文档的标题
< body > 元素包含了可见的页面内容
< h1 > 元素定义一个大标题
< p > 元素定义一个段落

将看到这样的效果

我的第一个标题

我的第一个段落。

    有关html的其他元素，比如布局相关的<div>元素，链接相关的<a>元素等在网上都有许多详解。

###2、css的学习 CSS 指层叠样式表 (Cascading Style Sheets)，样式定义了如何显示 HTML 元素，样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表可以改变站点中所有页面的布局和外观。 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 这里写图片描述

选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性是希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
若要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。
例如：将id="para"的元素样式设为文本居中，字体颜色为红色

#para
{
    text-align:center;
    color:red;
}

将class="center"的元素的样式设为文本居中(class选择器可以应用在多个元素上)：

.center {text-align:center;}

 也可以选择将css应用在特定html元素的某个class上：

p.center {text-align:center;}

还有许多属性比如背景（background）、字体（font）、定位（position）等都可以设置。

###3、微信小程序的学习微信小程序包括了下面四种文件： .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件

其中json文件用于配置小程序，比如app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超
时时间、底部 tab 等。
wxml和wxss分别对应html和css的功能，是微信小程序自定义的标记语言，简化并扩展了html和css。

比如，在wxml中可以通过wx:if来条件渲染，通过wx:for来列表渲染。
数据绑定可以通过{{}}将变量括住，然后在.js中初始化、赋值，比如要绑定一个view元素内的显示内容content:

<!-- wxml -->
<view>{{content}}</view>

Page({
 data: {
 /**初始化**/
    content:"内容",
  },
  
 onLoad: function() {
	 this.setData({
	    content:"hello",
	  })
 }
)}

在wxss中，还新增了尺寸单位rpx免去在不同设备的换算烦恼。

通过js文件可以定义与用户交互的事件响应，可以在各生命周期函数中定义不同动作，比如可以在 onLoad 中获取打开当前页面
所调用的 query 参数，且小程序提供了许多微信相关的api，比如微信支付，获取用户昵称、头像等，十分便利。

小程序用到多少个页面就在pages目录下写多少个文件夹，每个文件夹中都包含上述四种文件，比如pages/logs, 微信客
户端会先根据logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装
载这个页面的WXML结构和WXSS 样式,最后客户端会装载logs.js,页面就呈现出来了。

小程序有许多组件，和html大都类似，且官方提供了许多文档供学习和使用，是完成作业的一个好的平台。