vscode 快速编写代码的整理

一、快速编辑HTML代码

   1、添加类、id、文本和属性

     （1）输入 .box

?

1	<div class="box"></div>

　　（2）输入p#text

?

1	<p id="text"></p>

　　（3）类和id一起输入 .box.text

?

1	<div id="box" class="text"></div>

　　（4）元素和内容一块输出 p{你好}

?

1

<p>你好</p>

　　（5）输出属性 a[href=#]

?

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

　  2、嵌套

　　（1）输入div+p

?

1 2	<div></div> <p></p>

 

　　（2）输入ul>li*3>a

?

1 2 3 4 5

<ul>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li> </ul>

　  　(3) >：子元素符号，表示嵌套的元素

              +：同级标签符号

      3、分组 

         可以通过嵌套和括号来快速生成一些代码块(.foo>h1)+(.bar>h2)

?

1 2 3 4 5 6

<div class="foo">     <h1></h1> </div> <div class="bar">     <h2></h2> </div>

　  4、定义多个带属性的元素

　　　输入ul>li.item$*3，代码输出

?

1 2 3 4 5

<ul>     <li class="item1"></li>     <li class="item2"></li>     <li class="item3"></li> </ul>

二、CSS缩写 

　　1.  值 
　　　　比如要定义元素的宽度，只需输入w100，即可生成 　　

?

1	width: 100px;

　　注：除了px，也可以生成其他单位

• p 表示%
• e 表示 em
• x 表示 ex

     2. 附加属性

　　　可能你之前已经了解了一些缩写，比如 @f，可以生成：

?

1 2 3 4

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

　　3. 模糊匹配

　　　　如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

?

1	overflow: hidden;

　　4、供应商前缀

　　　　如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：（未实现）

?

1 2 3 4 5

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

　　　　你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo： 

?

1 2 3 4 5

1 -webkit-super-foo: ;  2 -moz-super-foo: ;  3 -ms-super-foo: ;  4 -o-super-foo: ;  5 super-foo: ;

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

?

1 2 3

-webkit-transform: ;  -moz-transform: ;  transform: ;

　　前缀缩写如下：

　　　　w 表示 -webkit-
　　　　m 表示 -moz-
　　　　s 表示 -ms-
　　　　o 表示 -o-

　　5、渐变

　　输入lg(left, #fff 50%, #000)，会生成如下代码：（未实现）

?

1 2 3 4 5

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

　　

 有些自己还没有实现，下去找找毛病在哪儿

　文章来源：Jason.Zeng