首页 > 代码库 > 【插件】Emmet 快速编写代码

【插件】Emmet 快速编写代码

2024-08-25 17:51:26   214人阅读

最近新下载了一个编辑器，叫brackets。里面插件挺好弄的，直接安装就行。

据说Emmet很好用，所以打算把一些用法写在这里，方便查看。

1.在<head></head>中

2.在HTML中

（1）初始化

输入！（叹号）或html：5，然后按Tab键

 1  <!DOCTYPE html>
 2         <html lang="en">
 3         <head>
 4             <meta charset="UTF-8">
 5             <title>Document</title>
 6         </head>
 7         <body>
 8             
 9         </body>
10         </html>

（2）添加类、id、文本和属性

输入p.p1　　　　给p标签添加一个叫p1的类

<p class="p1"></p>

输入p#p2　　　　给p标签添加一个叫p2的id

<p id="p2"></p>

输入p.p1#p2　　　　给p标签同时添加一个叫p1的类和p2的id

<p class="p1" id="p2"></p>

输入h1{你好，我是h1标签}　　　　在{}中填写文本内容

<h1>你好，我是h1标签</h1>

 输入a[href=http://www.mamicode.com/#]　　　　　　在[]中填写元素的属性

<a href="#"></a>

（3）嵌套① >:子元素符号，表示嵌套的元素
父级元素>子级元素

输入h1>p　　子元素p被嵌套在父元素h1的里面

<h1>
   　<p></p>
</h1>

② +:同级标签符号

同级的元素+同级的元素

输入h1+p　　　　没有上下级关系

<h1></h1>
<p></p>

③ ^:让这个符号前的标签提升一行

h1>h2^p　　　　这个没太看懂，总之p和h1是同一级

<h1>
   <h2></h2>
</h1>
<p></p>

h1>h2+p　　　　h2和同一级的p被h1嵌套

<h1>
   <h2></h2>
   <p></p>
</h1>

（4）分组

用嵌套>和括号{}来快速生成一些代码块

(.person1>p)+(#person2>p+span.span1)

<div class="person1">
     <p></p>
</div>
<div id="person2">
     <p></p>
     <span class="span1"></span>　　//还能继续给span加上类
</div>

（5）隐式标签

 

【插件】Emmet 快速编写代码


联系
我们