微信小程序的标签和html标签比较
微信小程序的标签和html标签比较
html | 微信小程序 |
<div></div> | <view></view> |
<h1></h1><h2></h2>....<h6></h6> <p></p><span></span> | <text></text> |
<input type="text"> <input type="checkbox"> <input type="radio"> <input type="file"> | <input /> <checkbox /> <radio /> <view bindtap="changeImage"></view> |
<select> <option></option> <option></option> </select> | <picker range="{{area}}"> <view> {{area[index]}}</view> </picker> |
<a href="#"></a> | <navigator url="#" redirect></navigator> |
<img src=""> | <image mode="aspectFill" src=""> </image> |
<i class="icon"></i> | <icon></icon> |
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(不建议(工具过滤易导致页面错乱)) |
群组选择器 | 群组选择器 |
后代选择器 | 后代选择器 |
<em id="__mceDel">//微信小程序中placeholder的样式和html5是不一样的。需要修改placehoder的样式,通过placeholder-class=”class”来定义。 <input type="text" placeholder="邮箱" placeholder-style="color:#c0c0c0" /> <input password type="number" placeholder="密码" placeholder-class="placeholder" /> <!--小程序里通过placeholder-style和placeholder-class修改样式,不过并不能修改点击时候input的边框颜色--></em>
input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12px; /* placeholder位置 */ 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 画布