参考来源: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; }
浙公网安备 33010602011771号