html标签的快捷
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标签的快捷的更多相关文章
- (30)odoo中的快捷标签
* 快捷标签 提供快捷标签是为了简化代码的编码,把复杂的工作封装化 * 找到封装化的源码: openerp/tools/convert.py xml_import self._ ...
- 使用自定义标签模拟jstl的<c:for each>标签
一.自定义标签的基本编写 下面编写一个自定义标签,它可以输出当前的时间. 1.编写标签类 类可以通过继承SimpleTagSupport类实现一个标签类编写.父类为我们提供了一些编写自定义标签的快捷的 ...
- React实现checkbox group多组选项和标签组显示的联动
实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...
- 浅谈RFID电子标签封装技术
1RFID技术概述 1.1RFID技术概念 RFID是RadioFrequencyIdentification的缩写,即射频识别技术,俗称电子标签.RFID射频识别是一种非接触式的自动识别技术,它通过 ...
- Mac_Sublime Text3(mac)一些插件和快捷键
下载地址http://www.sublimetext.com/3 一.安装Package Control 按Ctrl + ` 调出console,粘贴下列安装代码到底部命令行并回车: import u ...
- 将你的Vim 打造成轻巧强大的IDE
Vim和Emacs一个称为神之编辑器一个被称为编辑器之神,固然很是夸张,但也足以说明这两 款软件的优秀和在程序员界的地位.但是它们都已漫长的学习曲线让人望而生畏,阻止了大 多数人进入.作为一名几乎完全 ...
- Sublime Text3(mac)一些插件和快捷键
Sublime Text3(mac)一些插件和快捷键 楚简约 关注 2017.02.24 17:02* 字数 1216 阅读 412评论 0喜欢 2 下载地址http://www.sublimetex ...
- sublime text3 (Mac) 快捷键
符号说明 符号 说明 ⌘ command ⌃ control ⌥ option ⇧ shift ↩ enter ⌫ delete 打开/关闭/前往 快捷键 功能 ⌘⇧N 打开一个新的sublime窗口 ...
- Mac Sublime Text3快捷键
下载地址http://www.sublimetext.com/3 一.安装Package Control 按Ctrl + ` 调出console,粘贴下列安装代码到底部命令行并回车: import u ...
随机推荐
- BZOJ-2424: [HAOI2010]订货【费用流】
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1487 Solved: 1002[Submit][Status][Discuss] Descript ...
- luogu P2158 [SDOI2008]仪仗队 (欧拉函数)
欧拉函数裸题 可惜我太久没做题忘了欧拉函数是什么了... 注意判断一下n = 1的情况就好了 #include <cstdio> using namespace std; ; typede ...
- CSS一些特殊图形
CSS一些特殊图形 CSS绘制三角形 通过控制元素的border属性可以实现三角形效果; 首先来设置4个边框, 为50px solid [color] color设置成不同的颜色值看一下效果 < ...
- MySQL 中like的使用对于索引的影响
今天看了一篇对于like使用对索引的影响的文章,发现自己实践的跟文章得出结论不大一样.所以还是建议自己再看别人文章的时候自己亲自动手实践一下.以免学到不全面的知识. 列子: 先建立一张表: -- 创建 ...
- Laravel通过用户名和密码查询
一.如果要检查要验证的用户数据是否正确,可以使用: if (Auth::validate($credentials)) { // } 二.但是如果您想通过用户和密码从数据库中获取用户,您可以使用: / ...
- 502. IPO(最小堆+最大堆法 or 排序法)
题目: 链接:https://leetcode-cn.com/problems/ipo/submissions/ 假设 力扣(LeetCode)即将开始其 IPO.为了以更高的价格将股票卖给风险投资公 ...
- Linux終端一行命令发送邮件
近期由于经常需要给别人发送邮件,每次都要打开QQ邮箱觉得非常麻烦.想到Linux终端可以自定义命令,加上python可以实现邮件发送功能,于是自己写了一个终端send + 文件地址的命令. 首先贴上p ...
- eclipse 设置不弹出debug调试框
- 执行yum相关命令总是卡住,ctrl+c也退出不了
问题描述 在用yum.rpm命令安装或查询任何包时,执行相关命令后无任何反应,直接卡住,也未给出任何错误提示信息,ctrl+c也不好使,只能杀掉进程. 原因 出现此问题是因为rpm的数据库出现异常了, ...
- jQuery 抖动特效函数封装
<style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position: absolute; top: ...