微信小程序的标签和html标签比较html微信小程序
....{{area[index]}}
wxss选择器html微信小程序
div(标签选择器)view、text、icon、input、image、navigator(标签选择器)
class(类选择器)class
id(id选择器)(效率最高)id(效率最高)
element,element(层级选择器)element,element(层级选择器)
：after(伪类选择器)：after ：before
：frist-child等：frist-child等(不建议(工具过滤易导致页面错乱))
.class .class.class .class(不建议(工具过滤易导致页面错乱))
群组选择器群组选择器
后代选择器后代选择器
//微信小程序中placeholder的样式和html5是不一样的。需要修改placehoder的样式，通过placeholder-class=”class”来定义。
input::-webkit-input-placeholder {
color: #aab2bd;
font-size: 12px;
text-align: right;
}
input:focus::-webkit-input-placeholder { color: transparent; }
下面我就列出常用的标签及其分类。能够帮助之前没有经历过微信小程序前端开发的同学能够快速熟悉。
一、视图容器(View Container)：
标签说明
view视图容器
scroll-view可滚动视图容器
swiper可滑动的视图容器
二、基础内容(Basic Content)
标签名说明
icon 图标
text文字
progress进度条
三、表单组件(Form)
标签名说明
button按钮
form表单
input输入框
checkbox多项选择器
radio单项选择器
picker列表选择器
slider滑动选择器
switch开关选择器
label标签
四、操作反馈组件(Interaction)
标签名说明
action-sheet上拉菜单
modal模态弹窗
progress进度条
toast短通知
loading加载
五、导航(Navigation)
组件名说明
navigator应用内跳转
六、多媒体(Media)
标签名说明
audio音频
image图片
video视频
七、地图(Map)
标签名说明
map地图
八、画布(Canvas)
标签名说明
canvas画布