Emmet 快捷生成标签和 CSS

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:

你可以设置 CSS 形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容，也可以根据指定的语法糖来快速生成 html，下面我们来介绍这些语法规则。

在线教程地址

初始化

• HBuilder 默认配置好了 emmet

• VSCode 默认内置 emmet，如果用户自定义修改过配置文件关掉了 emmet 功能，使用时需要在 setting.json 中添加"emmet.triggerExpansionOnTab": true

快捷生成 html

HTML 模版

html:5 或!：用于 HTML5 文档类型

html:xml用于 XHTML 过渡文档类型

id 选择器 #

div#box

<div id="box"></div>

类选择器 .

div.box

<div class="box"></div>

后代 >

div.box>ul>li>p>span

<div class="box">
  <ul>
    <li>
      <p><span></span></p>
    </li>
  </ul>
</div>

兄弟 +

div#id>p+ul>li>p>span

<div id="id">
  <p></p>
  <ul>
    <li>
      <p><span></span></p>
    </li>
  </ul>
</div>

上级 ^

div>ul>li>p>span^^^p (^后面不添加符号默认为+)

<div>
  <ul>
    <li>
      <p><span></span></p>
    </li>
  </ul>
  <p></p>
</div>

分组 ( )

div>(ul>li>p>span)+p

<div>
  <ul>
    <li>
      <p><span></span></p>
    </li>
  </ul>
  <p></p>
</div>

自定义属性 [ ]

img[title="title" src="https://www.baidu.com"].img

<img src="https://www.baidu.com" alt="" title="title" class="img" />

标签内容 { }

div>ul>li>p>span{Foo}

<div>
  <ul>
    <li>
      <p><span>Foo</span></p>
    </li>
  </ul>
</div>

乘法 *

div>(ul>li[key="test"]*5>p>span{})+p{footer}

<div>
  <ul>
    <li key="test">
      <p><span></span></p>
    </li>
    <li key="test">
      <p><span></span></p>
    </li>
    <li key="test">
      <p><span></span></p>
    </li>
    <li key="test">
      <p><span></span></p>
    </li>
    <li key="test">
      <p><span></span></p>
    </li>
  </ul>
  <p>footer</p>
</div>

自增符号 $ （递增@，递减@-）

div>(ul>li[key="test$@5"]\*5>p{title$@-}>span{test$@-5})+p{footer$5}

<div>
  <ul>
    <li key="test5">
      <p>
        title5
        <span>test9</span>
      </p>
    </li>
    <li key="test6">
      <p>
        title4
        <span>test8</span>
      </p>
    </li>
    <li key="test7">
      <p>
        title3
        <span>test7</span>
      </p>
    </li>
    <li key="test8">
      <p>
        title2
        <span>test6</span>
      </p>
    </li>
    <li key="test9">
      <p>
        title1
        <span>test5</span>
      </p>
    </li>
  </ul>
  <p>footer15</p>
</div>

div[key="$$$@-"]\*5

<div key="005"></div>
<div key="004"></div>
<div key="003"></div>
<div key="002"></div>
<div key="001"></div>

div>p>span{test$$$@-5}*5

<div>
  <p>
    <span>test009</span>
    <span>test008</span>
    <span>test007</span>
    <span>test006</span>
    <span>test005</span>
  </p>
</div>

隐式标签转换

1. body 下 div 内部直接写.class 或#class 默认转换结果为<div id="class"></div>
2. p,h1~h5,a,span,p 标签等文本标签内部写.class 或#class 默认转换结果为<span class="class"></span>
3. ul 内部默认转换为 li
4. table 一级默认为 tr 二级默认为 td
   更多省略写法请参考技术博客 1 技术博客 2

快捷生成 CSS

模糊匹配

w100p

width: 100%;

ovh

overflow: hidden;

h100

height: 100px;

w:calc(100%-100vw)

width: calc(100% -100vw);

p 表示 %，
e 表示 em，
x 表示 ex，

快捷生成 link

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

快捷方式：link:css

<link rel="stylesheet" href="style.css" />

快捷方式：link:print

<link rel="stylesheet" href="print.css" media="print" />

快捷方式：link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

快捷方式：link:touch

<link rel="apple-touch-icon" href="favicon.png" />

快捷方式：link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

快捷方式：link:atom

<link
  rel="alternate"
  type="application/atom+xml"
  title="Atom"
  href="atom.xml"
/>

快捷生成 meta

快捷方式：meta:utf

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

快捷方式：meta:win

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

快捷方式：meta:vp

<meta
  name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>

快捷方式：meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

快捷方式：style

<style></style>

快捷方式：script

<script></script>

快捷方式：script:src

<script src=""></script>

头脑风暴

div.class>ul>li

div+p+span

div#class>ul>li^span

div.class>(p#id)+(h1>span)

div[click="onClick"]>ul>li

div>ul>li{test}

div>ul>li{test$@-5}*5

div.class>ul>li>p>span

div#id>p+ul>li>p>span

div>ul>li>p>span^^^p

div>(ul>li>p>span)+p

img[title="title" src="https://www.baidu.com"].img

div>(ul>li[key="test"]*5>p>span{})+p{footer}

div>(ul>li[key="test$@5"]*5>p{title$@-}>span{test$@-5})+p{footer$5}

div[key="$$$@-"]*5

div>p>span{test$$$@-5}*5

div.box#box>(ul>li[key="$$$@-5"]*8)+p{test$$$@5}*8>span{$$$@-}