emmet：HTML/CSS代码快速编写神器

来源：互联网发布：免费收款收据打印软件编辑：程序博客网时间：2024/05/17 23:57

在 Sublime text 2 中安装 Emmet

Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了，如果你还没有安装这个插件，抓紧先去安装一下吧。安装完成之后，我们摁下“shift + ctrl + p”呼出面板，输入“pci”即可锁定“Package Control：Install Package”这个功能，回车之后就可以看到一个列表，我们继续输入“emmet”即可找到这个插件，回车之后等待一会就安装完成了。

html:xt 即可生成如下结构：

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

html:5 或者 ! 生成 HTML5 结构
html:xt 生成 HTML4 过渡型
html:4s 生成 HTML4 严格型

生成带有 id 、class 的 HTML 标签

#aaa

Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签，我们需要编写下面指令：

span.bbb

生成后代：>

div.aaa>ul>li

生成兄弟：+

div+p+bq就可以生成如下的 HTML 结构：<div></div><p></p><blockquote></blockquote>

生成上级元素：^

div>ul>li^span就会生成如下结构：<div>    <ul>        <li></li>    </ul>    <span></span></div>

想相对与 div 生成一个平级元素，那么就再上升一个层次，多用一个“^”符号：
div>ul>li^^span

重复生成多份：*

ul>li*5

生成分组：()
div>(header>ul>li*2>a)+footer>p
这样很明显就可以看出层次关系和并列关系，生成如下结构：

<div>    <header>        <ul>            <li><a href=""></a></li>            <li><a href=""></a></li>        </ul>    </header>    <footer>        <p></p>    </footer></div>

此外，分组还可以很方便的结合上面说的 “*” 符号生成重复结构：
(div>dl>(dt+dd)*3)+footer>p
生成结构：

<div>    <dl>        <dt></dt>        <dd></dd>        <dt></dt>        <dd></dd>        <dt></dt>        <dd></dd>    </dl></div><footer>    <p></p></footer>

生成自定义属性：[attr]

对生成内容编号：$

ul>li.item$*5这样就生成了如下结构：<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li></ul>$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个 $：

ul>li.item$@-*5生成如下结构：<ul>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li>    <li class="item2"></li>    <li class="item1"></li></ul>

生成文本内容：{}

a[href="http://www.qianxingzhem.com"]{点击这里到 潜行者m 的博客}

0 0