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 ...
随机推荐
- loj6277 数列分块入门题1
裸题分块. #include <bits/stdc++.h> using namespace std; ],b[],n,m,t1,t2,t3,t4,sq; int main(){ ios: ...
- Public Key Retrieval is not allowed
链接MySQL数据库报错: 数据库连接url中添加对应属性的支持.allowPublicKeyRetrieval=true&useSSL=false url: jdbc:mysql://loc ...
- linux 安装java jdk
1.检查一下系统中的jdk版本 [root@localhost software]# java -version 显示: openjdk version "1.8.0_102" O ...
- Bootstrap框架中radio设置值
Bootstrap中的radio设置值不能像我们平常给普通radio赋值那样,因为无效. 我们用Bootstrap框架里的radio组件,代码: <div class="radio-l ...
- python爬取连续一字板股票及当时日期数据【原创分享】
本篇为个人测试记录,记录爬取连续一字板的股票及当时日期. import tushare as ts import pandas as pd import time # 筛选一字板的策略 def gp_ ...
- .netcore 3.1高性能微服务架构:加入swagger接口文档
本文为原创文章:首发:http://www.zyiz.net/tech/detail-108663.html swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视 ...
- AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
- 1、安装gitlab
1.安装Gitlab Gitlab分为社区版和企业版(收费),这里安装的是ce社区版本 方式一: Gitlab官方有提供好的rpm包仓库,所以采用yum安装即可. [root@localhost ~] ...
- python UI自动化之js操作
js处理iframe无需先切换到iframe上,再切回来操作.它可以在iframe上和主页面上来回自由操作. switch方法需要先切换到iframe上,操作完之后又的切换回来(很容易忘记切换回来), ...
- day18 sed
具体功能作用: 1) 文件中添加信息的能力 (增) ok 2) 文件中删除信息的能力 (删) ok 3) 文件中修改信息的能力 (改) 4) 文件中查询信息的能力 (查) OK sed命令的语法信息 ...