【编程工具】Sublime Text3 之 Emmet 插件的详细使用的方法

时间:2020-12-31 09:06:22

这篇关于 Emmet 插件使用的博文之前就想写了,今天刚好闲暇时间,就花了一些时间进行了总结。

我们都这道 Emmet 这款插件在前端设计里被称为神器,确实,神器称号名不虚传。因为这款插件可以帮助我们高效的编写代码,以后写前端代码就不用复制粘贴了。仅仅寥寥几行代码,就可以把一个网页的整体框架给建立起来。好了话不多说,我们马上进入主题吧!

HMTL部分

1.创建标准的页面

创建标准 xhtml-1.0 页面:html:xt

创建标准 xhtml-1.1 页面:html:xxs

创建标准 html4 页面:html:4s

创建标准 html5 页面:!/html:5/html5

注意:单独输入 html 只是单独创建一个 html 标签

2.创建html标签

输入任意标签名,然后按下 tab 键就会自动生成成对的标签。

3.创建带类的标签

方式:标签名 . 类名

如:p.classname

<p class="classname"></p>  

4.创建带id的标签

方式:标签名 #id 名称

如:p#idname

<p id="idname"></p>

5.创建带属性的标签

方式:标签名 [ 属性 = 属性值 ]

如:a[href=#]

<a href="#"></a>

6.创建带内容的标签

方式:标签名 { 文本内容 }

如:h1{text}

<h1>text</h1>

7.嵌套标签

嵌套使用的是符号 " > "

如:div>p

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

8.同级标签

同级使用的是符号 " + "

如:h1+h2

<h1></h1>
<h2></h2>

9.另一种特别的符号 " ^ "

" ^ " 可以使后面的标签提升一个层级

如:div^p

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

10.分组标签

" () " 可以将标签分组,十分常用

如:(div>p)+(div>p)

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

11.隐式标签

隐式标签就是当你不写的时候,默认生成的标签。

如:(.classname>p)+(.classname>p)

<div class="classname">
<p></p>
</div>
<div class="classname">
<p></p>
</div>

这里的 div 标签就是隐式标签。当然不能写成:(>p)+(>p)

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

所有隐式标签:

li:用于ul和ol中

tr:用于table,tboby,thead和tfoot中

td:用于tr中

option:用于select和optgroup中

div 在块级元素中默认,span 在行内元素中默认

12.同时创建多个标签

同时创建多个标签使用的是 " * "

如:div>p*3

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

13.同时创建多个带类名的标签

如:ul>li.classname$*3

<ul>
<li class="classname1"></li>
<li class="classname2"></li>
<li class="classname3"></li>
</ul>

14.同时创建多个带类名、内容、属性的标签

如:div>p.classname$[style=font-size:2$px]{$}*5

<div>
<p class="classname1" style="font-size:21px">1</p>
<p class="classname2" style="font-size:22px">2</p>
<p class="classname3" style="font-size:23px">3</p>
<p class="classname4" style="font-size:24px">4</p>
<p class="classname5" style="font-size:25px">5</p>
</div>

Css部分:

1.设置属性值

如:w100

width: 100px; 

当然除了px,还有其他的单位如:p, e, x

如:h20p+m2e+p2x

height: 20%;
margin: 2em;
padding: 2ex;

p:%

e:em

x:ex

2.附加属性

如:@f

@font-face {
font-family:;
src:url();
}

如果需要其他的属性,如:background-image, border-radius, font 等,可以使用 " + " 来生成。

如:@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;
}

3.模糊匹配

如果有些缩写你拿不准,Emmet 会根据你的输入内容匹配最接近的语法。

如:ov:h, ov-h, ovh, oh 生成的代码是相同的

overflow: hidden;

4.供应商前缀

如果输入非 W3C 标准的 CSS 属性,Emmet 会自动加上供应商前缀。

如:trs

-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;

你也可以在任意属性前加上 " - " 符号,也可以为该属性加上前缀。

如:-super-foo

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

如果不希望加上所有前缀,可以使用缩写来指定。

如:-wm-trf

-webkit-transform: ;
-moz-transform: ;
transform: ;

表示只加上-webkit和-moz前缀。

以下是缩写形式:

w:-webkit-

m:-moz-

s:-ms-

o:-o-

5.渐变

如:lg(left, #fff 50%, #000)

background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);

特殊的例子:

em>.classname
<em><span class="classname"></span></em> 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
别名:input[type=hidden name]
<input type="hidden" name="" /> input:h
别名:input:hidden
<input type="hidden" name="" /> input:text, input:t
别名:inp
<input type="text" name="" id="" /> input:search
别名:inp[type=search]
<input type="search" name="" id="" /> input:email
别名:inp[type=email]
<input type="email" name="" id="" /> input:url
别名:inp[type=url]
<input type="url" name="" id="" /> input:password
别名:inp[type=password]
<input type="password" name="" id="" /> input:p
别名:input:password
<input type="password" name="" id="" /> input:datetime
别名:inp[type=datetime]
<input type="datetime" name="" id="" /> input:date
别名:inp[type=date]
<input type="date" name="" id="" /> input:datetime-local
别名:inp[type=datetime-local]
<input type="datetime-local" name="" id="" /> input:month
别名:inp[type=month]
<input type="month" name="" id="" /> input:week
别名:inp[type=week]
<input type="week" name="" id="" /> input:time
别名:inp[type=time]
<input type="time" name="" id="" /> input:number
别名:inp[type=number]
<input type="number" name="" id="" /> input:color
别名:inp[type=color]
<input type="color" name="" id="" /> input:checkbox
别名:inp[type=checkbox]
<input type="checkbox" name="" id="" /> input:c
别名:input:checkbox
<input type="checkbox" name="" id="" /> input:radio
别名:inp[type=radio]
<input type="radio" name="" id="" /> input:r
别名:input:radio
<input type="radio" name="" id="" /> input:range
别名:inp[type=range]
<input type="range" name="" id="" /> input:file
别名:inp[type=file]
<input type="file" name="" id="" /> input:f
别名:input:file
<input type="file" name="" id="" /> input:submit
<input type="submit" value="" /> input:s
别名:input:submit
<input type="submit" value="" /> input:image
<input type="image" src="" alt="" /> input:i
别名:input:image
<input type="image" src="" alt="" /> input:button
<input type="button" value="" /> input:b
别名:input:button
<input type="button" value="" /> isindex
<isindex /> input:reset
别名: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
别名:menu[type=context]>
<menu type="context"></menu> menu:c
别名:menu:context
<menu type="context"></menu> menu:toolbar
别名:menu[type=toolbar]>
<menu type="toolbar"></menu> menu:t
别名: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
别名:blockquote
<blockquote></blockquote> acr
别名:acronym
<acronym title=""></acronym> fig
别名:figure
<figure></figure> figc
别名:figcaption
<figcaption></figcaption> ifr
别名:iframe
<iframe src="" frameborder="0"></iframe> emb
别名:embed
<embed src="" type="" /> obj
别名:object
<object data="" type=""></object> src
别名:source
<source></source> cap
别名:caption
<caption></caption> colg
别名:colgroup
<colgroup></colgroup> 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>

附:

" $ " 代表自增符号

" $@- " 代表自减

" $@3 " 代表从3开始自增

" $@-3 " 代表从3开始自减

来源1     来源2