介绍一个支持多个文本编辑器的HTML和CSS代码快捷编写插件

Emmet基本符号说明

> 子级;

() 子级选择器,与>的不同是:>仅能跟一个,()可以有多个子级;

+ 连接符,如header+main+footer或者table>(thead>tr>th*5)(tbody>tr>td*5),或者nav>ul>(li>a[href=#]{Link})*5;

^ 返回上一级,例如div+div>p>span+em^bq等同于

  1. <div></div>  
  2. <div>  
  3.     <p><span></span><em></em></p>  
  4.     <blockquote></blockquote>  
  5. </div>  

div+div>p>span+em^^^bq等同于

  1. <div></div>  
  2. <div>  
  3.     <p><span></span><em></em></p>  
  4. </div>  
  5. <blockquote></blockquote>  

 

* 后面紧跟一个整数,声明输出数量,下面有示例;

$ 变量占位符,一般写在*之前,下面有示例;

@ 站位变量的偏移符号,下面有示例;

[] 可以在方括号里写属性及其值,如果单个属性有多个值,应该以双引号引起来;

{} 文本符号,例如: a{点我}等于<a href="#">点我</a>;a[href=http://wikipedia.org]{维基百科}

在CSS中,ID和CLASS分别以#和.前缀表示,可以直接连写;

一、在HTML中使用Emmet

!或者html:5

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6. </head>  
  7. <body>  
  8.        
  9. </body>  
  10. </html>  

此外,还有比较老的html:xt或者html:4s

a.link等于

  1. <a href="" class="link"></a>  

 

button.btn.btn-blue等于

  1. <button class="btn btn-blue"></button>  

 

h1+div.content等于

  1. <h1></h1>  
  2. <div class="content"></div>  

 

.post(.title+.content)等于

  1. <div class="post">  
  2.     <div class="title"></div>  
  3.     <div class="content"></div>  
  4. </div>  

 

.post(.title+.content+.meta>(.author+.category+tags+.date))等于

  1. <div class="post">  
  2.     <div class="title"></div>  
  3.     <div class="content"></div>  
  4.     <div class="meta">  
  5.         <div class="author"></div>  
  6.         <div class="category"></div>  
  7.         <tags></tags>  
  8.         <div class="date"></div>  
  9.     </div>  
  10. </div>  

ul.list>li.list-item*5等于

  1. <ul class="list">  
  2.     <li class="list-item"></li>  
  3.     <li class="list-item"></li>  
  4.     <li class="list-item"></li>  
  5.     <li class="list-item"></li>  
  6.     <li class="list-item"></li>  
  7. </ul>   

ul>li.list-item$*5等于

  1. <ul>  
  2.     <li class="list-item1"></li>  
  3.     <li class="list-item2"></li>  
  4.     <li class="list-item3"></li>  
  5.     <li class="list-item4"></li>  
  6.     <li class="list-item5"></li>  
  7. </ul>  

ul>li.list-item$@6*5等同于

  1. <ul>  
  2.     <li class="list-item6"></li>  
  3.     <li class="list-item7"></li>  
  4.     <li class="list-item8"></li>  
  5.     <li class="list-item9"></li>  
  6.     <li class="list-item10"></li>  
  7. </ul>  

示例内容的生成,如p>lorem*3等于

  1. <p>  
  2.         <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, totam, praesentium, sequi, illo libero voluptatum doloribus deleniti error nulla molestias illum nesciunt nisi eaque nemo maxime eveniet delectus sapiente voluptatem.</span>  
  3.         <span>Natus, cupiditate, accusamus iure tempora repellendus ad facilis aperiam adipisci fuga atque? Sit at ea nemo culpa tempora dolorem perspiciatis quas! Dolorum sint quidem architecto deleniti soluta aspernatur amet deserunt.</span>  
  4.         <span>Vitae, ut, temporibus, laboriosam debitis incidunt veritatis tenetur reprehenderit nihil mollitia in eveniet perspiciatis voluptatibus possimus laborum quibusdam rem modi dignissimos laudantium alias itaque assumenda maxime voluptate exercitationem eligendi fugiat.</span>  
  5.     </p>  

p*3>lorem15等于生成单个段落,每个段落有十五个词:

  1. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam animi praesentium nulla dignissimos quibusdam!</p>  
  2. <p>Eaque, quaerat, unde, porro pariatur fugit debitis dignissimos sit architecto nostrum quisquam ipsam voluptatibus repellat.</p>  
  3. <p>Molestias, eveniet, nam error totam ex pariatur porro odio ratione distinctio quibusdam veritatis perferendis sed!</p>  

 

二、在CSS中使用Emmet

 

  1. p → %   
  2.   
  3. e → em   
  4.   
  5. x → ex  

 

@f等于

  1. @font-face {   
  2.     font-family:;   
  3.     src:url();   
  4. }  

 

ov等于

  1. overflowhidden;  

 

trs等于

  1. -webkit-transition: prop time;   
  2. -moz-transition: prop time;   
  3. -ms-transition: prop time;   
  4. -o-transition: prop time;   
  5. transition: prop time;  

还可以加前缀,如-suoling-shadow等于

  1. -webkit-suoling-shadow: ;   
  2. -moz-suoling-shadow: ;   
  3. -ms-suoling-shadow: ;   
  4. -o-suoling-shadow: ;   
  5. suoling-shadow: ;  

不想要前缀,例如-wm-trs等于:

  1. -webkit-transition: prop time;   
  2. -moz-transition: prop time;   
  3. transition: prop time;  

另外

  1. w → -webkit-   
  2. m → -moz-   
  3. s → -ms-   
  4. o → -o-  

-shadow等于

  1. -webkit-shadow: ;   
  2. -moz-shadow: ;   
  3. -ms-shadow: ;   
  4. -o-shadow: ;   
  5. shadow: ;  

也就是说,-suoling等同于-wmos-suoling。

lg(left, #fff 50%, #000)等于色彩渐变:

  1. background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));   
  2. background-image: -webkit-linear-gradient(left#fff 50%, #000);   
  3. background-image: -moz-linear-gradient(left#fff 50%, #000);   
  4. background-image: -o-linear-gradient(left#fff 50%, #000);   
  5. background-image: linear-gradient(left#fff 50%, #000);  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。