Emmet指南

时间 2021-02-17

标签 javascript css html html5 java web shell api app svg 栏目 JavaScript 繁體版

原文原文链接

Emmet Grammar

HTML

输入以下三行任意一个，实现相同效果javascript

html:5
html5
!

输出效果css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    
</body>
</html>

为元素添加class, idhtml

p.red
div#form-login

为元素添加attributehtml5

input[value=10]
a[href=javascript:void(0)]
div[style=color:red]

输出效果java

<input type="text" value="10">
<a href="javascript:void(0)"></a>
<div style="color:red"></div>

为元素添加内容（innerText）web

section#slogan{Hello world!}

输出效果shell

<section id="slogan">Hello world!</section>

元素嵌套、同级、换行api

p>span
p.parg1+p.parg2
/* ^为表达式结束符 */
p>span^p

输出效果app

<p><span></span></p>

<p class="parg1"></p>
<p class="parg2"></p>

<p><span></span></p>
<p></p>

表达式分组，同^效果svg

(.foo>h1)+(.bar>h2)

输出效果

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

定义多个元素

ul>li*3

输出效果

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

为class顺序编号，使用$

ul>li.item$3

输出效果

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

CSS

CSS属性、单位的缩写mapping以下

/* 属性 */
m -> margin
w -> width
h -> height
ov-h -> overflow: hidden

/* 单位 */
p -> %
e -> em
x -> ex

@font-face

@f
@f+

输出效果

@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;
}

供应商前缀

trs
-super-foo

/* Browser prefix */
w -> -webkit-
m -> -moz-
s -> -ms-
o -> -o-

输出效果

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

渐变

lg(left, #fff 50%, #000)

输出效果

background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);

生成测试文本

lorem10

输出效果

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum deleniti molestiae voluptatem placeat sequi sint saepe rem omnis dolorem amet cumque perferendis rerum possimus, autem corrupti distinctio, aut. Repellendus.