关于Emmet(html小技巧)

在最开始做静态页的时候，我们经常把一个页面分为三个大块，也就是header（头部），content（中间内容），footer（底部）。然后在header中增加一个nav导航栏，content可能分为左右两个部分，即left和right。可能我们就会如下码出代码:

<div class="demo">
    <header>
        <nav>
            <li><a href="#link"></a></li>
            <li><a href="#link"></a></li>
            <li><a href="#link"></a></li>
            <li><a href="#link"></a></li>
            <li><a href="#link"></a></li>
        </nav>
    </header>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</div>

如果你已经熟练或者习惯手动码或者复制粘贴是可以的，但是这里展示下Emmet的魔法。

我们运行下面这一行代码：

div.demo>(header>nav>li.li$*5>a[href=#link$]{showPage$})+(div.content>div.left+div.right)+footer
(注意不要为了视觉效果好看就打空格，打了空格可能失效，然后在最后按tab，中间按tab只能显示部分代码)
效果如下：

<div class="demo">
    <header>
        <nav>
            <li class="li1"><a href="#link1">showPage1</a></li>
            <li class="li2"><a href="#link2">showPage2</a></li>
            <li class="li3"><a href="#link3">showPage3</a></li>
            <li class="li4"><a href="#link4">showPage4</a></li>
            <li class="li5"><a href="#link5">showPage5</a></li>
        </nav>
    </header>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</div>

语法：

后代 > : nav>ul>li

<nav>
    <li></li>
</nav>

兄弟 + : div>header+div+footer

<nav>
    <li></li>
</nav>

上级 ^ : div+div>p>span+em^bq(<blockquote>标记长引用)

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

分组() : div>(header>ul>li*2>a)+footer

<header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
</header>
<footer></footer>

乘法* ：div>nav>li*5>a

<div>
    <nav>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </nav>
</div>

自增符号$ , 属性 , 文本 {}: div>nav>li.li$*5>a[href=#link$]{showPage$}

<div>
    <nav>
        <li class="li1"><a href="#link1">showPage1</a></li>
        <li class="li2"><a href="#link2">showPage2</a></li>
        <li class="li3"><a href="#link3">showPage3</a></li>
        <li class="li4"><a href="#link4">showPage4</a></li>
        <li class="li5"><a href="#link5">showPage5</a></li>
    </nav>
</div>

关于Emmet(html小技巧)

推荐阅读更多精彩内容