Emmet基本语法

 

• IntelliJ IDEA 自带 Emmet 功能，使用的快捷键是 Tab。
• 常用语法

p{foo} //<p>foo</p>
p[data-bind=aa]  //<p data-bind="aa"></p>
div>p   
<div>
    <p></p>
</div>

div+p
<div></div>
<p></p>

div^p
<div></div>
<p></p>

li*3>a
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

div#item$.class$$*3
<div id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>

header+main+footer
<header></header>
<main></main>
<footer></footer>

table>(thead>tr>th*5)(tbody>tr>td*5)
<table>
    <thead>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
    </thead></table>
　　
nav>ul>(li>a[href=#]{Link})*5
<nav>
    <ul>
        <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>
    </ul>
</nav>

(.foo>h1)+(.bar>h2)
<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

 

转载于:https://my.oschina.net/u/3692055/blog/1540305