Emmet

来源：互联网发布：最小凸包面积算法编辑：程序博客网时间：2024/05/17 01:58

综合应用

简写：(ul>li.cols.col4*5>a[href="http://www.baidu.com" name="listName" title]#items.item$${meiyixiang$meiyixiang$$$})+p.list^.listWrap

<ul>    <li class="cols col4"><a href="http://www.baidu.com" class="item01" id="items">meiyixiang1meiyixiang0001</a></li>    <li class="cols col4"><a href="http://www.baidu.com" class="item02" id="items">meiyixiang2meiyixiang0002</a></li>    <li class="cols col4"><a href="http://www.baidu.com" class="item03" id="items">meiyixiang3meiyixiang0003</a></li>    <li class="cols col4"><a href="http://www.baidu.com" class="item04" id="items">meiyixiang4meiyixiang0004</a></li>    <li class="cols col4"><a href="http://www.baidu.com" class="item05" id="items">meiyixiang5meiyixiang0005</a></li></ul><p class="list"></p><div class="listWrap"></div>

属性应用

简写：ul>li*5>a[title="title$$" name="item$" href]

<ul>    <li><a href="" title="title01" name="item1"></a></li>    <li><a href="" title="title02" name="item2"></a></li>    <li><a href="" title="title03" name="item3"></a></li>    <li><a href="" title="title04" name="item4"></a></li>    <li><a href="" title="title05" name="item5"></a></li></ul>

类及ID应用

简写：#header.nav.head

<div id="header" class="nav head"></div>

简写：p#header.nav.head

<p id="header" class="nav head"></p>

“ $ ”符号的理解

可应用于类名和ID名和标签名和内容部分，用做数字符号

简写：ul>li.item$$#num$*5>h$>a{这是内容$$$$}

<ul>    <li class="item01" id="num1">        <h1><a href="">这是内容0001</a></h1>    </li>    <li class="item02" id="num2">        <h2><a href="">这是内容0002</a></h2>    </li>    <li class="item03" id="num3">        <h3><a href="">这是内容0003</a></h3>    </li>    <li class="item04" id="num4">        <h4><a href="">这是内容0004</a></h4>    </li>    <li class="item05" id="num5">        <h5><a href="">这是内容0005</a></h5>    </li></ul>

内容应用

简写：ul>li*5>a{这是内容部分$}

<ul>    <li><a href="">这是内容部分1</a></li>    <li><a href="">这是内容部分2</a></li>    <li><a href="">这是内容部分3</a></li>    <li><a href="">这是内容部分4</a></li>    <li><a href="">这是内容部分5</a></li></ul>

子元素应用

简写：ul>li*5>a

<ul>    <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></ul>

兄弟元素应用

简写：ul>li*5>a+em

<ul>    <li><a href=""></a><em></em></li>    <li><a href=""></a><em></em></li>    <li><a href=""></a><em></em></li>    <li><a href=""></a><em></em></li>    <li><a href=""></a><em></em></li></ul>

分组理解

简写：div>h$*3+p*3

<div>    <h1></h1>    <h2></h2>    <h3></h3>    <p></p>    <p></p>    <p></p></div>

简写：div>(h$+p)*3

<div>    <h1></h1>    <p></p>    <h2></h2>    <p></p>    <h3></h3>    <p></p></div>

表单应用

简写：input:t

<input type="text" name="" id="">

简写：input:p

<input type="password" name="" id="">

简写：input:r

<input type="radio" name="" id="">

简写：input:c

<input type="checkbox" name="" id="">

简写：input:s

<input type="submit" value="">

简写：input:h

<input type="hidden" name="">

详细内容 http://www.w3cplus.com/tools/emmet-cheat-sheet.html

0 0