Emmet
機能snippet(コードクリップより、専用のクリッププラグイン)abbreviation expand(略記展開)
目的は一つだけで、web開発(符号化速度)を速める
Emmetプロパティの簡略化サポートネストされた簡略化サポートグループの簡略化サポート乗算簡略化サポート自己増加と自己減少、シーケンス、番号付け
解析簡写コードはTabキーまたはCtrl+Eで呼び出すことができる
EmmetとHTML
1.初期文書の作成
入力のみ!またはhtml:5、tabキーをクリックするとHTML 5のdoctypeデフォルトラベルが表示されます
html:5または!HTML 5文書型html:xt:XHTML移行型文書型html:xs:XHTML厳格型文書型html:4 t:HTML 4移行型文書型html:4 s:HTML 4厳格型文書型
2.クラス、id、テキスト、属性を簡単に追加
要素名とIDを連続して入力すると、Emmetは自動的に補完します.
E#IDを使用してID名を追加E.classを使用してクラス名を追加E[attr]を使用して属性を追加E{text}を使用してテキストを追加div#d1.test

a#a1.test[href=#]{ }

トップページに る

3.子孫>兄弟+上司^
>演算子を使用して、互いにネストされた要素を生成します:div>ul>li>a

    


 
 
 
 
  +                ：
 h1+p+a
 
 
 

 
 
 
 
  ^   ，            。    >     ，          ，         
 div>p>a^h1
 
 

    

    


  
4.  *
 じ  を  に    したい  は、     ul>li*4を  します.
 

    

    

    

    


  
 じラベルを  に    できるほか、$  で  することもできます.$@-  で  します.ul>li.lie$*5  

    

    

    

    

    


  ul>li.lie$@3*5  

    

    

    

    

    


  ul>li.lie$@-3*5  

    

    

    

    

    


  
5.コンビネーション()
ネストをより   に  するために、コードクリップを  することがよくあります.Emmetでは、1つのブロックをul>(li>a)*4に み わせることができます.

    

    

    

    


  (ul>(li>a)*4)+(select>option*4)+p  
  

    

    

    

    

  
  
    
    
    
    
  
  
  
6.タグ  の  
Emmetではタグ  は  できますが、Emmetでは ラベルに づいて  されます.   にdivラベルを  します..test  

 
 
          
 
 
 
  
ul  ol      li
 table、tbody、thead tfoot   tr
 tr    td
 select   option
 
 
 
 
  ：ul>.test
 
 

    


  
EmmetとCSS
   :CSSの  で、 を  するだけです.これは、   と  な を み わせて  します.たとえば、fz 18はfont-size:18 px  を  します.Emmetの   には   があります.
px→デフォルトp→%e→emr→rem x→ex  fz1e font-size:1em  
    :marginなどのCSSの  の  で、  の を  します.  の で(マイナス  )-  ：m10-20-30-40 margin: 10px 20px 30px 40px;の  の  を  するだけです.プラス  +   を  して、  の    ：m10+p20+fz30を  できます.
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  
Emmetはすべての  のCSS  と  モデルの  を  した.
d display:block;d:nはdisplay:noneに  される.d:f  はdisplay:flex;d:i  はdisplay:inline;
d:ib  はdisplay:inline-block;fl  float:left;fl:r  float:right;fl:nはfloat:noneに  されます.pos  はposition:relative;pos:a  position:absolute;pos:f  position:fixed;m  はmargin:;m:a  margin:auto;mt  はmargin-top:;タイプはmt,mb,mr p  padding:;その とmarginタイプbxzはbox-sizing:border-boxに  されます.
フォント  
f  font:;fz  font-size:;ff  font-family:;
fs  font-style:italic;
テキスト  
va  vertical-align:top;va:m  vertical-align:middle;ta  text-align:left;ta:c  text-align:center;td:n  text-decoration:none;wos  はword-spacing:;c  はcolor:#000;c:r  はcolor:rgb(0,0,0);c:ra  はcolor:rgba(0,0,0,.5);
op  はopacity:;op+をopacityに  :;filter: alpha(opacity=); 
  
bg  background:#000;bg+  background:#fff url()0 no-repeat;bgc  background-color:#fff;bgi  background-image:url();bgr  background-repeat:;bgp  background-position:0;bgsz  background-size:;
  とアウトライン
bd  はborder:;bd+  はborder:1 px solid#000;bd:nはborder:noneに  される.bdlはborder-left:;bdl+  はborder-left:1 px solid#000;bdrsはborder-radius:;bdc:t  border-color:transparent;olをoutlineに  :;
リスト#リスト#
Lis  はlist-style:;lst  はlist-style-type:;List:nはlist-style-type:noneに  されます.
その 
!に  !important anim  animation:;anim-animation:name duration timing-function delay iteration-count direction fill-modeに  します.trf  をtransform:;trf:r  はtransform:rotate(angle);trf:rx  transform:rotateX(angle);trf:sc  はtransform:scale(x,y);trf:t  はtransform:translate(x,y);trf:t 3はtransform:translate 3 d(tx,ty,tz)に  される.trs  はtransition:prop time;usはuser-select:noneに  されます.