0
Poetry's Blog
source link: http://www.poetries.top/2016/09/09/Emmet%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Emmet常用快捷键
Created at 2016-09-09 Updated at 2017-01-06 Category 工欲善其事必先利其器 Tag Emmet
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>
(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>
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>
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
link:css
<link rel="stylesheet" href="style.css" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
script:src
<script src=""></script>
form:get
<form action="" method="get"></form>
input:hidden,input:h
<input type="hidden" name="" />
input:text,input:tinput:password,input:pinput:checkbox,input:cinput:radio,input:rinput:file,input:finput:submit,input:sinput:image,input:iinput:button,input:b
option,opt
<option value=""></option>
button:disabled,button:d,btn:d
<button disabled="disabled"></button>
ifr
<iframe src="" frameborder="0"></iframe>
btn
<button></button>
ul+
<ul>
<li></li>
</ul>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
table+
<table>
<tr>
<td></td>
</tr>
</table>
tr+
<tr>
<td></td>
</tr>
select+
<select name="" id="">
<option value=""></option>
</select>
c
<!-- -->
cc:ie6
<!--[if lte IE 6]>
${child}
<![endif]-->
visual formating
pos:sposition:static;pos:aposition:absolute;pos:rposition:relative;pos:fposition:fixed;ttop:;b:abottom:auto;lleft:;l:aleft:auto;zz-index:;z:az-index:auto;flfloat:left;fl:nfloat:none;fl:lfloat:left;fl:rfloat:right;clclear:both;cl:nclear:none;cl:lclear:left;cl:rclear:right;cl:bclear:both;ddisplay:block;d:ndisplay:none;d:bdisplay:block;d:idisplay:inline;d:ibdisplay:inline-block;d:itbdisplay:inline-table;d:tbcdisplay:table-cell;vvisibility:hidden;v:vvisibility:visible;v:hvisibility:hidden;ovoverflow:hidden;ov:voverflow:visible;ov:hoverflow:hidden;ov:soverflow:scroll;zoo, zmzoom:1;cur:dcursor:default;cur:hacursor:hand;cur:pcursor:pointer;
Margin & Padding
m:amargin:auto;mtmargin-top:;mt:amargin-top:auto;mrmargin-right:;mr:amargin-right:auto;mbmargin-bottom:;mb:amargin-bottom:auto;mlmargin-left:;ml:amargin-left:auto;ptpadding-top:;prpadding-right:;pbpadding-bottom:;plpadding-left:;
fwfont-weight:;fw:nfont-weight:normal;fw:bfont-weight:bold;fw:brfont-weight:bolder;fw:lrfont-weight:lighter;fsfont-style:${italic};fs:nfont-style:normal;fzfont-size:;fffont-family:;ff:sfont-family:serif;ff:ssfont-family:sans-serif;ff:mfont-family:monospace;ff:afont-family: Arial, "Helvetica Neue", Helvetica, sans-serif;ff:tfont-family: "Times New Roman", Times, Baskerville, Georgia, serif;ff:vfont-family: Verdana, Geneva, sans-serif;
Background
bgbackground:#000;bg+background:#fff url() 0 0 no-repeat;bg:nbackground:none;bgcbackground-color:#fff;bgc:tbackground-color:transparent;bgibackground-image:url();bgi:nbackground-image:none;bgrbackground-repeat:;bgr:nbackground-repeat:no-repeat;bgr:xbackground-repeat:repeat-x;bgr:ybackground-repeat:repeat-y;bgr:spbackground-repeat:space;bgr:rdbackground-repeat:round;bgabackground-attachment:;bga:fbackground-attachment:fixed;bga:sbackground-attachment:scroll;bgpbackground-position:0 0;bgpxbackground-position-x:;bgpybackground-position-y:;bgbkbackground-break:;bgbk:bbbackground-break:bounding-box;bgbk:ebbackground-break:each-box;bgbk:cbackground-break:continuous;bgcpbackground-clip:padding-box;bgcp:bbbackground-clip:border-box;bgcp:pbbackground-clip:padding-box;bgcp:cbbackground-clip:content-box;bgcp:ncbackground-clip:no-clip;bgobackground-origin:;bgo:pbbackground-origin:padding-box;bgo:bbbackground-origin:border-box;bgo:cbbackground-origin:content-box;bgszbackground-size:;bgsz:abackground-size:auto;bgsz:ctbackground-size:contain;bgsz:cvbackground-size:cover;
Color
ccolor:#000;c:rcolor:rgb(0, 0, 0);c:racolor:rgba(0, 0, 0, .5);opopacity:;
·@m·,@media·
@media screen {
@i,@import
@import url();
@kf
@keyframes identifier {
from { }
@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;
@f
font-face {
font-family:;
src:url(|);
!
!important
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK