emmet精简笔记【笔记】
2016-07-19 21:14
423 查看
在用sublime Text的过程中,使用emmet确实是一个比不可少的工具,使用emmet插件能够大大减少重复敲键盘的次数,而emmet的语法也相当的简单;下面将简单的记录一下一些比较特别的语法;
缩写:nav>ul>li
缩写:div+p+bq
缩写:div+div>p>span+em^bq
缩写:div+div>p>span+em^^bq
缩写:div>(header>ul>li*2>a)+footer>p
缩写:ul>li*5
缩写:ul>li.item$*5
缩写:h$[title=item$]{Header $}*3
缩写:ul>li.item$$$*5
缩写:ul>li.item$@-*5
缩写:ul>li.item$@3*5
缩写:.title
缩写:form#search.wide
缩写:p.class1.class2.class3
缩写:a{Click me}
缩写:p>{Click }+a{here}+{ to continue}
缩写:.class
缩写:em>.class
缩写:ul>.class
缩写:table>.row>.col
后代:>
缩写:nav>ul>li<nav> <ul> <li></li> </ul> </nav>
兄弟:+
缩写:div+p+bq<div></div> <p></p> <blockquote></blockquote>
上级:^
缩写:div+div>p>span+em^bq<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
缩写:div+div>p>span+em^^bq
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
分组:()
缩写:div>(header>ul>li*2>a)+footer>p<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
乘法:*
缩写:ul>li*5<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
自增符号:$
缩写:ul>li.item$*5<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
缩写:h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>
缩写:ul>li.item$$$*5
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>
缩写:ul>li.item$@-*5
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
缩写:ul>li.item$@3*5
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
缩写:.title
<div class="title"></div>
缩写:form#search.wide
<form id="search" class="wide"></form>
缩写:p.class1.class2.class3
<p class="class1 class2 class3"></p>
文本:{}
缩写:a{Click me}<a href="">Click me</a>
缩写:p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
隐式标签
缩写:.class<div class="class"></div>
缩写:em>.class
<em><span class="class"></span></em>
缩写:ul>.class
<ul> <li class="class"></li> </ul>
缩写:table>.row>.col
<table> <tr class="row"> <td class="col"></td> </tr> </table>
相关文章推荐
- 解密 Uber 数据团队的基础数据架构优化之路
- android MVP 架构思路
- 题目1070:今年的第几天?
- caffe的python接口学习(8):caffemodel中的参数及特征的抽取
- Windows下VC++显示UTF-8编码中文
- Python操作memecache
- unix:fork()函数进阶讲解
- jboss eap 6.2 ear包 下使用log4j日志
- Sublime Text插件之Emmet
- SharedPreferences缓存
- Linux VMnet Adapter无法启动的解决办法
- 使用url获取网络资源
- Centos7.2配置yum源
- Hadoop3.0新特性
- 【小松教你手游开发】【系统模块开发】根据上一个GameObject坐标生成的tips界面
- 文件路径和文件读取方
- 装逼利器批量unzip
- centos下espeak文本转语音的代码实现
- POJ 1721 CARDS <置换群>
- JavaScript获取DOM元素位置和尺寸大小