Emmet相关使用
时间： 06:15:21
&&&& 阅读：261
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&& & & & & Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度,支持多款编辑器或者集成IDE的无缝插件,支持的编辑器或者IDE有,如下图:
当然,Emmet还支持很多在线编辑以及第三方软件的集成,如图:
足以可见它的强大了,下面是Emmet常用的使用方法.大家可以去它的官方网站上查看其英文原版的使用方法,下面是从网络上收集的常用使用方法.
管网地址:http://docs.emmet.io/abbreviations/syntax/
Emmet针对html，键入命令都是基于html的tags。命令输入完成后，光标停在命令尾端，使用Ctrl+E快捷键执行命令。
<span style="color:# 子节点 操作符 &
bodydivulli&&
使用快捷键 Ctrl&#43;E ，执行命令后，则出现下面的html节点结构：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
<span style="color:# 兄弟节点 操作符 &#43;
bodydiv&#43;div&#43;div&&
执行命令，如下：
&&&&&&&&&&&&&&&&&&&&&&
3 父节点 操作符 ^ （英文输入法下，Shift&#43;6）
bodydiv&#43;div&#43;div^script&&
执行命令后，如下：
&&&&&&&&&&&&&&&&&&&&&&&&
这里要说明2点：a 父节点只是针对^操作符前一个tag而言； b 生成的父节点追加是向后的，即例子中script的生成，出现在body之后，而不是之前。
<span style="color:# 多个相同兄弟节点 操作符 *
在上面的例子中可以看到，生成了三个兄弟节点 div ，如果当前文档需要生成10个呢，难道要输入十次div么？不，使用*10 就搞定了。例子：
bodydiv*10&&
执行命令后，如下：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
看吧，多么方便呀。
<span style="color:# 分组 操作符 ()
从第三个例子可以想到，如果给每个div生成不同的子节点，可能会想到的命令如下：
bodydivulli&#43;divp&#43;divform^script&&
可是，生成后，却是下面的结果，并非所愿：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&action=&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
那怎么办？使用 () 进行分块吧：
body(divulli)&#43;(divp)&#43;(divform)^script&&
执行，对了，这才是所要的结果：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&action=&&&&&&&&&&&&&&
<span style="color:# ID 和 CLASS 操作符 # 和 .
常要做的一件事儿就是给element追加属性。如下：
body(div#navulli)&#43;(div.mainp)&#43;(div.submit.footform)^script&&
执行结果如下：
&&&&&&&id=&nav&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&class=&main&&&&&&&&&&&&&&&&&&&&&&&&class=&submit&foot&&&&&&&&&&&&action=&&&&&&&&&&&&&&
嗯，漂亮！
<span style="color:# 自定义属性操作符 []
这里首先说明一点，按照现在的前端规范，样式是和html分离的，所以，这里就只有自定义属性一说；但是，比如img等需要引入资源和进行alt说明（按照性能一说，alt必须有）的属性，是会自动生成的。
body(div#navulliimg[user_data=&my_face&])&#43;(div.mainp)&#43;(div.submit.footform)^script&&
执行结果如下：
&&&&&&&id=&nav&&&&&&&&&&&&&&&&&&&&&&&&&&src=&&&alt=&&&user_data=&my_face&&&&&&&&&&&&&&&&&&&&&&&&class=&main&&&&&&&&&&&&&&&&&&&&&&&&class=&submit&foot&&&&&&&&&&&&action=&&&&&&&&&&&&&&
说明一点，如果自定义的属性只没有空&#26684;，可以不用键入&&双引号。如下：
body[who=baidu.com]div&&
执行结果如下：
&who=&baidu.com&&&&&&&&&&&
<span style="color:# 计数器 $
举个实例，在我们做”轮播“时，给元素的命名（id或者class），都会有一个计数位，这个时候，我们就可以使用 $ 它来实现了，如下：
bodydiv#loop_showulli.img_$*5&&
执行结果如下：
&&&&&&&id=&loop_show&&&&&&&&&&&&&&&&&&&&&&&&&&class=&img_1&&&&&&&&&&&&&&&&class=&img_2&&&&&&&&&&&&&&&&class=&img_3&&&&&&&&&&&&&&&&class=&img_4&&&&&&&&&&&&&&&&class=&img_5&&&&&&&&&&&&&&&&&&&&&
说明，a 这里的*5操作是放在一个元素所有操作就结束的末尾;；b $操作符可以进行组合，比如 $$$$，将由填充数0001开始计数。
<span style="color:# 文本内容 操作符 {}
在给tag进行填充文本内容时候，使用 {} 来完成，如下：
bodydiv#loop_showulli.img_${轮播图片$}*5&&
执行结果如下：
&&&&&&&id=&loop_show&&&&&&&&&&&&&&&&&&&&&&&&&&class=&img_1&轮播图片1&&&&&&&&&&&&&&&class=&img_2&轮播图片2&&&&&&&&&&&&&&&class=&img_3&轮播图片3&&&&&&&&&&&&&&&class=&img_4&轮播图片4&&&&&&&&&&&&&&&class=&img_5&轮播图片5&&&&&&&&&&&&&&&&&&&&
说明，$ 只是一个计数器，所以呢，放在合法的地方都是可以的。如上命令所示。
<span style="color:# 关于空&#26684;
从上面的命令都能看得出来，操作符与tags之间，都没有空&#26684;，因为，空&#26684;被Emmet用着了“缩写解析”的停止标志。而在属性&#20540;中，如果有空&#26684;，也需要使用&&（双引号）进行包括。
a 执行命令。执行命令时候，有两种合法操作：一是光标位于命令行末，二是命令行被整体选中。
b 命令行数。命令不能多行，只允许一行。这个 第10点 中的 空&#26684; 的解释有些类&#20284;，LF标志Emmet无法解析。
c 命令执行后光标位置。a 中第一种情况，光标停留在 【最低级节点文本编辑区域】；第二种情况，如果是向后选中全行，结果同a中第一种情况，如果是向前全选整行，则光标停留在结果的最后位置。
下面为其他博客转载:
1.& 初始化
HTML文档需要包含一些固定的标签，比如&html&、&head&、&body&等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：
html:5 或!：用于HTML5文档类型html:xt：用于XHTML过渡文档类型html:4s：用于HTML4严&#26684;文档类型
2.& 轻松添加类、id、文本和属性
连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：
连续输入类和id，比如p.bar#foo，会自动生成：
&class=&bar&&id=&foo&&&
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：
foo&&&href=&#&&&
现在你只需要1行代码就可以实现标签的嵌套。
&：子元素符号，表示嵌套的元素&#43;：同级标签符号^：可以使该符号前的标签提升一行
效果如下图所示：
你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo&h1)&#43;(.bar&h2)，会自动生成如下代码：
&class=&foo&&&&&&&&&&class=&bar&&&&&&&&&
5.& 隐式标签
声明一个带类的标签，只需输入div.item，就会生成&div class=&item&&&/div&。
在过去版本中，可以省略掉div，即输入.item即可生成&div class=&item&&&/div&。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在&ul&中输入.item，就会生成&li class=&item&&&/li&。
下面是所有的隐式标签名称：
li：用于ul和ol中tr：用于table、tbody、thead和tfoot中td：用于tr中option：用于select和optgroup中
6.& 定义多个元素
要定义多个元素，可以使用*符号。比如，ul&li*3可以生成如下代码：
&&&&&&&&&&&&&&&&
7.& 定义多个带属性的元素
如果输入 ul&li.item$*3，将会生成如下代码：
&&&&&class=&item1&&&&&&class=&item2&&&&&&class=&item3&&&&&
二、CSS缩写
1.& &#20540;
比如要定义元素的宽度，只需输入w100，即可生成
width:&100&&
除了px，也可以生成其他单位，比如输入h10p&#43;m5e，结果如下：
height:&10%;&&margin:&5&&
单位别名列表：
p 表示%e 表示 emx 表示 ex
2.& 附加属性
可能你之前已经了解了一些缩写，比如 @f，可以生成：
@font-face&{&&&&font-family:;&&&&src:url();&&}&&
一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“&#43;”符号来生成，比如输入@f&#43;，将生成：
@font-face&{&&&&font-family:&‘FontName‘;&&&&src:&url(‘FileName.eot‘);&&&&src:&url(‘FileName.eot?#iefix‘)&format(‘embedded-opentype‘),&&&&&&&url(‘FileName.woff‘)&format(‘woff‘),&&&&&&&url(‘FileName.ttf‘)&format(‘truetype‘),&&&&&&&url(‘FileName.svg#FontName‘)&format(‘svg‘);&&&&font-style:&&&&&font-weight:&&&}&&
3.& 模糊匹配
如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：
overflow:&&&
4.& 供应商前缀
如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：
-webkit-transform:&;&&-moz-transform:&;&&-ms-transform:&;&&-o-transform:&;&&transform:&;&&
你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：
-webkit-super-foo:&;&&-moz-super-foo:&;&&-ms-super-foo:&;&&-o-super-foo:&;&&super-foo:&;&&
如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：
-webkit-transform:&;&&-moz-transform:&;&&transform:&;&&
前缀缩写如下：
w 表示 -webkit-m 表示 -moz-s 表示 -ms-o 表示 -o-
输入lg(left, #fff 50%, #000)，会生成如下代码：
background-image:&-webkit-gradient(linear,&0&0,&100%&0,&color-stop(0.5,&#fff),&to(#000));&&background-image:&-webkit-linear-gradient(left,&#fff&50%,&#000);&&background-image:&-moz-linear-gradient(left,&#fff&50%,&#000);&&background-image:&-o-linear-gradient(left,&#fff&50%,&#000);&&background-image:&linear-gradient(left,&#fff&50%,&#000);&&
三、附加功能
生成Lorem ipsum文本
Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，比如lorem10，将生成：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
你还可以定制Emmet插件：
添加新缩写或更新现有缩写，可修改文件更改Emmet过滤器和操作的行为，可修改文件定义如何生成HTML或XML代码，可修改文件
标签：&&&&&&&&&&&&&&&&&&原文地址：http://blog.csdn.net/u/article/details/
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！下次自动登录
现在的位置:
& 综合 & 正文
【LaTeX入门】09、随机生成几段内容的命令
宏包：lipsum
其实他也不是随机生成段落，而是从公元前45年的古典拉丁文学著作中截取150个段落中挑选段落。
因为这部著作的第一段的前两个词为：Lorem ipsum，因此称为
\lipsum[1]：显示那部著作的第一段。
\lipsum[1-3]：显示那部著作的第1~3段。
\lipsum[5-8]：显示那部著作的第5~8段。
应用：比如你只是想试试排版命令的效果，但是你又找不到很多内容填入文档，这时你可以写上 \lipsum[1] 就生成了一段内容。
【上篇】【下篇】没有更多推荐了，
不良信息举报
举报内容：
Emmet基本使用方法前端神器
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！没有更多推荐了，
不良信息举报
举报内容：
【LaTeX入门】09、随机生成几段内容的命令
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！