前端Emmet插件使用

前端Emmet官网：http://www.emmet.io

---

• css、script引用

• • 代码：css：link 生成：<link rel="stylesheet" href="style.css" />

• • 代码：script：src 生成： <script src=""></script>

• 生成带类样式的标签

• • 代码：p.link 生成： <p class="li"></p>

• • 代码：.link 生成：<div class="link"></div>

• 生成带ID的标签

• • 代码：p#link 生成： <p id="id"></p>

• a标签的引用

• • 代码：a:link 生成：<a href="http://"></a>

• 根据标签之间的位置来生成标签

• • 兄弟标签
• • • 代码：p.link+h2.link 生成：<p class="link"></p> <h2 class="link"></h2>

• • 后代标签
• • • 代码：h2.link>span.link 生成：<h2 class="link"><span class="link"></span></h2>

• • 上级标签
• • • 代码：h2.link>span.link^p.link 生成：<h2 class="link"><span></span></h2><p class="link"></p>

• • 生成标签的时候同时生成内部文本
• • • 代码：a{php中文网} 生成：<a href="">php中文网</a>

• • 提示属性 代码：a[title:这是一张图片]生成:<a href="" title="这是一张图片"></a>

• • 快速生成 代码：ul>li*3

---

• 给标签自动生成编号，排序$,@

• • 代码：ul.list>li.item>a*3{导航$}

    <ul class="list">
        <li class="item">
            <a href="">导航1</a>
            <a href="">导航2</a>
            <a href="">导航3</a>
        </li>
    </ul>

• • 代码：ul.list>li.item>a*3{导航$$}

    <ul class="list">
        <li class="item">
            <a href="">导航01</a>
            <a href="">导航02</a>
            <a href="">导航03</a>
        </li>
    </ul>

• • 代码：ul.list>li.item*5>a{导航$$$@100}

<ul class="list">
      <li class="item"><a href="">导航100</a></li>
      <li class="item"><a href="">导航101</a></li>
      <li class="item"><a href="">导航102</a></li>
      <li class="item"><a href="">导航103</a></li>
      <li class="item"><a href="">导航104</a></li>
    </ul>

如果要从大到小倒序代码：ul.list>li.item*5>a{导航$$$@-}在@符号后面加一个减号即可