Emmet插件比较实用常用的写法

作者：echo7111436 | 2021-08-21 22:35

Emmet插件比较实用常用的写法

看了一些关于Emmet插件写法的文档，港真，怎么可以写这么长啊。其实知道几个大概要点加上实践基本就能上手写了啊

杂话

我前面有一篇【今天发现新大陆：haml和Emmet 】，其实一开始的想法是写给自己看的。

有人去阅读我的博客和评论，虽然不算多，但是对于我这种刚入门的小白渣渣还是受宠若惊的。我这大喜的蠢样子也是经常被男票说四不四傻……ㄟ(⊙ω⊙ㄟ)

嗯，跑偏了。总之，以后写东西不管是给自己看也好，给别人看都好。秉持着分享的精神一定认真好好的写(~Q~)

关于Emmet

Emmet插件的前身是Zen coding，可以大幅度提高前端开发效率的一个工具，也有人说类似于jade（高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用）。再官方一些的官方语言的叽叽喳喳我就不详写了，直接百度可以找到。

Emmet支持的编辑器：

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat （通过“Install Mixin”对话框添加)
Komodo Edit/IDE （通过Tools → Add-ons菜单添加)
Notepad++
PSPad
</li> <li>CodeMirror2/3</li> <li>Brackets</li> </ul> 第三方插件的支持 下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。 <ul> <li>SynWrite</li> <li>WebStorm</li> <li>PhpStorm</li> <li>Vim</li> <li>HTML-Kit</li> <li>HippoEDIT</li> <li>CodeLobster PHP Edition</li> <li>TinyMCE</li> </ul> Emmet安装方法(Sublime text 3安装emmet插件的方法：<a rel="nofollow" href="http://blog.csdn.net/mengke1124/article/details/41696779" target="_blank">http://blog.csdn.net/mengke1124/article/details/41696779</a>) 因为我用的是Sublime text 3，其他编辑器安装的方法可能要根据自己的需要在网上搜刮了 Emmet插件实用常用方法 （<a rel="nofollow" href="http://www.w3cplus.com/tools/emmet-cheat-sheet.html" target="_blank">http://www.w3cplus.com/tools/emmet-cheat-sheet.html</a>） 这篇文档写的很清晰，也有安装插件的方法。但是介绍的方法太多，感觉有点冗长，我汇总了一些我个人觉得比较实用常用的方法。 略写版： p>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素) (p>dl>(dt+dd)*3)+footer>p(括号内为一个组) ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1) h.item${hhh $}*5({}括号内为显示文本) ul>li.item$$$*5($为自增,三个$为三位数字) ul>li.item$@3*5(@从3开始自增+1) ul>li.item$@-*5(@-,自减) ul>li.item$@-3*5(@-3,自减最小数字为3) form#search.wide(#为id,.为类) p[title='hello word'](自定义属性) (隐式标签) .class em>.class ul>.class table>.row>.col !(页面html开始代码缩写) (缩写) a a:link hr link link.css meta:utf script:src img 详写版： p+p>p>span+em^bq(^为上级元素) <pre><p></p> <p> <p><span></span><em></em></p> <blockquote></blockquote> </p></pre> p+p>p>span+em^^bq <pre><p></p> <p> <p><span></span><em></em></p> </p> <blockquote></blockquote></pre> ul>li*5(>为后代缩写,*表示有几个) <pre><ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></pre> p>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素) <pre><p> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </p></pre> (p>dl>(dt+dd)*3)+footer>p(括号内为一个组) <pre><p> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </p> <footer> <p></p> </footer></pre> ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1) <pre><ul> <li1 title="item1">hhh 1</li1> <li2 title="item2">hhh 2</li2> <li3 title="item3">hhh 3</li3> <li4 title="item4">hhh 4</li4> <li5 title="item5">hhh 5</li5> </ul></pre> h.item${hhh $}*5({}括号内为显示文本) <pre><h class="item1">hhh 1</h> <h class="item2">hhh 2</h> <h class="item3">hhh 3</h> <h class="item4">hhh 4</h> <h class="item5">hhh 5</h></pre> ul>li.item$$$*5($为自增,三个$为三位数字) <pre><ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul></pre> ul>li.item$@3*5(@从3开始自增+1) <pre><ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul></pre> ul>li.item$@-*5(@-,自减) <pre><ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul></pre> ul>li.item$@-3*5(@-3,自减最小数字为3) <pre><ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul></pre> form#search.wide(#为id,.为类) <pre><form action="" id="search" class="wide"></form></pre> p[title='hello word'](自定义属性) <pre><p title="hello word"></p></pre> (隐式标签) .class <pre><p class="class"></p></pre> em>.class <pre><em><span class="class"></span></em></pre> ul>.class <pre><ul> <li class="class"></li> </ul></pre> table>.row>.col <pre><table> <tr class="row"> <td class="col"></td> </tr> </table></pre> !(页面html开始代码缩写) <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html></pre> (缩写) a <pre><a href=""></a></pre> a:link <pre><a href="http://"></a></pre> hr <pre><hr></pre> link <pre><link rel="stylesheet" href=""></pre> link.css <pre><link rel="stylesheet" href="" class="css"></pre> meta:utf <pre><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></pre> script:src <pre><script src=""></script></pre> img <pre><img src="" alt=""></pre> 官方api：http://docs.emmet.io/cheat-sheet/ api表：<a rel="nofollow" href="http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg" target="_blank">http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg</a> (●-●) 真心讨厌弄文本格式，感觉好浪费时间…… </div> <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;"> </div> <div class="article_recommend"> <div class="list_top">推荐阅读</div> <div class="ListItems"> <ul class="NewsList"> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/ShiMeShi_rowID--_3c72aeda.html" target="_blank" title="什么是rowID&rowNum(ROWID vs ROWNUM)">什么是rowID&rowNum(ROWID vs ROWNUM)</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《什么是rowID&rowNum(ROWIDvsROWNUM)》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ShiMeShi_rowID--_3c72aeda.html" target="_blank" title="什么是rowID&rowNum(ROWID vs ROWNUM)">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/Laravel_ShiYong__0333a644.html" target="_blank" title="Laravel使用JSON发送URL">Laravel使用JSON发送URL</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Laravel使用JSON发送URL》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Laravel_ShiYong__0333a644.html" target="_blank" title="Laravel使用JSON发送URL">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/GongYuBaoShi_-_R_a1e48d4a.html" target="_blank" title="公寓宝石:如何重命名租户？">公寓宝石:如何重命名租户？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《公寓宝石:如何重命名租户？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/GongYuBaoShi_-_R_a1e48d4a.html" target="_blank" title="公寓宝石:如何重命名租户？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/Zai_tableview_Zh_08953afb.html" target="_blank" title="在tableview中每五个单元格后的广告单元格">在tableview中每五个单元格后的广告单元格</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在tableview中每五个单元格后的广告单元格》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_tableview_Zh_08953afb.html" target="_blank" title="在tableview中每五个单元格后的广告单元格">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/RuHeZai_asp-net5_ecd9e3ee.html" target="_blank" title="如何在asp.net 5中为"asp-for"传递字符串值">如何在asp.net 5中为"asp-for"传递字符串值</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何在asp.net5中为"asp-for"传递字符串值》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZai_asp-net5_ecd9e3ee.html" target="_blank" title="如何在asp.net 5中为"asp-for"传递字符串值">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/XiangYaoFanHuiHu_d3e9afd0.html" target="_blank" title="想要返回会员列表">想要返回会员列表</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《想要返回会员列表》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/XiangYaoFanHuiHu_d3e9afd0.html" target="_blank" title="想要返回会员列表">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/PVC_KeYiBangDing_68fbc39a.html" target="_blank" title="PVC可以绑定到特定的PV吗？">PVC可以绑定到特定的PV吗？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《PVC可以绑定到特定的PV吗？》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/PVC_KeYiBangDing_68fbc39a.html" target="_blank" title="PVC可以绑定到特定的PV吗？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/PostgreSQL9-3-_J_74fccebb.html" target="_blank" title="PostgreSQL 9.3:将"DD-MM-YYYY"转换为"YYYY-MM-DD"">PostgreSQL 9.3:将"DD-MM-YYYY"转换为"YYYY-MM-DD"</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《PostgreSQL9.3:将"DD-MM-YYYY"转换为"YYYY-MM-DD"》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/PostgreSQL9-3-_J_74fccebb.html" target="_blank" title="PostgreSQL 9.3:将"DD-MM-YYYY"转换为"YYYY-MM-DD"">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/GoogleDrive_ShiY_14239855.html" target="_blank" title="Google Drive使用当前活动进行整合">Google Drive使用当前活动进行整合</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《GoogleDrive使用当前活动进行整合》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/GoogleDrive_ShiY_14239855.html" target="_blank" title="Google Drive使用当前活动进行整合">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/ZhengZeBiaoDaShi_d343d0e0.html" target="_blank" title="正则表达式量词错误">正则表达式量词错误</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《正则表达式量词错误》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ZhengZeBiaoDaShi_d343d0e0.html" target="_blank" title="正则表达式量词错误">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/WiXHeat-_YuGouJi_8ed7068a.html" target="_blank" title="WiX Heat:预构建事件在构建服务器上过早触发">WiX Heat:预构建事件在构建服务器上过早触发</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《WiXHeat:预构建事件在构建服务器上过早触发》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WiXHeat-_YuGouJi_8ed7068a.html" target="_blank" title="WiX Heat:预构建事件在构建服务器上过早触发">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/WuFaZai_ApacheWo_fb0f8a0f.html" target="_blank" title="无法在Apache WorkbookFactory上找到close()方法">无法在Apache WorkbookFactory上找到close()方法</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《无法在ApacheWorkbookFactory上找到close()方法》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WuFaZai_ApacheWo_fb0f8a0f.html" target="_blank" title="无法在Apache WorkbookFactory上找到close()方法">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/HuaFen_Bootstrap_2596ac5d.html" target="_blank" title="划分Bootstrap网格列的最佳方法">划分Bootstrap网格列的最佳方法</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/HuaFen_Bootstrap_2596ac5d.html" target="_blank" title="划分Bootstrap网格列的最佳方法"><img src="https://img.devbox.cn/3cccf/16086/243/0a4b7fe46a4eae26.png" width="120" height="70" alt="划分Bootstrap网格列的最佳方法"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《划分Bootstrap网格列的最佳方法》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/HuaFen_Bootstrap_2596ac5d.html" target="_blank" title="划分Bootstrap网格列的最佳方法">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/RuHeShanChu_-_Ge_be486bf9.html" target="_blank" title="如何删除/更改R中的图形geom_vline中的标签？">如何删除/更改R中的图形geom_vline中的标签？</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/RuHeShanChu_-_Ge_be486bf9.html" target="_blank" title="如何删除/更改R中的图形geom_vline中的标签？"><img src="https://img.devbox.cn/3cccf/16086/243/19b1e1e6bdac1293.png" width="120" height="70" alt="如何删除/更改R中的图形geom_vline中的标签？"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《如何删除/更改R中的图形geom_vline中的标签？》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/RuHeShanChu_-_Ge_be486bf9.html" target="_blank" title="如何删除/更改R中的图形geom_vline中的标签？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/HaXiYingSheZhong_a5c4f2fd.html" target="_blank" title="哈希映射中的自动装箱返回NULL">哈希映射中的自动装箱返回NULL</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《哈希映射中的自动装箱返回NULL》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/HaXiYingSheZhong_a5c4f2fd.html" target="_blank" title="哈希映射中的自动装箱返回NULL">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/WeiShiMeHongSe_-_e20fabba.html" target="_blank" title="为什么红色,绿色,蓝色图像通道是灰度级的(Matlab)？">为什么红色,绿色,蓝色图像通道是灰度级的(Matlab)？</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/WeiShiMeHongSe_-_e20fabba.html" target="_blank" title="为什么红色,绿色,蓝色图像通道是灰度级的(Matlab)？"><img src="https://img.devbox.cn/3cccf/16086/243/8e839f523b770d1d.png" width="120" height="70" alt="为什么红色,绿色,蓝色图像通道是灰度级的(Matlab)？"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《为什么红色,绿色,蓝色图像通道是灰度级的(Matlab)？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WeiShiMeHongSe_-_e20fabba.html" target="_blank" title="为什么红色,绿色,蓝色图像通道是灰度级的(Matlab)？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/DuiYuAnWei_NOT_Y_63fb174c.html" target="_blank" title="对于按位NOT运算,哪个更快:预先计算的表或`~`">对于按位NOT运算,哪个更快:预先计算的表或`~`</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《对于按位NOT运算,哪个更快:预先计算的表或`~`》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/DuiYuAnWei_NOT_Y_63fb174c.html" target="_blank" title="对于按位NOT运算,哪个更快:预先计算的表或`~`">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/ShiYongZhangLian_90ecb2d2.html" target="_blank" title="使用张量板时,如何总结在几个小型计算机上计算的损失？">使用张量板时,如何总结在几个小型计算机上计算的损失？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《使用张量板时,如何总结在几个小型计算机上计算的损失？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ShiYongZhangLian_90ecb2d2.html" target="_blank" title="使用张量板时,如何总结在几个小型计算机上计算的损失？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/RuHeZaiFeiBoFang_8891664b.html" target="_blank" title="如何在非播放应用程序中使用play框架配置库命令行参数">如何在非播放应用程序中使用play框架配置库命令行参数</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何在非播放应用程序中使用play框架配置库命令行参数》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZaiFeiBoFang_8891664b.html" target="_blank" title="如何在非播放应用程序中使用play框架配置库命令行参数">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员</a> <h2><a href="https://devbox.cn/p/RuHeJianCeDaoHan_71a46dfc.html" target="_blank" title="如何检测导航抽屉外的触摸事件">如何检测导航抽屉外的触摸事件</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/RuHeJianCeDaoHan_71a46dfc.html" target="_blank" title="如何检测导航抽屉外的触摸事件"><img src="https://img.devbox.cn/3cccf/16086/243/4252a71e1dc6e95e.png" width="120" height="70" alt="如何检测导航抽屉外的触摸事件"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《如何检测导航抽屉外的触摸事件》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeJianCeDaoHan_71a46dfc.html" target="_blank" title="如何检测导航抽屉外的触摸事件">[详细]</a> </div> <div style="clear:both"></div> </li> </ul> </div> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">吐了个 "CAO" !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册