学习Emmet的笔记
来源:互联网 发布:java中final修饰的类 编辑:程序博客网 时间:2024/05/21 13:23
在SublimeText3安装了Emmet插件之后除了知道html:5
可以输出HTML5的基本标签之后,就一直没有了解具体该怎么使用。今天打开了Emmet的文档查看具体用法,其简便使我后悔为什么不早些来学习怎么使用Emmet。下面是个人简单的笔记。
嵌套
嵌套使用的是>
符号,如div>ul>li
得到如下代码:
<div> <ul> <li></li> </ul></div>
而^
符号可以跳到上一层标签,如div>ul>li>span^^^div
得到如下代码:
<div> <ul> <li> <span></span> </li> </ul></div><div></div>
同级排列
连续写多个同一级的标签可以使用+
进行连接,如p+p+bq
得到如下代码:
<p></p><p></p><blockquote></blockquote>
组&同时生成多个同样标签
使用()
可以将括号内的标签组成一个组,如div>(header>p>span)+(footer>p)
得到:
<div> <header> <p><span></span></p> </header> <footer> <p></p> </footer></div>
而当需要同时生成多个相同的标签时,在标签后加上*
再加上需要生成的数量即可,如div>ul>li*3
得到:
<div> <ul> <li></li> <li></li> <li></li> </ul></div>
ID和Class和属性
除了生成基本空标签,Emmet还可以指定生成标签的ID、Class和其他的属性。
指定标签的ID需要在标签名后加上#id
,如div#div_id
。而指定标签的Class属性则是在标签名后加上.class
,如div.div_class1
。其他的属性则以以下格式:element[attribute1="content" attribute2="content"]
来指定其属性名字和值。
例如执行div.container>p#pid>span[style="color:blue"]
得到:
<div class="container"> <p id="pid"> <span style="color:blue"></span> </p></div>
标签内容
指定标签属性后,我们还可以指定用{}
指定标签的内容。结合上节内容div.container>p#pid>span[style="color:blue"]{Hello World!}
得到:
<div class="container"> <p id="pid"> <span style="color:blue">Hello World!</span> </p></div>
标号符 $
在用*
符号生成多个相同标签时,我们有时候还想为其Class属性或内容按顺序标上序号,这时候$
标识符就能很好发挥作用。
例如我们需要为3个<li>
标签的Class属性按顺序赋值,则可以执行以下语句div>ul>li.item$*3
便得到:
<div> <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul></div>
在某些特别的时候,或许还希望序号以倒序形式,又或者序号从某个指定的值开始计算,又或者序号以多位数表示,$
都能做到,以下是各种用法的例子:
序号以多位数表示:ul>li.item$$$*3
:
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li></ul>
倒序显示序号:ul>li.item$@-*3
:
<ul> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li></ul>
从特定的值开始:ul>li.item$@3*3
:
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li></ul>
从特定值开始倒序显示:ul>li.item$@-3*3
:
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li></ul>
隐式调用
当使用.
和#
显示ID名或Class名而不注明标签名的时候(如.class
、#id
,没有标签名),生成的标签默认跟上一级标签一致,而有些标签则变为内容标签,如div>#div^ul>.item
会生成
<div> <div id="div"></div></div><ul> <li></li></ul>
默认符合特殊规则的标签如下:
ul
和ol
中会生成li
table
、thead
、tbody
、和tfoot
中会生成tr
tr
中会生成td
select
和optgroup
中会生成option
乱数假文
通过使用lorem
作为一个元素,可以在标签内随机生成一定的假文。如ul.list>lorem.item*4
(与ul.list>.item*4>lorem
等价)得到:
<ul class="list"> <li class="item">Lorem ipsum dolor sit amet, ...</li> ...(略)</ul>
还可以在lorem
后加上数字指定需要输出的数量。
其他功能
在Sublime Text 3中,选择一个标签或文本按ctrl+shift+g
可以带出输入框从而可以添加该选中标签的外层标签。
对此还有其他应用,如选中纯文本:
1. Home2. News3. Product4. About
按ctrl+shift+G
呼出输入框后输入nav>ul.nav>.navitem$*>a|t
得到:
<nav> <ul class="nav> <li class="item1"><a href="">Home</a></li> <li class="item2"><a href="">News</a></li> <li class="item3"><a href="">Product</a></li> <li class="item4"><a href="">About</a></li> </ul></nav>
在需要匹配的标签后不加数字加入*
符号即可匹配上每个分行的元素。而其中a|t
的t
表示trim
可移除字符两端空格或其他预定义字符。
还有,同样以
HomeNewsProductAbout
为例,选中文本按下快捷键后输入ul>li[title=$#]*>{$#}+a[alt=$#]
得到:
<ul> <li title="Home">Home<img src="" alt="Home"></li> <li title="News">News<img src="" alt="News"></li> <li title="Product">Product<img src="" alt="Product"></li> <li title="About">About<img src="" alt="About"></li></ul>
$#
表示选中的元素的值,即可填入标签的属性或文本中。
注释快捷键 ctrl+/
快捷键可以快速注释光标所在的标签。
切换标签形式 ctrl+shift+`
快捷键可以快速切换标签形式(<tag></tag>
或<tag />
)。
删除标签 ctrl+shift+;
快捷键可以删除选中的标签(<tag></tag
一同删除)。
算式计算 ctrl+shift+Y
可以执行简单的加减乘除运算。如输入90+56/9
执行快捷键后得到结果96.22
,而\
作为运算符可以使结果取整。在编写CSS时能够发挥作用。
数字改变
选中数值后,ctrl+↑
和ctrl+↓
能够使选中的数值+1/-1,而ctrl+alt+↑
和ctrl+alt+↓
可以将数值+0.1/-0.1。
Jinja2快捷补全
学习Flask时候使用的是Jinja2模板引擎,发现也能使用tab
键进行补全,如输入extends
后执行就会出现:
{% extends "templates" %}
输入if
、for
执行得到:
{% if expr %}{% endif %}{% for item in sequence %}{% endfor %}
以上为学习Emmet的笔记。
- 学习Emmet的笔记
- Emmet 学习笔记
- Emmet学习笔记
- Emmet学习笔记
- PHP学习笔记五(插件emmet)
- 听说是前端必备的emmet---笔记
- emmet精简笔记【笔记】
- Emmet的eclipse插件
- emmet的常用快捷方式
- Emmet的简写演示
- Emmet的简单使用
- sublime 学习随笔(emmet)
- Emmet
- Emmet
- emmet
- Emmet
- Emmet
- Emmet的一些基本文档
- 测试人员都应该是好的产品人员
- Javascript中关于类型转换的一些问题
- IOS常用第三方框架 --- SVProgressHUD 提示效果
- spring mvc Interceptor
- Python学习笔记(一)
- 学习Emmet的笔记
- Android WebView相关知识(全)
- sqlite数据库中第一条数据查不出来!
- 在线文档预览
- V4L2用户空间和kernel层driver的交互过程
- 识别常见编码格式文件并转换成UTF-8编码的java实现
- Spring Security hello world example
- IEEEtran参考文献乱码
- 关于Fragment嵌套Fragment中onActivityforresult无法调用的解决