【插件】Emmet 快速编写代码

一曲冷凌霜 提交于 2020-01-14 02:16:51

最近新下载了一个编辑器,叫brackets。里面插件挺好弄的,直接安装就行。

据说Emmet很好用,所以打算把一些用法写在这里,方便查看。

一、在<head></head>中

link:css,然后按Tab键    快速引入css文件

 <link rel="stylesheet" href="style.css">

二、在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.添加类、id、文本和属性

输入p.p1    给p标签添加一个叫p1的类

<p class="p1"></p>

输入p#p2    给p标签添加一个叫p2的id

<p id="p2"></p>

输入p.p1#p2    给p标签同时添加一个叫p1的类和p2的id

<p class="p1" id="p2"></p>

输入h1{你好,我是h1标签}    在{}中填写文本内容

<h1>你好,我是h1标签</h1>

 输入a[href=#]      在[]中填写元素的属性

<a href="#"></a>

3.嵌套

① >:子元素符号,表示嵌套的元素
父级元素>子级元素

输入h1>p  子元素p被嵌套在父元素h1的里面

<h1>
    <p></p>
</h1>

② +:同级标签符号

同级的元素+同级的元素

输入h1+p    没有上下级关系

<h1></h1>
<p></p>

③ ^:让这个符号前的标签提升一行

h1>h2^p    这个没太看懂,总之p和h1是同一级

<h1>
   <h2></h2>
</h1>
<p></p>

h1>h2+p    h2和同一级的p被h1嵌套

<h1>
   <h2></h2>
   <p></p>
</h1>

4.分组

用嵌套>和括号{}来快速生成一些代码块

(.person1>p)+(#person2>p+span.span1)

<div class="person1">
     <p></p>
</div>
<div id="person2">
     <p></p>
     <span class="span1"></span>  //还能继续给span加上类
</div>

5.隐式标签

会根据父元素,自动添加上标签

 在文档中,直接输入 .div1

<div class="div1"></div>

在<ul></ul>中,输入 .div1

系统直接给你套上<li>标签

<ul>
    <li class="div1"></li>
</ul>

注意:

li→用于ul/ol中

tr→用于table/thead/tbody/tfoot中

td→用于tr中

option→用于select/optgroup中

6.定义多个元素

用*号

ul>li*5

   <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul>

7.定义多个带属性的元素

ul>li.item*6

   <ul>
       <li class="item"></li>
       <li class="item"></li>
       <li class="item"></li>
       <li class="item"></li>
       <li class="item"></li>
       <li class="item"></li>
   </ul>

ul>li.item$*6    加上$这个符号,可以进行排序

  <ul>
       <li class="item1"></li>
       <li class="item2"></li>
       <li class="item3"></li>
       <li class="item4"></li>
       <li class="item5"></li>
       <li class="item6"></li>
  </ul>

三、CSS缩写

1.值  

输入:w100h300

h1{  width: 100px;  height: 300px;}

输入:h10p+m5e+p20x

 h2{
     height: 10%;
     margin: 5em;
     padding: 20ex;
 }

注意:

单位:p代表%

   e代表em        

     x代表ex  

CSS相对长度单位

   em    元素的字体高度
ex 字母x的高度
px 像素
% 百分比

 

元素: w代表width宽度  

h代表height高度  

m代表margin外边距  

p代表padding内边距 
2.附加属性

@f    

@font-face {
            font-family:;
            src:url();
        }

@f+

 @font-face {
            font-family: 'FontName';
            src: url('FileName.eot');
            src: url('FileName.eot?#iefix') format('embedded-opentype'),
                 url('FileName.woff') format('woff'),
                 url('FileName.ttf') format('truetype'),
                 url('FileName.svg#FontName') format('svg');
            font-style: normal;
            font-weight: normal;
        }

3.模糊匹配

有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法

比如:输入ov:h、ov-h、ovh和oh,生成的代码是一样的

overflow: hidden;

注意:

bot  代表border-top  

bob  代表border-bottom  

bol  代表border-left  

bor  代表border-right

4.供应商前缀

输入 trf    

 -webkit-transform: ; -ms-transform: ; -o-transform: ; transform: ;

输入 -syr-good  任意属性加上+,也可以添加前缀

-webkit-syr-good: ;
-moz-syr-good: ;
-ms-syr-good: ;
-o-syr-good: ;
syr-good: ;

如果不希望加上所有前缀,可以使用缩写来指定,比如-ow-trf表示只加上-o-和-webkit前缀:

 -o-transform: ;
 -webkit-transform: ;
  transform: ;

注意:

w 表示 -webkit-  谷歌chrome/苹果safari的

m 表示 -moz-   火狐firefox的mozilla

s 表示 -ms-      IE的

o 表示 -o-     欧朋的opera

5.渐变

输入lg(left, #fff 50%, #000)    lg为linear-gradient,线性渐变。

    background-image: -webkit-linear-gradient(left, #fff 50%, #000);
    background-image: -o-linear-gradient(left, #fff 50%, #000);
    background-image: linear-gradient(to right, #fff 50%, #000);

四、附加功能

生成一段测试用的文字

输入:lorem 或 lipsum 

或者还可以指定文字个数,比如 lipsum13

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quidem est magnam quis.

                  有点酷炫的,我得熟练熟练~

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!