码迷,mamicode.com
首页 > 其他好文 > 详细

【插件】Emmet 快速编写代码

时间:2016-12-07 13:34:26      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:utf-8   pre   document   doctype   ref   lan   代码块   log   str   

最近新下载了一个编辑器,叫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 快速编写代码

标签:utf-8   pre   document   doctype   ref   lan   代码块   log   str   

原文地址:http://www.cnblogs.com/shenyanran/p/6140489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!