sublime插件Emmet的使用

来源：互联网发布：程序员之死事件女方编辑：程序博客网时间：2024/05/19 06:15

1.配置

在tools下配置package control，在preferences中点击package control

2.安装emmet

快捷键 Ctrl+Shift+P（菜单 – Tools – Command Paletter），输入 install 选中Install Package并回车，输入或选择你需要的插件回车就安装了（注意左下角的小文字变化，会提示安装成功）。
这里写图片描述

这里写图片描述

安装后重启下！（当然你也可以安装其他各种你需要的插件）

3.Emmet 的使用

Emmet –之前叫Zen coding，让代码飞起来。
输入 html:5 然后CTRL+E;

html:xt –>然后CTRL+E 得到：

<!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>1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

div.box –>然后CTRL+E 得到：

<div class="box"></div>1
1

div#myid –>然后CTRL+E 得到：

<div id="myid"></div>1
1

div.header>div#nav>a –>然后CTRL+E 得到：

<div class="header">    <div id="nav"><a href=""></a></div></div>1
2
3
1
2
3

div>ul>li*3 –>然后CTRL+E 得到

<div>    <ul>        <li></li>        <li></li>        <li></li>    </ul></div>1
2
3
4
5
6
7
1
2
3
4
5
6
7

input[type=’password’] 得到:

<input type="password">1
1

div>ul>li*5>a+span (‘+’表示是兄弟关系)得到:

<div>    <ul>        <li><a href=""></a><span></span></li>        <li><a href=""></a><span></span></li>        <li><a href=""></a><span></span></li>        <li><a href=""></a><span></span></li>        <li><a href=""></a><span></span></li>    </ul></div>1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

阅读全文

1 0