Emmet常用的8种语法形式

1.Emmet常用语法

1.1 标签与内容

语法：'{text}'，.title{默认标签}
<h3>html是结构化标签语言</h3>
    <div class="title">默认标签</div>

1.2 属性和语法糖

语法：'[attr]' ,[id=app]{app}
<div id="app">app</div>
<!-- id,class是高频，通用属性，emmet为它定制了“语法糖” 
      'id=>#,class=>.' -->
    <!-- #app1{app1},.app2{app2} -->
    <div id="app1">app1</div>
    <div class="app2">app2</div>

1.3 重复:’*’

<!-- .container{box} -->
    <div class="container">box</div>
    <div class="container">box</div>
    <div class="container">box</div>

1.4 父子:’>’

<!-- ul>li{item}*3 -->
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>

1.5 兄弟:’+’

 <!-- h3{标题}+p{内容} -->
    <h3>标题</h3>
    <p>内容</p>

1.6 父级：’^’

<!-- .box>span{text}^h3{小标题} -->
    <div class="box"><span>text</span></div>
    <h3>小标题</h3>

1.7 分组：’(…)’

<!-- nav>h3{导航}+ul>li*3>a{link} -->
    <nav>
      <h3>导航</h3>
      <ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
      </ul>
    </nav>

1.8 序号:’$’,’$@’

<!--默认从1开始： ul>li{item-$}*3 -->
    <ul>
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
    </ul>
    <!--自定义起始序号： ul>li{item-$@6}*3 -->
    <ul>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
    </ul>
    <!--逆序： ul>li{item-$@-1}*3 -->
    <ul>
      <li>item-3</li>
      <li>item-2</li>
      <li>item-1</li>
    </ul>

2.实战演习Emmet

<!-- .test>(h3{我是Emmet,很高兴认识你}+ul.cotainer>li{我是$号}*3+li{我是$@4号}*3+li{我是倒序$@-1号}*3)^#test2{欢迎使用Emmet语法} -->
    <div class="test">
      <h3>我是Emmet,很高兴认识你</h3>
      <ul class="cotainer">
        <li>我是1号</li>
        <li>我是2号</li>
        <li>我是3号</li>
        <li>我是4号</li>
        <li>我是5号</li>
        <li>我是6号</li>
        <li>我是倒序3号</li>
        <li>我是倒序2号</li>
        <li>我是倒序1号</li>
      </ul>
    </div>
    <div id="test2">欢迎使用Emmet语法</div>