Emmet使用

時間 2019-11-16

標籤 emmet 使用简体版

原文原文鏈接

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>

View Code

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>

View Code

<style>
    
    body{

      /*2、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>

View Code

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>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。