你的位置:首页 > 网页设计

[网页设计]Emmet插件使用方法总结


Emmet插件使用方法总结

      在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

一、安装emmet:packages安装

下面方法适用于 sublime text 3。

1、安装 Package ctrl: 使用 ctrl + ~ 打开控制台,输入以下代码:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen('http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2、在 Package ctrl 中选择 Install package;

3、搜索 emmet 并安装。

二、快速编写HTML代码 

先来看一下这个插件的效果,

新建一个HTML文档,输入“!”或“html:5”,然后按Tab键

基本语法:

1、生成后代元素:>      大于号表示后面要生成的内容是当前标签的后代

命令:nav>ul>li 

每个命令输完后按下Tab键即可快速得到代码

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

2、生成兄弟元素:+     加号表示后面的元素和前面的元素是兄弟元素

命令:div+p+bq   得到代码如下:

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

3、生成上级元素:^   表示^后面的元素与^前面的元素的父元素是平级,及兄弟元素。一个^表示提升一个层级,两个提升两级

命令: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>

4、生成类名: .    Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li ></li>。 

命令:.container 得到代码如下:

<div ></div>

如果想生成多个类名可连续写

命令: .container.wrapper.more  得到代码如下:

<div ></div>

5、生成ID:#   

命令:#container  得到代码如下:

<div id="container"></div>

6、生成分组:()    用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系

命令:(.foo>h1)+(.bar>h2)  得到代码如下:

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

7、重复生成多份:*   *号后面是想重复生成的份数

命令:ul>li*5    得到代码如下:

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

8、对生成内容依次编号:$    $就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个$

命令:ul>li.item$*5   得到代码如下:

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

只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:
命令:ul>li.item$@-*5  得到代码如下:

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

同样,我们也可以使用 @N 指定开始的序号

命令:ul>li.item$@3*5  得到代码如下:

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

至于ul>li.item$@-3*5 生成什么你们自己琢磨吧!

9、生成自定义属性:[attr]   中括号里面的内容是你想添加的属性

命令:td[rowspan=2 colspan=3 title]  得到代码如下:

<td rowspan="2" colspan="3" title=""></td>

10、生成文本内容:{}  大括号里面是你想添加的文本内容

命令:a{Click me}  得到代码如下:

<a href="">Click me</a>

命令:p>{Click }+a{here}+{ to continue}  得到代码如下:

<p>Click <a href="">here</a>to continue</p>

到此为止基本语法内容也就这么多,剩下的就是加强理解与练习了,

ul>li.item${item$}*3

  <ul>  	<li >item1</li>  	<li >item2</li>  	<li >item3</li>  </ul>

 #content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words

  <div id="content">  	<div >  		<h1 title="papername" ></h1>  		<h3 title="subname" ></h3>  		<p ></p>  	</div>  </div> 

练习的过程中我们可以试着反推出命令行

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

  <table>  	<thead>  		<td ></td>  		<td ></td>  		<td ></td>  		<td ></td>  	</thead>  	<tbody>  		<tr >  			<td ></td>  		</tr>  		<tr >  			<td ></td>  		</tr>  		<tr >  			<td ></td>  		</tr>  	</tbody>  	<tfoot>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tfoot>  </table>

  <html>  <head>  	<title></title>  	<style type="text/css"></style>  	<script src="abc1.js" type="text/javascript"></script>  	<script src="abc2.js" type="text/javascript"></script>  	<script src="abc3.js" type="text/javascript"></script>  </head>  <body>  	<div >  		<div >  			<ul>  				<li><a href=""><span></span></a></li>  			</ul>  		</div>  	</div>  	<div >  		<div ></div>  		<div ></div>  		<div ></div>  	</div>  	<div >  		<div >  			<h1>article1</h1>  		</div>  		<div >  			<h1>article2</h1>  		</div>  		<div >  			<h1>article3</h1>  		</div>  	</div>  </body>  <div >copyright</div>  </html>

这些代码的命令你反推出来了吗?

1.命令:.header>ul.nav>li*6>a[style=block]>span{name}

2.命令:table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)

3.命令: html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})