快速编写HTML,CSS代码的有力工具Emmet插件

Emmet 是一个编辑器插件，它以一种简写的语法规则可用于快速编写html或css文档内容，它支持多种编辑器。

从官网：http://emmet.io/ 可下载各个编辑器的插件。
notepad++ 插件下载地址为：https://github.com/emmetio/npp#readme
也可以从Notepad++ “插件”->“插件管理器”菜单中安装Emmet插件，如果是手动下载安装包方式安装还需要安装Python插件。
安装好插件后可以在“设置”-》“快捷键管理”菜单中修改快捷键配置为Tab键，这样只需要在编辑器中输入Emmet代码然后按Tab键就可以生成对应的html代码了。

Emmet支持的简写规则，类似于CSS选择器。（大写的E代表一个HTML标签）：

E: 生成<E></E>

E#N: 生成<E id="N"></E>

E.N: 生成<E class="N"></E>

E{value}: 生成<E>value</E>

E+N: 生成<E></E><N></N>

E>N: 生成<E><N></N><E>

B>E^N: 生成<B><E></E></B><N></N>. >表示下级，^表示上级

E[attr1="foo1" attr2="foo2"]: 生成<E attr1="foo1" attr2="foo2"></E>

E*n:生成n个<E></E>

E$*n: 自动编号，生成<E1></E1><E2></E2>...<EN></EN>, $表示一位数字，如果$$表示01开始编号，$$$表示001开始编号

E$@m*n: 从m开始自动编号。

E$@-*n: 倒序自动编号，生成<EN></EN>...<E1></E1>

(E): 分组

请看下面的例子。

p

　　

p#main.item

　　

a[href=http://wikipedia.org]{维基百科}

　　

div>p

　　

div+p

　　

p>span^div

对应的HTML代码为：

<p></p>

　　

<p id="main" class="item"></p>

　　

<a href="http://wikipedia.org">维基百科</a>

　　

<div>

　　<p></p>

</div>

　　

<div></div>

<p></p>

　　

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

<div></div>

html:5或！ : 生成html5骨架代码，如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

html:xt :生成html4 traditional 骨架代码。
html:4s : 生成html4 strict 骨架代码。

[1] 不错的Emmet教程：http://www.tedlife.com/qian_duan_dai_ma_li_qi_emmet.html

[2] Emmet的高级功能：http://salonglong.com/emmet-advanced.html

[3] Emmet全部符号介绍：http://docs.emmet.io/cheat-sheet/

巴特西

快速编写HTML,CSS代码的有力工具Emmet插件

最新文章

热门文章