emment语法
emment插件语法.md
元素
div → <div></div>
foo → <foo></foo>
嵌套运算符
子: >
div>ul>li
生成的结果为:
<div>
<ul>
<li></li>
</ul>
</div>
兄弟: +
div+p+bq
生成的结果为:
<div></div>
<p></p>
<blockquote></blockquote>
上升: ^
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>
重复: *
ul>li*5
将生成:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
分组: ()
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>
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>
自定义属性,使用 [attr] 注解(就像在 CSS 中一样)来为元素添加自定义属性:
td[title=”Hello world!” colspan=3]
将生成:
<td title=”Hello world!” colspan=”3”></td>
td[colspan title]
将生成
<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>
使用多 $ 可以填充前导的零:
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>
在 $ 后面添加 @N 改变编号的基数:
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>
这些附加的运算符可以同时使用:
ul>li.item$@-3*5
将生成:
<ul>
<li class=”item7”></li>
<li class=”item6”></li>
<li class=”item5”></li>
<li class=”item4”></li>
<li class=”item3”></li>
</ul>
文本:
可以用花括号向元素中添加文本:
a{Click me}
将生成:
<a href=”“>Click me</a>
注意,这个 {text} 是被当成独立元素解析的(类似于 div, p ),但当其跟在其它元素后面时则有所不同。例如, a{click} 和 a>{click} 产生相同的输出,但是 a{click}+b{here} 和 a>{click}+b{here} 的输出就不同了:
<!– a{click}+b{here} –>
<a href=”“>click</a><b>here</b>
<!– a>{click}+b{here} –>
<a href=”“>click<b>here</b></a>
在第二示例中, \<b> 元素放在了 \<a> 元素的里面。差别如下:当 {text} 写在元素的后面,它不影响父元素的上下文。下面是展示这种差别的重要性的较复杂的例子:
p>{Click }+a{here}+{ to continue}
生成:
<p>Click <a href=”“>here</a> to continue</p>
在这个例子里, 我们用 > 运算符明确的将 Click here to continue 下移一级,放在 \<p> 元素内,但对于 a 元素的内容就不需要了,因为 \<a> 仅有 here 这一部分内容,它不改变父元素的上下文。
作为比较,下面是不带有 > 运算符的相同缩写:
p{Click }+a{here}+{ to continue}
生成:
<p>Click </p>
<a href=”“>here</a> to continue
缩写格式的注意事项
当熟悉了 Emmet 的缩写语法后,可能会想要使用一些格式来生成更可读的缩写。例如,在元素和运算符之间使用空格间隔:
(header > ul.nav > li*5) + footer
但是这种写法是错误的,因为空格是 Emmet 停止缩写解析的标识符。
请多用户误以为每个缩写都应写在新行上,但是他们错了:可以在文本的任意位置键入和扩展缩写。
emment语法的更多相关文章
- 配置vscode使它能够在自定义扩展名当中支持emment语法
在.vue文件当中默认是不支持emment的,需要在vscode设置当中设置 "emmet.syntaxProfiles": { "vue-html": &qu ...
- emmet学习笔记
Emment语法使用:按table键的结果1.初始化:(HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等). html:或! :用 ...
- VA Code编写html(1)
<html> <head> <title>my webside</title> <!--win+‘/’注释行--> <!--防止中文乱 ...
- 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、
CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...
- 2020年12月-第02阶段-前端基础-CSS字体样式
CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...
- Emmet 语法探析
Emmet 语法探析 Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具. 大多数编辑器都支持Snippet,即存储和重用一些代码块.但是前提是:你必须先定义 这些代码块. E ...
- sublime与Emment
sublime与Emment 作为一个开发者,想必用过sublime和Emment 的无不大快朵颐,这两者结合在一起简直是天合之作.它不仅仅提高编码的速度而且令开发者感到编码的乐趣和舒适感,今天准备写 ...
- HTML中的emment
emment的优点和使用方法: 优点:Emment是前端开发者必备的工具,使用它可以大大提高前端开发效率. 使用方法:Emment的使用方法非常简单,直接在编辑器上输入HTML和CSS代码的缩写,然后 ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
随机推荐
- C#获取内存图像数据流的方法
背景:有的时候我们已经得到一个图像的内存对象,如Bitmap对象,我们想要获取到这个对象的数据流,可以将其序列化到磁盘上,并且也可以反序列化为内存对象,这个时候就有了如题的问题出现,我搜遍全网就是没有 ...
- POJ 3616 DP
题意:给你N的时间,M的工作时间段,每个时间段有一个权重,还有一个R,每次完成一个工作需要休息R,问最后在时间N内,最大权重是多少. 思路:很简单的DP,首先对区间的右坐标进行排序,然后直接转移方程就 ...
- Java生成word文档
itext-rtf-2.1.7.jar,下载地址:http://download.csdn.net/detail/xuxu198899223/7717727 itext-2.1.7.jar 下载地址: ...
- Python中如何写控制台进度条的整理
本文实例讲述了Python显示进度条的方法,是Python程序设计中非常实用的技巧.分享给大家供大家参考.具体方法如下: 首先,进度条和一般的print区别在哪里呢? 答案就是print会输出一个\n ...
- Java并发(6)带返回结果的任务执行
携带结果的任务 JDK5提供了有可返回值的任务的执行.java.util.concurrent中Callable与Futrue用以实现带返回值的任务执行. 使用Callable与Futrue与使用Ru ...
- How to: cgminer (Bitcoin, Litecoin etc.) + AMD Radeon driver install on CentOS
UPDATE 7/7/13: If you want to use Catalyst drivers version 12.8 you will find that X won’t start (er ...
- Atom编辑器入门到精通(三) 文本编辑基础
身为编辑器,文本编辑的功能自然是放在第一位的,此节将总结常用的文本编辑的方法和技巧,掌握这些技巧以后可以极大地提高文本编辑的效率 注意此节中用到的快捷键是Mac下的,如果你用的系统是Win或者Linu ...
- MySQL基本查询语句
创建一张表 create table user ( id ) not null, name ) not null, birthDate date not null, gender ) not null ...
- MVC小系列(十四)【MVC+ZTree大数据异步树加载】
ZTree是一个jquery的树插件可以异步加载 第一步定义一个标准的接口(指的是与ztree默认的数据元素保持一致) /// <summary> /// ZTree数据结构 /// &l ...
- js获得文件根目录
function getRootPath(){ //获取当前网址,如: http://localhost:8083/proj/meun.jsp var curWwwPath = window.docu ...