emmet 快捷键总结

来源：互联网发布：男鞋知乎编辑：程序博客网时间：2024/05/17 16:16

emmet

快捷键总结

初始化 ! 或者 html:5

缩写:!

缩写:html:5

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body></body></html>

#(id) .(class) [href=#]

缩写：p#info

缩写：p.info

缩写：a[href=’#’]

<p id="info"></p><p class="info"></p><a href="#"></a>

后代 >

缩写：div#warp>ul>li*10

<div id="warp">    <ul>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div>

兄弟：+

缩写：div#warp>p.one+span.two

<div id="warp">        <p class="one"></p>        <span class="two"></span></div>

^ 可以使该符号前的标签提升一行（换行符）

缩写 p.class>span^div.info

缩写 ul>li*10^ol>li*6

<p class="class"><span></span></p><div class="info"></div><ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul><ol>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ol>

分组通过嵌套和括号快速生成一些代码块

缩写：(div.foo>h1>p)+(div.bar>h3>p)

    <div class="foo">        <h1>            <p></p>        </h1>    </div>    <div class="bar">        <h3>            <p></p>        </h3>    </div>

`隐藏标签的快捷键`

.itrm 表示 div.item

但是在不同的标签下面代表的情况不一样

li : 在ul或者ol中

tr : table

td : 用于tr中

option : 用于select

`定义多个元素`

缩写：ul>li*3

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

缩写：ul>li.item$*3

<ul>    <li class="item1"></li>    <li class="item2"></li>    <li class="item3"></li></ul>

`css 缩写`

w100 => width:100px;
m100 =>margin: 100px;
h100 => height :100px;

默认是 px 其他的单位需要表示

p 表示%e 表示 emx 表示 ex

缩写： @f
缩写： @f

    @font-face {            font-family:;            src:url();        }    @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;    }

`模糊匹配`

缩写： fz => font-size:;
缩写： fs => font-style: italic;

`供应商模式`

w 表示 -webkit-m 表示 -moz-s 表示 -ms-o 表示 -o-

`渐变`

缩写：lg(left, #fff 50%, #000)

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));background-image: -webkit-linear-gradient(left, #fff 50%, #000);background-image: -moz-linear-gradient(left, #fff 50%, #000);background-image: -o-linear-gradient(left, #fff 50%, #000);background-image: linear-gradient(left, #fff 50%, #000);

`填充内容`

//缩写：h$[title=item$]{Header $}*3<h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>//缩写：ul>li.item$$${item $}*5<ul>    <li class="item001">item 1</li>    <li class="item002">item 2</li>    <li class="item003">item 3</li>    <li class="item004">item 4</li>    <li class="item005">item 5</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$@3*5   //$@3 从三开始 <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   //$@-3  倒数到三 <ul>    <li class="item7"></li>    <li class="item6"></li>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li></ul>

阅读全文

1 0

emmet 快捷键总结

emmet

初始化 ! 或者 html:5

#(id) .(class) [href=#]

后代 >

兄弟：+

^ 可以使该符号前的标签提升一行（换行符）

分组 通过嵌套和括号快速生成一些代码块

隐藏标签的快捷键

定义多个元素

css 缩写

模糊匹配

供应商模式

渐变

填充内容