Emmet基本语法学习及HTML缩写加速

一、开发环境:

采用Sublime Text + Emmet插件。

官方文档:http://docs.emmet.io/cheat-sheet/

二、基本语法快速入门:

1. 嵌套操作----------

子操作: >

div>ul>li

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

并列:+

div+ul>li

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

上级:^

ul>li^div

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

ul>li>a^^div 上级多层

<ul>
    <li><a href=""></a></li>
</ul>
<div></div>

重复:*

ul>li*3

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

分组:()

div>(p>span)*2

<div>
    <p><span></span></p>
    <p><span></span></p>
</div>

2. 属性操作----------

id和类

div#header+div.main+div#footer

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

属性值

a[title=test target=_self]

<a title="test" target="_self" href=""></a>

数列值:$

p.item$*3

<p></p>
<p></p>
<p></p>

p.item$$*3

<p></p>
<p></p>
<p></p>

数列操作符:@

p.item$@-*3   @- = -1

<p></p>
<p></p>
<p></p>

p.item$@3*3  @3 = 从3开始3次

<p></p>
<p></p>
<p></p>

p.item$@-3*3 @-3 = 3次后到3结束

<p></p>
<p></p>
<p></p>

3. 字符操作----------        

字符操作:{}

a{click}

<a href="">click</a>   

a>{click}+span{me}

<a href="">click<span>me</span></a>

4. 缺省元素----------

.header+.footer  ---------------  div.header+div.footer

ul>.item*3 -------------- ul>li.item*3

table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3

最后注意:如果搞不清楚顺序了,多用()。就像1+2×3,实际上是(1+2)×3

 三、缩写

简介:

缩写:!

<!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>

缩写:br

<br />

缩写:frame

<frame />

缩写:hr

<hr />

缩写:link

<link rel="stylesheet" href="" />

缩写:link:css

<link rel="stylesheet" href="style.css" />

缩写:link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

缩写:meta

<meta />

缩写:meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

缩写: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:password

别名:inp[type=password]

<input type="password" name="" id="" />

缩写:input:p

别名:input:password

<input type="password" name="" id="" />

缩写:select

<select name="" id=""></select>

缩写:option

<option value=""></option>

缩写:textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

缩写:menu:c

别名:menu:context

<menu type="context"></menu>

缩写:video

<video src=""></video>

缩写:audio

<audio src=""></audio>

缩写:bq

别名:blockquote

<blockquote></blockquote>

缩写:emb

别名:embed

<embed src="" type="" />

缩写:obj

别名:object

<object data="" type=""></object>

缩写:fst, fset

别名:fieldset

<fieldset></fieldset>

缩写:btn

别名:button

<button></button>

缩写:btn:b

别名:button[type=button]

<button type="button"></button>

缩写:btn:r

别名:button[type=reset]

<button type="reset"></button>

缩写:btn:s

别名:button[type=submit]

<button type="submit"></button>

 我的小站原文

参考:

http://www.oschina.net/code/snippet_66036_18625

http://www.cnblogs.com/matchless/archive/2013/04/10/3010628.html

http://docs.emmet.io/cheat-sheet/

http://my.oschina.net/blogshi/blog/212286



Emmet基本语法学习及HTML缩写加速,布布扣,bubuko.com

Emmet基本语法学习及HTML缩写加速

上一篇:编写高质量js代码


下一篇:iOS播放动态GIF图片