emmet 基本语法汇总 -

xuefeng3600

浏览: 28785 次
性别:

最近访客更多访客>>

ice_cream_bing

ljf_home

klxqljq

Francis.lin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

emmet 基本语法汇总

CSS

Emmet是一个可以提高前端开发效率的实用插件，你可以通过极短的代码输入来获得你想要的代码结构，而你需要做的前期工作就是花些时间来熟悉emmet本身的语法，其实这些语法看起来并不复杂，下面就向大家分享一下emmet常用的基本语法。

一旦上手熟练emmet的基本语法之后，你会发现写代码是一件无比轻松愉快的事情！

如果你对emmet还不太熟悉，建议你查看一下之前发布的有关Emmet视频教程，如果你使用的是Dreamweaver开发的话，你可以查看一下Emmet Dreamweavercs6 扩展包的安装方法。

html结构快速输出

Child: > 
 
输入：nav>ul>li
输出：
<nav>
    <ul>
      <li></li>
    </ul>
</nav>
 
Multiplication: *  
 
输入：ul>li*5
输出：
<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>
 
Item numbering: $
 
输入：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>
 
输入：form#search.wide
输出： <form id="search" class="wide"></form>
 
输入：p.class1.class2.class3
输出：<p class="class1 class2 class3"></p>
 
ID and CLASS attributes 快速输出id和class标签结构
 
输入：#header
输出：
<div id="header"></div>
输入：.header
输出：
<div class="header"></div>
 
Sibling: + 组合标签
 
输入：div+p+bq
输出：
<div></div>
<p></p>
<blockquote></blockquote>
 
Climb-up: ^
 
输入：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>
 
Grouping: ()
 
输入：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>
 
输入：(div>dl>(dt+dd)*3)+footer>p
输出：
<div>
    <dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
   </dl>
</div>
<footer> <p></p> </footer>
 
Custom attributes 自定义对象
 
输入：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>
 
Text: {}
 
输入：a{Click me}
输出：<a href="">Click me</a>
 
输入：p>{Click }+a{here}+{ to continue}
输出：<p>Click <a href="">here</a> to continue</p>
 
Implicit tag names
 
输入：.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元素快速输出

输入：html:5
输出：
<!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>
 
acronym
    <acronym title=""></acronym>
 
base
    <base href="" />
 
basefont
    <basefont />
 
br
    <br />
 
frame
    <frame />
 
hr
    <hr />
 
bdo
    <bdo dir=""></bdo>
 
bdo:r
    <bdo dir="rtl"></bdo>
 
bdo:l
    <bdo dir="ltr"></bdo>
 
col
    <col />
 
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" />
 
link:rss
    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
 
link:atom
    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
 
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" />
 
meta:compat
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
 
style
    <style></style>
 
script
    <script></script>
 
script:src
    <script src=""></script>
 
img
    <img src="" alt="" />
 
iframe
    <iframe src="" frameborder="0"></iframe>
 
embed
    <embed src="" type="" />
 
object
    <object data="" type=""></object>
 
param
    <param name="" value="" />
 
map
    <map name=""></map>
 
area
    <area shape="" coords="" href="" alt="" />
 
area:d
    <area shape="default" href="" alt="" />
 
area:c
    <area shape="circle" coords="" href="" alt="" />
 
area:r
    <area shape="rect" coords="" href="" alt="" />
 
area:p
    <area shape="poly" coords="" href="" 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" />
 
inp
    <input type="text" name="" id="" />
 
input:hidden
 
    Alias of input[type=hidden name]
    <input type="hidden" name="" />
 
input:h
 
    Alias of input:hidden
    <input type="hidden" name="" />
 
input:text, input:t
 
    Alias of inp
    <input type="text" name="" id="" />
 
input:search
 
    Alias of inp[type=search]
    <input type="search" name="" id="" />
 
input:email
 
    Alias of inp[type=email]
    <input type="email" name="" id="" />
 
input:url
 
    Alias of inp[type=url]
    <input type="url" name="" id="" />
 
input:password
 
    Alias of inp[type=password]
    <input type="password" name="" id="" />
 
input:p
 
    Alias of input:password
    <input type="password" name="" id="" />
 
input:datetime
 
    Alias of inp[type=datetime]
    <input type="datetime" name="" id="" />
 
input:date
 
    Alias of inp[type=date]
    <input type="date" name="" id="" />
 
input:datetime-local
 
    Alias of inp[type=datetime-local]
    <input type="datetime-local" name="" id="" />
 
input:month
 
    Alias of inp[type=month]
    <input type="month" name="" id="" />
 
input:week
 
    Alias of inp[type=week]
    <input type="week" name="" id="" />
 
input:time
 
    Alias of inp[type=time]
    <input type="time" name="" id="" />
 
input:number
 
    Alias of inp[type=number]
    <input type="number" name="" id="" />
 
input:color
 
    Alias of inp[type=color]
    <input type="color" name="" id="" />
 
input:checkbox
 
    <input type="checkbox" name="" id="" />
 
input:c
 
    Alias of input:checkbox
    <input type="checkbox" name="" id="" />
 
input:radio
 
    Alias of inp[type=radio]
    <input type="radio" name="" id="" />
 
input:r
 
    Alias of input:radio
    <input type="radio" name="" id="" />
 
input:range
 
    Alias of inp[type=range]
    <input type="range" name="" id="" />
 
input:file
 
    Alias of inp[type=file]
    <input type="file" name="" id="" />
 
input:f
 
    Alias of input:file
    <input type="file" name="" id="" />
 
input:submit
    <input type="submit" value="" />
 
input:s
 
    Alias of input:submit
    <input type="submit" value="" />
 
input:image
    <input type="image" src="" alt="" />
 
input:i
 
    Alias of input:image
    <input type="image" src="" alt="" />
 
input:button
    <input type="button" value="" />
 
input:b
 
    Alias of input:button
    <input type="button" value="" />
 
isindex
    <isindex />
 
input:reset
 
    Alias of input:button[type=reset]
    <input type="reset" value="" />
 
select
    <select name="" id=""></select>
 
option
    <option value=""></option>
 
textarea
    <textarea name="" id="" cols="30" rows="10"></textarea>
 
menu:context
 
    Alias of menu[type=context]>
    <menu type="context"></menu>
 
menu:c
 
    Alias of menu:context
    <menu type="context"></menu>
 
menu:toolbar
 
    Alias of menu[type=toolbar]>
    <menu type="toolbar"></menu>
 
menu:t
 
    Alias of menu:toolbar
    <menu type="toolbar"></menu>
 
video
    <video src=""></video>
 
audio
    <audio src=""></audio>
 
html:xml
    <html xmlns="http://www.w3.org/1999/xhtml"></html>
 
keygen
    <keygen />
 
command
    <command />
 
bq
 
    Alias of blockquote
    <blockquote></blockquote>
 
acr
 
    Alias of acronym
    <acronym title=""></acronym>
 
fig
 
    Alias of figure
    <figure></figure>
 
figc
 
    Alias of figcaption
    <figcaption></figcaption>
 
ifr
 
    Alias of iframe
    <iframe src="" frameborder="0"></iframe>
 
emb
 
    Alias of embed
    <embed src="" type="" />
 
obj
 
    Alias of object
    <object data="" type=""></object>
 
src
 
    Alias of source
    <source></source>
 
cap
 
    Alias of caption
    <caption></caption>
 
colg
 
    Alias of colgroup
    <colgroup></colgroup>
 
fst, fset
 
    Alias of fieldset
    <fieldset></fieldset>
 
btn
 
    Alias of button
    <button></button>
 
btn:b
 
    Alias of button[type=button]
    <button type="button"></button>
 
btn:r
 
    Alias of button[type=reset]
    <button type="reset"></button>
 
btn:s
 
    Alias of button[type=submit]
    <button type="submit"></button>
 
optg
 
    Alias of optgroup
    <optgroup></optgroup>
 
opt
 
    Alias of option
    <option value=""></option>
 
tarea
 
    Alias of textarea
    <textarea name="" id="" cols="30" rows="10"></textarea>
 
leg
 
    Alias of legend
    <legend></legend>
 
sect
 
    Alias of section
    <section></section>
 
art
 
    Alias of article
    <article></article>
 
hdr
 
    Alias of header
    <header></header>
 
ftr
 
    Alias of footer
    <footer></footer>
 
adr
 
    Alias of address
    <address></address>
 
dlg
 
    Alias of dialog
    <dialog></dialog>
 
str
 
    Alias of strong
    <strong></strong>
 
prog
 
    Alias of progress
    <progress></progress>
 
datag
 
    Alias of datagrid
    <datagrid></datagrid>
 
datal
 
    Alias of datalist
    <datalist></datalist>
 
kg
 
    Alias of keygen
    <keygen />
 
out
 
    Alias of output
    <output></output>
 
det
 
    Alias of details
    <details></details>
 
cmd
 
    Alias of command
    <command />
 
ol+
 
    Alias of ol>li
    <ol> <li></li> </ol>
 
ul+
 
    Alias of ul>li
    <ul> <li></li> </ul>
 
dl+
 
    Alias of dl>dt+dd
    <dl> <dt></dt> <dd></dd> </dl>
 
map+
 
    Alias of map>area
    <map name=""> <area shape="" coords="" href="" alt="" /> </map>
 
table+
 
    Alias of table>tr>td
    <table> <tr> <td></td> </tr> </table>
 
colgroup+, colg+
 
    Alias of colgroup>col
    <colgroup> <col /> </colgroup>
 
tr+
 
    Alias of tr>td
    <tr> <td></td> </tr>
 
select+
 
    Alias of select>option
    <select name="" id=""> <option value=""></option> </select>
 
optgroup+, optg+
 
    Alias of optgroup>option
    <optgroup> <option value=""></option> </optgroup>
 
!!!
    <!doctype html>
 
!!!4t
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
!!!4s
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
!!!xt
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
!!!xs
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
!!!xxs
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
c
    <!-- ${child} -->
 
cc:ie6
    <!--[if lte IE 6]> ${child} <![endif]-->
 
cc:ie
    <!--[if IE]> ${child} <![endif]-->
 
cc:noie
    <!--[if !IE]><!--> ${child} <!--<![endif]-->

分享到：