Sublime3 -- Emmet 使用攻略

<!-- 后代 nav>ul>li -->

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

<!-- 兄弟 div+p+span -->

<div></div>
<p></p>
<span></span>

<!--上级 div+div>p>span+em^input -->

<div></div>
<div>
    <p><span></span><em></em></p>
    <input type="text">
</div>

<!--上上级 div+div>p>span+em^^input  -->

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<input type="text">

<!-- 分组 div>(header>ul>li*2>a)+footer>p-->

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

<!-- 分组 (div>dl>(dd+dt)*3)+footer>p -->

<div>
    <dl>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
    </dl>
</div>
<footer>
    <p></p>
</footer>

<!-- 乘法 ul>li*5 -->

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- 自增符号$ ul>li.item$*5 -->

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

<!--自增符号 h$[title=item$]{Header$}*3 -->

<h1 title="item1">Header1</h1>
<h2 title="item2">Header2</h2>
<h3 title="item3">Header3</h3>

<!--自增符号 ul>li.item$$$*5 -->

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

<!--自增符号 ul>li.item$@-*5 -->

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

<!--自增符号 ul>li.item$@3*5 -->

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

<!-- ID和类属性 -->

<!-- #header -->

<div id="header"></div>

<!-- .title -->

<div class="title"></div>

<!-- form#search.wide -->

<form action="" id="search" class="wide"></form>

<!-- p.class1.class2.class3 -->

<p class="class1 class2 class3"></p>

<!-- p[title="Hello world"] -->

<p title="Hello world"></p>

<!-- td[rowspan=3 colspan=2 title] -->

<td rowspan="3" colspan="2" title=""></td>

<!-- [a=value1 b=value2] -->

<div a="value1" b="value2"></div>


<!-- 文本 -->

<!-- a{click me} -->

<a href="">click me</a>

<!-- p{click here}>a{location}+{intersting} -->

<p>click here<a href="">location</a>intersting</p>


<!-- 隐式标签 -->
<!-- .class -->

<div class></div>

<!-- em>.class -->

<em><span class></span></em>

<!-- ul>.class -->

<ul>
    <li class></li>
</ul>

<!-- table>.row>.col -->

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

<!-- HTML -->
<!-- ! -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

    
</body>
</html>

<!-- a -->

<a href=""></a>

<!-- a:link -->

<a href="http://"></a>

<!-- a:mail -->

<a href="mailto:"></a>

<!-- abbr -->

<abbr title=""></abbr>

<!-- acronym -->

<acronym title=""></acronym>

<!-- base -->

<base href="">

<!-- br -->

<br>

<!-- frame -->

<frame>

<!-- hr -->

<hr>

 

转载于:https://www.cnblogs.com/Anna-jia/p/9474491.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值