https://www.jianshu.com/p/8f330e3571ee

一:

<ul>
<li><a href=""></a></li>
</ul> 如果要写上面的标签,直接写 ##ul>li>a 然后按Tap键盘,就可以快速构建

  

二:


<ul>
<li><a href=""></a></li>
</ul> 如果要写上面的标签,直接写 ##ul>li>a 然后按Tap键盘,就可以快速构建

  

三:同时还可以给标签添加属性:

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
ul>(li>a[#])*3 然后按Tap键,就可以快速撰写

  

四:不同的属性:

<ul>
<li><a href=""click="#"></a></li>
<li><a href=""click="#"></a></li>
<li><a href=""click="#"></a></li>
</ul>
ul>(li>a[click="#"])*3

  


五. 父子关系:>,使用>操作符在内部相互嵌套的标签:

div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>

  

六.:兄弟关系:+,使用+操作符将标签处于同一个层级:

div+p+footer
<div></div>
<p></p>
<footer></footer>

  

七:生成兄弟关系时,像ul dl这样的列表标签,使用+操作符将生成一个标准的列表结构:

ul+
<ul>
<li></li>
</ul>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>

  

八: 上级关系:^,使用 ^ 操作符使标签与前一标签的父级处于相同的级别:

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>ul>li*5

<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

  

十: 分组:(),用()操作符进行分组,使编写的代码结构更加清晰、明了,一组标签就相当一个元素:

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>

  

你可以使用多个(),并使用乘法*操作符:

(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>

  

CSS选择器,给标签指定id和class选择器,只需在标签的后面直接添加,但必需以.或#开头:

div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

  

Emmet默认的标签是div,所以我们在写带有CSS选择器的div标签时,可以省去div,你可以试试。

十一:自定义属性:[](英文下的中括号),使用[]操作符给标签添加自定义属性:

td[title="Hello world!" colspan=3]
<td title="Hello world!" colspan="3"></td>

  

可以把你喜欢的一些属性放在[]内,如果不指定属性值,代码将生成不带属性值的HTML默认标签:

td[colspan title]

属性值必需使用单引号或双引号,不然就会出现你可能想到的效果。

十二:. 项目编号:,使用∗可以重复的标签,,使用∗可以重复的标签,可以使标签生成有序列表,输出的值为数字:

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>

  

你也可以使用多个$操作符用0(零)来分填充数字:

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>

  

而从起始数字为3的列表倒序,只需把上面的Emmet代码item后面的数字写成@-3*5。

十三:. 文本:{},使用花括号来添加文本元素:

a{Click me}

<a href="">Click me</a>

注意:当{}作为单独的一个操作符使用时,a{click}和a>{click}将生成相同的标签,但当使用了多个,或用了其它操作符时将会生成不同的标签:

html标签的快捷的更多相关文章

  1. (30)odoo中的快捷标签

    * 快捷标签   提供快捷标签是为了简化代码的编码,把复杂的工作封装化   * 找到封装化的源码:  openerp/tools/convert.py   xml_import      self._ ...

  2. 使用自定义标签模拟jstl的<c:for each>标签

    一.自定义标签的基本编写 下面编写一个自定义标签,它可以输出当前的时间. 1.编写标签类 类可以通过继承SimpleTagSupport类实现一个标签类编写.父类为我们提供了一些编写自定义标签的快捷的 ...

  3. React实现checkbox group多组选项和标签组显示的联动

    实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...

  4. 浅谈RFID电子标签封装技术

    1RFID技术概述 1.1RFID技术概念 RFID是RadioFrequencyIdentification的缩写,即射频识别技术,俗称电子标签.RFID射频识别是一种非接触式的自动识别技术,它通过 ...

  5. Mac_Sublime Text3(mac)一些插件和快捷键

    下载地址http://www.sublimetext.com/3 一.安装Package Control 按Ctrl + ` 调出console,粘贴下列安装代码到底部命令行并回车: import u ...

  6. 将你的Vim 打造成轻巧强大的IDE

    Vim和Emacs一个称为神之编辑器一个被称为编辑器之神,固然很是夸张,但也足以说明这两 款软件的优秀和在程序员界的地位.但是它们都已漫长的学习曲线让人望而生畏,阻止了大 多数人进入.作为一名几乎完全 ...

  7. Sublime Text3(mac)一些插件和快捷键

    Sublime Text3(mac)一些插件和快捷键 楚简约 关注 2017.02.24 17:02* 字数 1216 阅读 412评论 0喜欢 2 下载地址http://www.sublimetex ...

  8. sublime text3 (Mac) 快捷键

    符号说明 符号 说明 ⌘ command ⌃ control ⌥ option ⇧ shift ↩ enter ⌫ delete 打开/关闭/前往 快捷键 功能 ⌘⇧N 打开一个新的sublime窗口 ...

  9. Mac Sublime Text3快捷键

    下载地址http://www.sublimetext.com/3 一.安装Package Control 按Ctrl + ` 调出console,粘贴下列安装代码到底部命令行并回车: import u ...

随机推荐

  1. BZOJ-2424: [HAOI2010]订货【费用流】

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1487  Solved: 1002[Submit][Status][Discuss] Descript ...

  2. luogu P2158 [SDOI2008]仪仗队 (欧拉函数)

    欧拉函数裸题 可惜我太久没做题忘了欧拉函数是什么了... 注意判断一下n = 1的情况就好了 #include <cstdio> using namespace std; ; typede ...

  3. CSS一些特殊图形

    CSS一些特殊图形 CSS绘制三角形 通过控制元素的border属性可以实现三角形效果; 首先来设置4个边框, 为50px solid [color] color设置成不同的颜色值看一下效果 < ...

  4. MySQL 中like的使用对于索引的影响

    今天看了一篇对于like使用对索引的影响的文章,发现自己实践的跟文章得出结论不大一样.所以还是建议自己再看别人文章的时候自己亲自动手实践一下.以免学到不全面的知识. 列子: 先建立一张表: -- 创建 ...

  5. Laravel通过用户名和密码查询

    一.如果要检查要验证的用户数据是否正确,可以使用: if (Auth::validate($credentials)) { // } 二.但是如果您想通过用户和密码从数据库中获取用户,您可以使用: / ...

  6. 502. IPO(最小堆+最大堆法 or 排序法)

    题目: 链接:https://leetcode-cn.com/problems/ipo/submissions/ 假设 力扣(LeetCode)即将开始其 IPO.为了以更高的价格将股票卖给风险投资公 ...

  7. Linux終端一行命令发送邮件

    近期由于经常需要给别人发送邮件,每次都要打开QQ邮箱觉得非常麻烦.想到Linux终端可以自定义命令,加上python可以实现邮件发送功能,于是自己写了一个终端send + 文件地址的命令. 首先贴上p ...

  8. eclipse 设置不弹出debug调试框

  9. 执行yum相关命令总是卡住,ctrl+c也退出不了

    问题描述 在用yum.rpm命令安装或查询任何包时,执行相关命令后无任何反应,直接卡住,也未给出任何错误提示信息,ctrl+c也不好使,只能杀掉进程. 原因 出现此问题是因为rpm的数据库出现异常了, ...

  10. jQuery 抖动特效函数封装

    <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position: absolute; top: ...