在weui提供的例子中，其已经为我们分好了几个大类：表单、基础组件、操作反馈、导航相关、搜索相关、层级规范。我挑选部分组件进行主要学习理解，记录笔记如下：
一，基础组件
1.cell（表格视图）
列表元素，用于将信息以列表的形式显示在页面中。其基本结构如下：
最外层盒子引用的weui-cell类，内层子元素引用的weui-cells类，weui-cell类的外层盒子包含weui-cells盒子和标题weui-cells__title，其页面显示效果如下：
图中可以看到weui-cells的展示形式是横向布局排列，同时weui-cells盒子中包含了头、身体、底部三个部分，如下图显示：
*自我理解：cell是一个表格，也可以说是表格里的行，cells是cell里的单元格，每个cells依次从左往右排列，而cells里的头，身体，底部则是从上往下排列。
另外需要注意的是：虽然weui-cells__title是包含在cell里面的，但是建议放到cell外面使用，这样的话整体页面布局符合阅读习惯如果放到cell里面和cells并列的话会出现后续的第一个cells外边距应用不上，而其兄弟元素都有上外边距
2weui-grid（九宫格）
顾名思义就是一种3*3的9个盒子布局；效果图如下：
weui-grid类中设置了宽度为33.333%，同时每个a块都左浮动，这样就限制了每排只能放置3个，题外话，从整体布局来看九宫格是比较美观的，如果变成16宫格或者25宫格就显得过于密集，这也是后面导航栏学习手册里官方给的建议是不要超过5个，因为移动设备屏幕较小，元素选择过多的话反而不利于突出主题，容易给人以一种选择疲劳，所以超过5个以上的话建议显示4个，多余的收起来都放置在第5个格子做成下拉菜单样式。
3.导航栏（navbar上部导航栏和tabbar底部导航栏）
(1).顶部导航栏
最外层盒子weui-tab类，weui-tab内两部分，weui-navbar和weui-tab__panel配合使用如图：
weui-navbar内使用weui-navbar__item，weui-navbar__item的宽度是根据内容决定的，weui-navbar内超过5个以上weui-navbar__item也能存在，
(2).tabbar(底部导航栏)
与顶部的导航栏的基本结构几乎相同，底部导航栏就是把显示内容的weui-tab__panel放在上面了，如图：
weui-tabbar内超链接标签引用weui-tabbar__item类，超链接内图标使用weui-tabbar__icon类，文字内容引用weui-tabbar__label类
4.panel（面板）
面板由head、body、foot三个部分组成，其中body是必要的，页面显示结构为上中下，主要用于图文混排布局，文字组合布局。面板中weui-panel__bd部分也包含标题和内容结构，但是呈左中右结构排布，其基本结构如图：
二.表单组件：
1.单选框
基本结构为最外层盒子引用weui-cells、weui-cells_radio类，内层为label标签引用weui-cell类、weui-check__label类，结构如图显示：
label内部结构是以表格cell布局，如图：
2.复选框
基本结构与单选框基本一样，不过复选框父级盒子引用的是weui-cells_checkbox类，代码结构如图：
3.输入框
其结构配合cell表格写，无非是根据输入的内容，type值不一样
4.按钮
weui提供了丰富的按钮样式，基本都是引用的weui-btn类
