微信小程序的標簽和html標簽比較

參考來源：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; }