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.