https://code.z01.com/Emmet/

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.   </head>
    9.   <style>
    10.     /* p{
    11.     @font-face {
    12.     font-family: ;
    13.     src: url();
    14.     }     
    15.     } */
    16.   </style>
    17.   <body>
    18.     <!-- div#test -->
    19.     <div id="test"></div>
    22.     <!-- div.test -->
    23.     <div class="test"></div>
    27.     <!-- div>ul>li>p -->
    28.     <div>
    29.       <ul>
    30.         <li>
    31.           <p></p>
    32.         </li>
    33.       </ul>
    34.     </div>
    38.     <!-- div+ul+p -->
    40.     <div></div>
    41.     <ul></ul>
    42.     <p></p>
    47.     <!-- div>ul>li^div -->
    49.     <div>
    50.       <ul>
    51.         <li></li>
    52.       </ul>
    53.       <div></div>
    54.     </div>
    58.     <!-- div*2 -->
    59.     <div></div>
    60.     <div></div>
    63.     <!-- div>(ul>li>a)+div>p -->
    64.     <div>
    65.       <ul>
    66.         <li><a href=""></a></li>
    67.       </ul>
    68.       <div>
    69.         <p></p>
    70.       </div>
    71.     </div>
    76.     <!-- a[href='##' name='xiaoA'] -->
    78.     <a href="##" name="xiaoA"></a>
    80.     <!-- div[class='t'] -->
    81.     <div class="t"></div>
    83.     <a href="##" name="xiaoA"></a>
    85.     <!-- ul>li.test*3 -->
    86.     <ul>
    87.       <li class="test"></li>
    88.       <li class="test"></li>
    89.       <li class="test"></li>
    90.     </ul>
    92.     ul>li.t*3
    95.     <!-- ul>li.test$*3 -->
    96.     <ul>
    97.       <li class="test1"></li>
    98.       <li class="test2"></li>
    99.       <li class="test3"></li>
    100.     </ul>
    105.     <!-- ul>li.test$@4*3 -->
    106.     <ul>
    107.       <li class="test4"></li>
    108.       <li class="test5"></li>
    109.       <li class="test6"></li>
    110.     </ul>
    115.     <!-- ul>li.test$*3{t$} -->
    116.     <ul>
    117.       <li class="test1">t1</li>
    118.       <li class="test2">t2</li>
    119.       <li class="test3">t3</li>
    120.     </ul>
    125.     <!-- .test -->
    126.     <div class="test"></div>
    128.     <!-- ul>.test$*3 -->
    129.     <ul>
    130.       <li class="test1"></li>
    131.       <li class="test2"></li>
    132.       <li class="test3"></li>
    133.     </ul>
    135.     <!-- option>.test$*3 -->
    136.     <option value="">
    137.       <div class="test1"></div>
    138.       <div class="test2"></div>
    139.       <div class="test3"></div>
    140.     </option>
    143.     <!-- div#box>p.title+ul.list>li.child${is$}*3^div#box2 -->
    144.     <div id="box">
    145.       <p class="title"></p>
    146.       <ul class="list">
    147.         <li class="child1">is1</li>
    148.         <li class="child2">is2</li>
    149.         <li class="child3">is3</li>
    150.       </ul>
    151.       <div id="box2"></div>
    152.     </div>
    154.   </body>
    155. </html>