Emmet使用

时间：2022-02-13 22:02:34

emmet官方文档

【翻译】Emmet (ZenCoding) 缩写语法

<!-- ul>li.item$*5 -->

  <ul>

    <li class="item1"></li>

    <li class="item2"></li>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

  </ul>

  <!-- ul>li.item$$$*5 -->

  <ul>

    <li class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

    <li class="item004"></li>

    <li class="item005"></li>

  </ul>

  <!-- ul>li.item$@-*5 -->

  <ul>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

    <li class="item2"></li>

    <li class="item1"></li>

  </ul>

  <!-- ul>li.item$@-*5 -->

  <ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

  </ul>

  <!-- ul>li.item$@3-*5 -->

  <ul>

    <li class="item3-"></li>

    <li class="item4-"></li>

    <li class="item5-"></li>

    <li class="item6-"></li>

    <li class="item7-"></li>

  </ul>

  <!-- ul>li.item$@3-s*5 -->

  <ul>

    <li class="item3-s"></li>

    <li class="item4-s"></li>

    <li class="item5-s"></li>

    <li class="item6-s"></li>

    <li class="item7-s"></li>

  </ul>

  <!-- ul>li.item$@-3*5 -->

  <ul>

    <li class="item7"></li>

    <li class="item6"></li>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

  </ul>

  <!-- a[href]{click} -->

  <!-- a{click} -->

  <!-- a>{click} -->

  <a href="">click</a>

  <!-- a{click}+b{here} -->

  <a href="">click</a><b>here</b>

  <!-- a>{click}+b{here} -->

  <a href="">click<b>here</b></a>

  <!-- p>{click}+a{here}+{to continue} -->

  <p>click<a href="">here</a>to continue</p>

  <!-- p{Click }+a{here}+{ to continue} -->

  <p>Click </p>

  <a href="">here</a> to continue

  <!-- (header > ul.nav > li*5) + footer 有空格:停止缩写解析 -->

  (header > ul.nav > li*5) + <footer></footer>

  <!-- (header>ul.nav>li*5)+footer -->

  <header>

    <ul class="nav">

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </header>

  <footer></footer>

Emmet：HTML/CSS代码快速编写神器

<!-- 用于HTML5文档类型 -->

<!-- ! -->

<!-- html:5  -->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

</body>

</html>  

<!-- html:xt：用于XHTML过渡文档类型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

  <title>Document</title>

</head>

<body>

</body>

</html>

<!-- html:5s不存在  -->

<!-- html:4s：用于HTML4严格文档类型 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <title>Document</title>

</head>

<body>

  <!-- 隐式标签 :

  在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>,

  现在如果只输入.item，则Emmet会根据父标签进行判定。 比如在<ul>中输入.item，就会生成<li class="item"></li>。 --> 

  <!--   下面是所有的隐式标签名称： 

  li：用于ul和ol中

  tr：用于table、tbody、thead和tfoot中

  td：用于tr中

  option：用于select和optgroup中 -->

  <!-- .item -->

  <div class="item"></div>

  <ul>

    <!-- .item -->

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

    <!-- .item*5 -->

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

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

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

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

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

    <!-- #item$@2*5 -->

    <li id="item2"></li>

    <li id="item3"></li>

    <li id="item4"></li>

    <li id="item5"></li>

    <li id="item6"></li>

  </ul>

  <tr>

    <!-- .item -->

    <td class="item"></td>

  </tr>

  <select name="" id="">

    <!-- .item -->

    <option class="item"></option>

  </select>

</body>

</html>
<style>

    body{

      /*二、CSS缩写 */

      /*p 表示%

      e 表示 em

      x 表示 ex*/

      /*m5e*/

      margin: 5em;

      /*w100*/

      width: 100px;

      /*h10p+m5e*/

      height: 10%;

      margin: 5em;

      /*p10x*/

      padding: 10ex;

      /*模糊匹配 */

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

      比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的： */

      /*ov-h*/

      overflow: hidden;

    }

    /*@f*/

    @font-face {

      font-family:;

      src:url();

    }

    /*一些其他的属性，

    比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@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;

    }

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

    /*trs*/

    -webkit-transition: prop time;

    -o-transition: prop time;

    transition: prop time;

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

    /*-super-foo*/

    -webkit-super-foo: ;

    -moz-super-foo: ;

    -ms-super-foo: ;

    -o-super-foo: ;

    super-foo: ;

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

    /*-wm-trf*/

    -webkit-transform: ;

    -moz-transform: ;

    transform: ;

    /*    前缀缩写如下：

    w 表示 -webkit-

    m 表示 -moz-

    s 表示 -ms-

    o 表示 -o-*/

    /*w-trs*/

    -webkit-transition: prop time;

    transition: prop time;

    /*lg(left, #fff 50%, #000)*/

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

  </style>

Emmet插件使用方法小结

<!DOCTYPE html>

<html>

<head>

  <title>test</title>

  <style type="text/css">

    body{

      /*c#3*/

      color: #333;

      /*c#e0*/

      color: #e0e0e0;

      /*c#fc0 */

      color: #fc0;

    }

    /*    CSS3前缀：

    w 表示 -webkit-

    m 表示 -moz-

    s 表示 -ms-

    o 表示 -o-*/

    /*-wmso-transform */

     -webkit-transform: ;

     -moz-transform: ;

     -ms-transform: ;

     -o-transform: ;

     transform: ;

     /*-o-transform*/

     -o-transform: ;

     transform: ;

  </style>

  <!-- link -->

  <link rel="stylesheet" href="">

  <!-- script:src -->

  <script src=""></script>

</head>

<body>

  <!-- img -->

  <img src="" alt="">

  <!-- inp -->

  <input type="text" name="" id="">

  <!-- input:p -->

  <input type="password" name="" id="">

  <!-- btn -->

  <button></button>

  <!-- btn:s -->

  <button type="submit"></button>

  <!-- btn:r -->

  <button type="reset"></button>

</body>

</html>

相关文章