EMMET指令 - dreamline2/Front_End_Exchange GitHub Wiki

http://docs.emmet.io/cheat-sheet/ 參考網站 因為時常忘記 來做這邊做個紀錄 20131204

HTML快捷指令

Child: >

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

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>pspan+em^^bq
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

###Multiplication: * //乘法

  • ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

我現在大多數的用法 不適合用在zen-coding

###利用CLASSID直接變成DIV

#header
<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>

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


html的架構

  • html:5
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • html4
  • **html:4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • html:xt
Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

CSS主要EMMET

  • 基本大多數我會用到的

###position

pos:s
position:static;
pos:a
position:absolute;
pos:r
position:relative;
pos:f
position:fixed;

###width,height

w
width:;
w:a
width:auto;
h
height:;
h:a
height:auto;
maw
max-width:;
maw:n
max-width:none;
mah
max-height:;
mah:n
max-height:none;
miw
min-width:;
mih
min-height:;

###margin padding

Margin & Padding
m
margin:;
m:a
margin:auto;
mt
margin-top:;
mt:a
margin-top:auto;
mr
margin-right:;
mr:a
margin-right:auto;
mb
margin-bottom:;
mb:a
margin-bottom:auto;
ml
margin-left:;
ml:a
margin-left:auto;
p
padding:;
pt
padding-top:;
pr
padding-right:;
pb
padding-bottom:;
pl
padding-left:;
⚠️ **GitHub.com Fallback** ⚠️