插件Emmet 快速编写代码
Posted 称代先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了插件Emmet 快速编写代码相关的知识，希望对你有一定的参考价值。
最近新下载了一个编辑器，叫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=#] 在[]中填写元素的属性
<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 快速编写代码的主要内容，如果未能解决你的问题，请参考以下文章