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

2021-10-28 09:13:47

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. overflow: hidden;  

 

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);  

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

上一篇：学习笔记---jsp---servlet


下一篇：微信小程序授权登录