常用生成html标签的emmet语法

HTML

常用 emmet 语法

  • ! 或者 doc 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>
  • html:5 或者 ! 生成 HTML5 结构
  • html:xt 生成 HTML4 过渡型
  • html:4s 生成 HTML4 严格型
  • div#id 生成div的id属性
  • div.class 生成div的class属性
  • div.class>ul>li
<div class="class">
    <ul>
        <li></li>
    </ul>
</div>
  • 生成兄弟: div+p+span
<div></div>
<p></p>
<span></span>
  • 生成上级元素 div>ul>li^span
<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>
  • 生成多个 ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
  • 生成分组 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>(dt+dd)*3)+footer>p 
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

<a href="http://www.baidu.com" title="潜行者m 博客"></a>
  • 生成内容编号: 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>

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
这样就会从 3 开始排序，生成如下代码：
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

配合上面倒序输出，可以这样写：
ul>li.item$@-3*5
生成的就是以 3 为底倒序：
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

<a href="http://www.baidu.com">点击进入百度</a>
赞 赏
微信扫一扫