【H5】Emmet 指令 HTML

Emmet操作指南

HTML篇

生成带有内容的标签

• 标签名{内容}可以生成带有内容的标签

  div{abc}
  <div>abc</div>
  

生成带有属性的标签

生成带有class属性的标签

• .属性值可以直接生成div标签
• 标签名加上.属性值可以生成带有class属性标签

  .abc
  div[class="abc"]
  
  p.abc
  p[class="abc"]
  
  a.abc
  a[class="abc"]
  

生成带有id属性的标签

• 标签名.属性值可以生成带有id属性的标签

  div#abc
  <div id="abc"></div>
  
  p#abc
  <p id='abc'></p>
  

生成同时具有id属性和class属性的标签

• 同时使用以上两种方式即可，即：

  div.abc#cde
  <div class="abc" id="cde"></div>
  

生成带有自定义属性的标签

• 标签名[属性名=属性值]可以生成具有目标属性的标签

  a[href='xxx']
  <a href='xxx'></a>
  

结合以上内容，可以得到同时具有多个属性值的标签

a.abc#cde[href='xxx' name='link']
<a href="xxx" class="abc" id="cde" name="link"></a>

生成后代、上级标签

生成后代标签

• 使用标签>子标签可以生成子标签

  <!-- 生成一级后代标签（子标签） -->
  ul>li
  <ul>
      <li></li>
  </ul>
  
  <!-- 生成二级后代标签 -->
  div>ul>li
  <div>
      <ul>
          <li></li>
      </ul>
  </div>
  

生成上级标签

```html
<!-- 生成一级上级标签 -->
div>ul>li^span
<div>

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

    <span></span>

</div>

<!-- 生成二级上级标签 -->
div>ul>li^^span
<div>
    <ul>
        <li></li>
    </ul>
</div>
<span></span>
```

生成多个标签

生成多个重复标签

• 在标签后加上*并跟上想要的个数即可生成重复标签

  ul>li*5
  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>
  

标签分组

• 在生成属性时为了更明显的看出每个层次间的关系，可以使用小括号将他们包起来,这并不影响生成的结果

  div>(header>ul>li*2>a)+footer>p
  <div>
  
      <header>
          <ul>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
          </ul>
      </header>
  
      <footer>
          <p></p>
      </footer>
  </div>
  

生成多个重复的标签结构

• 根据以上两点，就可以生成多个重复的结构

  div>(ul>li)*3
  <div>
      <!-- 1 -->
      <ul>
          <li></li>
      </ul>
      <!-- 2 -->
      <ul>
          <li></li>
      </ul>
      <!-- 3 -->
      <ul>
          <li></li>
      </ul>
  </div>
  

生成带有编号的标签

• 使用$符号代替数字可以自增地生成数字并放入标签

  .abc
  <div class="abc"></div>
  
  .abc$
  <div class="abc1"></div>
  
  .abc$*3
  <div class="abc1"></div>
  <div class="abc2"></div>
  <div class="abc3"></div>
  
  ul>li{$}*3
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
  </ul>
  
  <!-- 把符号放在十位即可在十位进行自增 -->
  ul>li{$5}*3
  <ul>
      <li>15</li>
      <li>25</li>
      <li>35</li>
  </ul>
  
  

• 生成多位数的标签使用多个$即可

  ul>li{$$}*3
  <ul>
      <li>01</li>
      <li>02</li>
      <li>03</li>
  </ul>
  

• 排序生成编号
  • 使用$@进行正序排列

    ul>li{$@}*3
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    

    看起来和$没什么区别
    在$@后加上数字看看

    ul>li{$@3}*3
    <ul>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    

    使用$@数字可以生成从指定数字开始生成的正序数列
• 使用$@-进行到倒序排列
  • 和正序使用方法如出一辙,不过不同的是，$@-可以生成从指定数字开始的数列并从大到小、自上而下进行排列

    ul>li{$@-3}*3
    <ul>
        <li>5</li>
        <li>4</li>
        <li>3</li>
    </ul>
    
    

正序数列**

• 使用$@-进行到倒序排列
  • 和正序使用方法如出一辙,不过不同的是，$@-可以生成从指定数字开始的数列并从大到小、自上而下进行排列

    ul>li{$@-3}*3
    <ul>
        <li>5</li>
        <li>4</li>
        <li>3</li>
    </ul>
    
    

CSS篇