关于 HTML 中的 emmet 语法心得
一 . 生成带有id,class的HTML标签
1 .
#abc 生成一个ID名为 abc 的 div
效果如下:
<div id="abc"></div>
2 .
ol#bbb.ddd 生成一个ID为bbb, class为 ddd 的ol
效果如下
<ol id="bbb" class="ddd"></ol>
二 . 生成后代 “ > ”
div.aaa>ol>li 生成一个有序列表,并且被class 为aaa的div包裹
效果如下:
<div class="aaa">
<ol>
<li></li>
</ol>
</div>
三 . 生成兄弟标签 “ + ”
div+p+span 生成兄弟
效果如下:
<div></div>
<p></p>
<span></span>
四 . 生成上级标签 “ ^ ”
上级 (Climb-up)元素是什么意思呢?前面咱们说过了生成下级元素的符号“>”,当使用 div>ul>li 的指令之后,再继续写下去,那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 a 标签,那么我需要先用 “^” 提升一下层次。例如:
div>ul>li^a
效果如下:
<div>
<ul>
<li></li>
</ul>
<a href=""></a>
</div>
如果我想生成一个与div平级的span,那么就再上升一个层级,多用一个^
div>ul>li^^a
效果如下:
<div>
<ul>
<li></li>
</ul>
</div>
<a href=""></a>
五 . 复制生成多份 “ * num ”
ol>li*5
效果如下:
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
六 . 生成分组“ () ”
div>(p>ul>li*2>a)+div>p
效果如下:
<div>
<p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</p>
<div>
<p></p>
</div>
</div>
可与复制多份一起使用
div>(tr>td*5)*3+div>p
效果如下:
<div>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>+div>p
七 . 生成自定义属性 “[ sttr]”
a 标签中往往需要附带 href 属性和 title 属性,如果我们想生成一个 href 为 http://google.com, title 为“图片”的 a 标签,可以这样写:
a[href="www.google.com" title="图片"]*5
效果如下:
<a href="www.google.com" title="图片"></a>
<a href="www.google.com" title="图片"></a>
<a href="www.google.com" title="图片"></a>
<a href="www.google.com" title="图片"></a>
<a href="www.google.com" title="图片"></a>
八 . 生成内容编号
ol>li.it$*5
效果如下:
<ol>
<li class="it1"></li>
<li class="it2"></li>
<li class="it3"></li>
<li class="it4"></li>
<li class="it5"></li>
</ol>
如果需要生成多为编号
ol>li.it$$$*5
效果如下:
<ol>
<li class="it001"></li>
<li class="it002"></li>
<li class="it003"></li>
<li class="it004"></li>
<li class="it005"></li>
</ol>
实现倒排序 (在$后加 “ @-”)
ol>li.it$@-*5
效果如下:
<ol>
<li class="it5"></li>
<li class="it4"></li>
<li class="it3"></li>
<li class="it2"></li>
<li class="it1"></li>
</ol>
有可指定排序的开始编号:
ol>li.it$@3*5
效果如下:
<ol>
<li class="it3"></li>
<li class="it4"></li>
<li class="it5"></li>
<li class="it6"></li>
<li class="it7"></li>
</ol>
倒排序同理:只需在@后加 -
九 . 生成文本内容
ol>li.it{hello wold}
效果如下:
<ol>
<li class="it">hello wold</li>
</ol>
总结:
多练习