首页 > 代码库 > emmet插件快捷键：

emmet插件快捷键：

2024-08-25 10:19:52   223人阅读

概念：emmet插件是用在编辑器里面的一个可以快速编写代码的插件，比如sublime text中，就可以用它来快速创建代码，本文主要是在sublime text的编辑器中做的测试代码。

一、html
　　1.快速创建html
　　（1） html:5 --> tab

 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>

　　2.标签
　　（1） 标签 --> tab
　　示例：p --> tab

<p></p>

　　3.类.或ID#
　　（1） p.class1#id1 --> tab

<p class="class1" id="id1"></p>

　　（2）p.class1.class2#id1#id2 --> tab(只会选择一个ID，可以有多个class)

<p class="class1 class2" id="id2"></p>

　　4.文本{}
　　（1） p{你好} --> tab

<p>你好</p>

　　5.属性
　　（1） a[href=https://baidu.com] --> tab

<a href="https://baidu.com"></a>

　　6.嵌套>
　　（1） p>span

<p><span></span></p>

　　7.同级+
　　（1）p+span

<p></p>
<span></span>

　　8.嵌套分级升级版
　　（1）div.one#one>h1{This is one.}+div.two#two>h1{This is two.}

1 <div class="one" id="one">
2     <h1>This is one.</h1>
3     <div class="two" id="two">
4         <h1>This is two.</h1>
5     </div>
6 </div>

　　（2）(div.one#one>h1{This is one.})+(div.two#two>h1{This is two.})

1 <div class="one" id="one">
2     <h1>This is one.</h1>
3 </div>
4 <div class="two" id="two">
5     <h1>This is two.</h1>
6 </div>

　　9.向上一层^
　　（1） div>p>a^span --> tab (即跟p同层)

1 <div>
2     <p><a href=""></a></p>
3     <span></span>
4 </div>

　　10.省略标签
　　（1） 根据父元素来自动决定标签
　　示例：.container --> tab

<div class="container"></div>

　　示例：ul>.list --> tab

1 <ul>
2     <li class="list"></li>
3 </ul>

　　11.重复代码
　　（1）ul>li*3 --> tab

1 <ul>
2     <li></li>
3     <li></li>
4     <li></li>
5 </ul>

　　（2）ul>li{item}*3 --> tab

1 <ul>
2     <li>item</li>
3     <li>item</li>
4     <li>item</li>
5 </ul>

　　（3） (ul>li{item})*3 --> tab

1 <ul>
2     <li>item</li>
3 </ul>
4 <ul>
5     <li>item</li>
6 </ul>
7 <ul>
8     <li>item</li>
9 </ul>

　　12.列表计算
　　（1） ul>li.item$*3 --> tab(PS:一位数一个$，两位数两个$)

1 <ul>
2     <li class="item1"></li>
3     <li class="item2"></li>
4     <li class="item3"></li>
5 </ul>

　　（2） ul>li.item$$*3 --> tab

1 <ul>
2     <li class="item01"></li>
3     <li class="item02"></li>
4     <li class="item03"></li>
5 </ul>

　　二、css
　　1.w100 --> tab
　　h10p --> tab
　　m5e --> tab
　　p5r --> tab
　　或者
　　w100+h10p+m5e+p5r
　　（PS：p --> %; e --> em; r --> rem; x --> ex;）

1 width: 100px;
2 height: 10%;
3 margin: 5em;
4 padding: 5rem;

　　2.@f --> tab

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

　　3.供应商前缀-（一些非W3C标准的，会加前缀）
　　（1）-trs --> tab

1 -webkit-transition: prop time;
2 -o-transition: prop time;
3 transition: prop time;

　　PS：如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

1 -webkit-transform: ;
2 -moz-transform: ;
3 transform: ;

　　三、定制Emmet插件
　　　　- 添加新缩写或更新现有缩写，可修改snippets.json文件
　　　　- 更改Emmet过滤器和操作的行为，可修改preferences.json文件
　　　　- 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件


　　参考资料：
　　　　http://www.iteye.com/news/27580
　　　　https://gold.xitu.io/post/5843a0e861ff4b006b97f5d5

emmet插件快捷键：


联系
我们