Emmet快速补全

0、前言


1、VSCode自带集成Emmet,可直接使用。若其他编辑器使用再具体搜索

2、出现Emmet提示后制表符或者回车自动生成,后面不再赘述

例:输入a后按回车或者table即可生成

3、使用Table键还会自带输入位置调转,例如a,生成后就在href中,输入完Table就会到标签中间

一、HTML语句


1、基本功能

(1)标签缩略

  • div
  • a,直接打a
  • 等等一系列标签都可以

(2)嵌套使用

  • 例如:p>span就会生成<p><span></span></p>

可多重嵌套

(3)标签带 CSS的id或者class

  • 例如:div#test生成<div id="test"></div>

  • div.class生成<div class="class"></div>

  • 类可以一次生成多个,ID不能,div.test1.text2—><div class="test1 test2"></div>

  • 直接敲#test或者.class会默认生成以div为标签的内容,即和上面等效

  • div.class#test生成<div class="class" id="test"></div>

(4)顺带生成其他属性

  • a[tittle=”test”]生成<a href="" tittle="test"></a>;可写多个

(5)填充文本内容

  • h1{test}—><h1>test</h1>

2、批量生成

  • p*3
  • div.test*3生成css样式class=test的3个div。使用table还能够顺序书写内容

(1)名称带数字序占位$

  • div#test$*3生成

    1
    2
    3
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    比较实用,因为id只能唯一

(2)不从1开始生成数字序@

  • 不从1开始生成序号:div#test$$@2*5

    • 1
      2
      3
      4
      5
      <div id="test02"></div>
      <div id="test03"></div>
      <div id="test04"></div>
      <div id="test05"></div>
      <div id="test06"></div>
  • 加入倒序功能:div#test$$@-5*3新版本貌似失效。

3、嵌套生成

  • >生成子关系
  • +生成兄弟关系
  • ^生成父关系

(1)嵌套多重

  • div>p*3生成

    1
    2
    3
    4
    5
    <div>
    <p></p>
    <p></p>
    <p></p>
    </div>
  • 可多重叠加例如:div>p*2>p,但是需要注意,后面的选项会作用在前面的项的每一个

    1
    2
    3
    4
    5
    6
    7
    8
    <div>
    <p>
    <p></p>
    </p>
    <p>
    <p></p>
    </p>
    </div>
  • 可配套使用嵌入id等:div>p*3+h2.test1.test2生成

    1
    2
    3
    4
    5
    6
    <div>
    <p></p>
    <p></p>
    <p></p>
    <h2 class="test1 test2"></h2>
    </div>
  • header+main>section^footer

    1
    2
    3
    4
    5
    <header></header>
    <main>
    <section></section>
    </main>
    <footer></footer>
  • ul*2>li*2等价于(ul>li*2)*2

    1
    2
    3
    4
    5
    6
    7
    8
    <ul>
    <li></li>
    <li></li>
    </ul>
    <ul>
    <li></li>
    <li></li>
    </ul>

4、默认添加tag

  • .test默认生成的class=test的div标签

  • 列表后默认生成列表项

    • ul>.class*3=

      1
      2
      3
      4
      5
      <ul>
      <li class="class"></li>
      <li class="class"></li>
      <li class="class"></li>
      </ul>
  • 表格后面默认是行然后是列

    • table>.row*2>.col*3=table>tr.row*2>td.col*3

    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <table>
      <tr class="row">
      <td class="col"></td>
      <td class="col"></td>
      <td class="col"></td>
      </tr>
      <tr class="row">
      <td class="col"></td>
      <td class="col"></td>
      <td class="col"></td>
      </tr>
      </table>

5、默认属性生成

冒号使用。

  • 例:a:选择link则生成<a href="http://"></a>
  • 常用:script:src、meta中的各类

6、表单生成

from、input输入即提示,不再赘述。

select>option若想写带value的,select>[value=”test$”]*3,这里使用了默认select后默认认为你需要option

二、CSS


1、margin、padding

  • m10–>margin:10px;

  • m10p–>margin:10%;

  • m10r—>margin:10rem;

  • 可敲四个边框:m10-20-30-40—>margin: 10px 20px 30px 40px;

    • 同理,2-3个也一样适用
  • 单独敲:mt10—>margin-top: 10px;

    • mb、mr、ml同理

可以使用负值

2、改变字体

  • fz16—font-size: 16px;

  • fz1!—font-size: 1px !important;

CSS其它自行查阅。因为感觉不顺手

Emmet 文档

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~