emmet 插件

最新推荐文章于 2022-07-13 21:28:48 发布

xiaoxiang-chen

最新推荐文章于 2022-07-13 21:28:48 发布

阅读量1.6k

点赞数 2

分类专栏：前端

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

转自：https://blog.csdn.net/merciwen/article/details/72935414

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 表示 em
x 表示 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>

xiaoxiang-chen

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
emmet 插件

转自：https://blog.csdn.net/merciwen/article/details/72935414emmet快捷键总结初始化 ! 或者 html:5缩写:!缩写:html:5&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title
复制链接

扫一扫