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. loj6277 数列分块入门题1

    裸题分块. #include <bits/stdc++.h> using namespace std; ],b[],n,m,t1,t2,t3,t4,sq; int main(){ ios: ...

  2. Public Key Retrieval is not allowed

    链接MySQL数据库报错: 数据库连接url中添加对应属性的支持.allowPublicKeyRetrieval=true&useSSL=false url: jdbc:mysql://loc ...

  3. linux 安装java jdk

    1.检查一下系统中的jdk版本 [root@localhost software]# java -version 显示: openjdk version "1.8.0_102" O ...

  4. Bootstrap框架中radio设置值

    Bootstrap中的radio设置值不能像我们平常给普通radio赋值那样,因为无效. 我们用Bootstrap框架里的radio组件,代码: <div class="radio-l ...

  5. python爬取连续一字板股票及当时日期数据【原创分享】

    本篇为个人测试记录,记录爬取连续一字板的股票及当时日期. import tushare as ts import pandas as pd import time # 筛选一字板的策略 def gp_ ...

  6. .netcore 3.1高性能微服务架构:加入swagger接口文档

    本文为原创文章:首发:http://www.zyiz.net/tech/detail-108663.html swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视 ...

  7. AntDesign(React)学习-4 登录页面提交数据简单实现

    github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...

  8. 1、安装gitlab

    1.安装Gitlab Gitlab分为社区版和企业版(收费),这里安装的是ce社区版本 方式一: Gitlab官方有提供好的rpm包仓库,所以采用yum安装即可. [root@localhost ~] ...

  9. python UI自动化之js操作

    js处理iframe无需先切换到iframe上,再切回来操作.它可以在iframe上和主页面上来回自由操作. switch方法需要先切换到iframe上,操作完之后又的切换回来(很容易忘记切换回来), ...

  10. day18 sed

    具体功能作用: 1) 文件中添加信息的能力 (增) ok 2) 文件中删除信息的能力 (删) ok 3) 文件中修改信息的能力 (改) 4) 文件中查询信息的能力 (查) OK sed命令的语法信息 ...