参考来源:https://blog.csdn.net/xinzi11243094/article/details/80667527
标记一下,讲的挺好的:https://zhuanlan.zhihu.com/p/23536784
微信小程序的标签和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=""> |
<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(不建议(工具过滤易导致页面错乱)) |
群组选择器 | 群组选择器 |
后代选择器 | 后代选择器 |
//微信小程序中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的边框颜色-->
<!--HTML5通过focus修改placeholder默认和点击时候的样式-->
input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12px; /* placeholder位置 */ text-align: right;
}
input:focus::-webkit-input-placeholder { color: transparent; }