Emmet 基本使用

来源：互联网发布：mac搭建lamp 编辑：程序博客网时间：2024/05/21 13:57

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

语法

后代：>

缩写：nav>ul>li

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

兄弟：+

缩写：div+p+bq

<div></div><p></p><blockquote></blockquote>

上级：^

缩写：div+div>p>span+em^bq

<div></div><div>    <p><span></span><em></em></p>    <blockquote></blockquote></div>

缩写：div+div>p>span+em^^bq

<div></div><div>    <p><span></span><em></em></p></div><blockquote></blockquote>

分组：()

缩写：div>(header>ul>li*2>a)+footer>p

<div>    <header>        <ul>            <li><a href=""></a></li>            <li><a href=""></a></li>        </ul>    </header>    <footer>        <p></p>    </footer></div>

乘法：*

缩写：ul>li*5

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

自增符号：$

缩写：ul>li.item$*5

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

缩写：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$$$*5

<ul>    <li class="item001"></li>    <li class="item002"></li>    <li class="item003"></li>    <li class="item004"></li>    <li class="item005"></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

<ul>    <li class="item3"></li>    <li class="item4"></li>    <li class="item5"></li>    <li class="item6"></li>    <li class="item7"></li></ul>

ID和类属性

<div id="header"></div>

缩写：.title

<div class="title"></div>

缩写：form#search.wide

<form id="search" class="wide"></form>

缩写：p.class1.class2.class3

<p class="class1 class2 class3"></p>

自定义属性

缩写：p[title=”Hello world”]

<p title="Hello world"></p>

缩写：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

缩写：[a=’value1’ b=”value2”]

<div a="value1" b="value2"></div>

文本：{}

缩写：a{Click me}

<a href="">Click me</a>

缩写：p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

隐式标签

缩写：.class

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

缩写：em>.class

<em><span class="class"></span></em>

缩写：ul>.class

<ul>    <li class="class"></li></ul>

缩写：table>.row>.col

<table>    <tr class="row">        <td class="col"></td>    </tr></table>

HTML

所有未知的缩写都会转换成标签，例如，foo →

缩写：!

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

缩写：a

<a href=""></a>

缩写：a:link

<a href="http://"></a>

缩写：a:mail

<a href="mailto:"></a>

缩写：abbr

<abbr title=""></abbr>

缩写：br

<br />

缩写：hr

<hr />

缩写：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" />

缩写：meta

<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" />

缩写：style

<style></style>

缩写：script

<script></script>

缩写：script:src

<script src=""></script>

缩写：img

<img src="" alt="" />

缩写：form

<form action=""></form>

缩写：form:get

<form action="" method="get"></form>

缩写：form:post

<form action="" method="post"></form>

缩写：label

<label for=""></label>

缩写：input

<input type="text" />

缩写：input:hidden

别名：input[type=hidden name]

<input type="hidden" name="" />

0 0