Emmet学习

Emmet 语法

元素语法

您可以使用元素的名称，如 div 或 p 来生成 HTML 标签。Emmet 没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet 会自动转换成对应标签.
形如:

div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h亦可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>

文本操作符

如果想在生成元素的同时添加文本内容可以使用{}

div{这是一段文本}
<div>这是一段文本</div>
a{点我点我}
<a href="">点我点我</a>

---

属性操作符

属性运算符用于修改输出元素的属性

• Id 和 Class（elem#id and elem.class)

div.test =>
<div class="test"></div>
div#pageId =>
<div id="pageId"></div>

隐式标签

1. .class =>
<div class></div>
2. em>.class =>
<em><span class></span></em>
3. table>.row>.col =>
<table>
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>

绑定多个类名用.符号连续起来即可

div.test1.test2.test3 =>
<div class="test1 test2 test3"></div>

• 自定义属性使用 [attr1=’’ attr2=’’]

a[href='#' data-title='customer' target='_blank'] =>
<a href="#" data-title="customer" target="_blank"></a>

---

嵌套操作符

• 子级:>
  通过>标识元素可以生成嵌套子级元素,可以配合元素属性进行连写

div#pageId>ul>li =>
<div id="pageId">
  <ul>
    <li></li>
  </ul>
</div>

• 同级:+ +字符表示生成兄弟级元素.

div#pageId+div.child =>
<div id="pageId"></div>
<div class="child"></div>

• 父级:^
  ^用于生成父级元素的同级元素,从这个^字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素.

div>p.parent>span.child^ul.brother>li =>
<div>
  <p class="parent"><span class="child"></span></p>
  <ul class="brother">
    <li></li>
  </ul>
</div>

---

分组操作符

分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么 a 将作为 span 的子级元素生成.加上括号 a 将于()内的元素同级.

div>(ul>li+span)>a =>
<div>
  <ul>
    <li></li>
    <span></span>
  </ul>
  <a href=""></a>
</div>

乘法

使用 N 即可自动生成重复项.N 是一个正整数.在使用时请注意 N 所在位置,位置不同生成的结果不同.

ul>li*3 =>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

自动计数

这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符号即可.

ul>li.item${item number:$}*3
<ul>
  <li class="item1">item number:1</li>
  <li class="item2">item number:2</li>
  <li class="item3">item number:3</li>
</ul>

如果生成两位数则使用两个连续的$$,更多位数以此类推…
使用@修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）.注意这个操作符在$之后添加
@-表示降序,@+表示升序,默认使用升序.
@N 可以改变起始值.需要注意的是如果配合升降序使用的话 N 是放到+-符后.

ul>li.item$@-*3 =>
<ul>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>
--------------------------- ul>li.item$@-10*3 =>
<ul>
  <li class="item12"></li>
  <li class="item11"></li>
  <li class="item10"></li>
</ul>