sublime插件Emmet的使用

时间：2021-11-11 22:38:16

1.配置

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

2.安装emmet

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

sublime插件Emmet的使用

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

3.Emmet 的使用

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

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
sublime插件Emmet的使用
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
标签：

相关文章