Emmet语法

前端效率语法

请注意,本文编写于 304 天前,最后修改于 197 天前,其中某些信息可能已经过时。

emmet官网 https://emmet.io/

  • 生成html5文档结构

语法:html:5或!

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

head部分


  • 生成字符集

语法:meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
  • 创建视口,即页面缩放

语法:meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 兼容IE8

语法:meta:compat

# 默认是ie7
<meta http-equiv="X-UA-Compatible" content="IE=7"
# 手动修改:content="ie=edge"
<meta http-equiv="X-UA-Compatible" content="ie=edge">
  • 引用CSS文件

语法:link:css

<link rel="stylesheet" href="style.css">
  • 引用脚本文件

语法:script:src

<script src=""></script>

body部分


  • 生成带类(class)样式的标签

语法:p.info

 <p class="info"></p>

语法: div.info

<div class="info"></div>

语法:.info1

# 默认父级标签为div
<div class="info1"></div>
  • 生成带id的标签

语法:p#info

<p id="info"></p>

语法:div#info1

<div id="info1"></div>

语法:#info2

<div id="info2"></div>
  • a标签

语法:a:link

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

语法: a.mail

<a href="mailto:"></a>
  • 生成同级标签,兄弟标签

语法:h2.info+p.had

<h2 class="info"></h2>
<p class="had"></p>
  • 生成后代标签,下级标签

语法:ul>li

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

语法:ul>li+li+li

# 生成3个下级li标签
<ul>
        <li></li>
        <li></li>
        <li></li>
</ul>
  • 生成当前标签的上级标签

语法:h2>span^p.info

# span便签的父级h2,h2的兄弟标签p,p标签是span便签的上级
<h2><span></span></h2>
<p class="info"></p>
  • 生成标签并且同时创建文本

语法: a{浅枫沐雪}

<a href="">浅枫沐雪</a>
  • 创建自定义属性

语法: p[title="提示文字"]

<p title="提示文字"></p>
  • 属性加提示文字

语法:a[href="http://allms.cn"]{浅枫沐雪}

<a href="http://allms.cn">浅枫沐雪</a>
  • 10.重复生成(*个数)

需求:生成10个li标签
语法:ul>li*10

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

需求:快速生成有10个列表项的导航
语法:ul.list>li.item*10>a{导航}

<ul class="list">
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
</ul>
  • 给标签添加排序($,@)

$ :占位符(显示有多少位),$默认从1开始递增 @ : @-从最高位开始递减,@10从10开始递增


需求:生成有10个列表项的递增导航(从1开始)

语法:ul.list>li.item*10>a{导航$}

<ul class="list">
        <li class="item"><a href="">导航1</a></li>
        <li class="item"><a href="">导航2</a></li>
        <li class="item"><a href="">导航3</a></li>
        <li class="item"><a href="">导航4</a></li>
        <li class="item"><a href="">导航5</a></li>
        <li class="item"><a href="">导航6</a></li>
        <li class="item"><a href="">导航7</a></li>
        <li class="item"><a href="">导航8</a></li>
        <li class="item"><a href="">导航9</a></li>
        <li class="item"><a href="">导航10</a></li>
</ul>

需求:生成有10个列表项的递增导航(从01开始)

语法:ul.list>li.item*10>a{导航$$}

<ul class="list">
        <li class="item"><a href="">导航01</a></li>
        <li class="item"><a href="">导航02</a></li>
        <li class="item"><a href="">导航03</a></li>
        <li class="item"><a href="">导航04</a></li>
        <li class="item"><a href="">导航05</a></li>
        <li class="item"><a href="">导航06</a></li>
        <li class="item"><a href="">导航07</a></li>
        <li class="item"><a href="">导航08</a></li>
        <li class="item"><a href="">导航09</a></li>
        <li class="item"><a href="">导航10</a></li>
</ul>

需求:生成有10个列表项的递增导航(从001开始)

语法:ul.list>li.item*10>a{导航$$$}

<ul class="list">
        <li class="item"><a href="">导航001</a></li>
        <li class="item"><a href="">导航002</a></li>
        <li class="item"><a href="">导航003</a></li>
        <li class="item"><a href="">导航004</a></li>
        <li class="item"><a href="">导航005</a></li>
        <li class="item"><a href="">导航006</a></li>
        <li class="item"><a href="">导航007</a></li>
        <li class="item"><a href="">导航008</a></li>
        <li class="item"><a href="">导航009</a></li>
        <li class="item"><a href="">导航010</a></li>
</ul>

需求:生成有10个列表项的递增导航(从100开始)

语法:ul.list>li.item*10>a{导航$$$@100}

<ul class="list">
        <li class="item"><a href="">导航100</a></li>
        <li class="item"><a href="">导航101</a></li>
        <li class="item"><a href="">导航102</a></li>
        <li class="item"><a href="">导航103</a></li>
        <li class="item"><a href="">导航104</a></li>
        <li class="item"><a href="">导航105</a></li>
        <li class="item"><a href="">导航106</a></li>
        <li class="item"><a href="">导航107</a></li>
        <li class="item"><a href="">导航108</a></li>
        <li class="item"><a href="">导航109</a></li>
</ul>

需求:生成有10个列表项的递增导航(从0100开始)

语法:ul.list>li.item*10>a{导航$$$}

<ul class="list">
        <li class="item"><a href="">导航0100</a></li>
        <li class="item"><a href="">导航0101</a></li>
        <li class="item"><a href="">导航0102</a></li>
        <li class="item"><a href="">导航0103</a></li>
        <li class="item"><a href="">导航0104</a></li>
        <li class="item"><a href="">导航0105</a></li>
        <li class="item"><a href="">导航0106</a></li>
        <li class="item"><a href="">导航0107</a></li>
        <li class="item"><a href="">导航0108</a></li>
        <li class="item"><a href="">导航0109</a></li>
</ul>

需求:生成有10个列表项的递减导航(递减)

语法:ul.list>li.item*10>a{导航$@-}

<ul class="list">
        <li class="item"><a href="">导航10</a></li>
        <li class="item"><a href="">导航09</a></li>
        <li class="item"><a href="">导航08</a></li>
        <li class="item"><a href="">导航07</a></li>
        <li class="item"><a href="">导航06</a></li>
        <li class="item"><a href="">导航05</a></li>
        <li class="item"><a href="">导航04</a></li>
        <li class="item"><a href="">导航03</a></li>
        <li class="item"><a href="">导航02</a></li>
        <li class="item"><a href="">导航01</a></li>
</ul>

需求:生成有10个列表项的递减导航(递减到010)

语法:ul.list>li.item*10>a{导航$$$@-10}

<ul class="list">
        <li class="item"><a href="">导航019</a></li>
        <li class="item"><a href="">导航018</a></li>
        <li class="item"><a href="">导航017</a></li>
        <li class="item"><a href="">导航016</a></li>
        <li class="item"><a href="">导航015</a></li>
        <li class="item"><a href="">导航014</a></li>
        <li class="item"><a href="">导航013</a></li>
        <li class="item"><a href="">导航012</a></li>
        <li class="item"><a href="">导航011</a></li>
        <li class="item"><a href="">导航010</a></li>
</ul>

需求:生成有50个列表项的递减导航(递减到50)

语法:ul.list>li.item*50>a{导航$$@-50}

<ul class="list">
        <li class="item"><a href="">导航99</a></li>
        <li class="item"><a href="">导航98</a></li>
        <li class="item"><a href="">导航97</a></li>
        <li class="item"><a href="">导航96</a></li>
        <li class="item"><a href="">导航95</a></li>
        <li class="item"><a href="">导航94</a></li>
        <li class="item"><a href="">导航93</a></li>
        <li class="item"><a href="">导航92</a></li>
        <li class="item"><a href="">导航91</a></li>
        <li class="item"><a href="">导航90</a></li>
        <li class="item"><a href="">导航89</a></li>
        <li class="item"><a href="">导航88</a></li>
        <li class="item"><a href="">导航87</a></li>
        <li class="item"><a href="">导航86</a></li>
        <li class="item"><a href="">导航85</a></li>
        <li class="item"><a href="">导航84</a></li>
        <li class="item"><a href="">导航83</a></li>
        <li class="item"><a href="">导航82</a></li>
        <li class="item"><a href="">导航81</a></li>
        <li class="item"><a href="">导航80</a></li>
        <li class="item"><a href="">导航79</a></li>
        <li class="item"><a href="">导航78</a></li>
        <li class="item"><a href="">导航77</a></li>
        <li class="item"><a href="">导航76</a></li>
        <li class="item"><a href="">导航75</a></li>
        <li class="item"><a href="">导航74</a></li>
        <li class="item"><a href="">导航73</a></li>
        <li class="item"><a href="">导航72</a></li>
        <li class="item"><a href="">导航71</a></li>
        <li class="item"><a href="">导航70</a></li>
        <li class="item"><a href="">导航69</a></li>
        <li class="item"><a href="">导航68</a></li>
        <li class="item"><a href="">导航67</a></li>
        <li class="item"><a href="">导航66</a></li>
        <li class="item"><a href="">导航65</a></li>
        <li class="item"><a href="">导航64</a></li>
        <li class="item"><a href="">导航63</a></li>
        <li class="item"><a href="">导航62</a></li>
        <li class="item"><a href="">导航61</a></li>
        <li class="item"><a href="">导航60</a></li>
        <li class="item"><a href="">导航59</a></li>
        <li class="item"><a href="">导航58</a></li>
        <li class="item"><a href="">导航57</a></li>
        <li class="item"><a href="">导航56</a></li>
        <li class="item"><a href="">导航55</a></li>
        <li class="item"><a href="">导航54</a></li>
        <li class="item"><a href="">导航53</a></li>
        <li class="item"><a href="">导航52</a></li>
        <li class="item"><a href="">导航51</a></li>
        <li class="item"><a href="">导航50</a></li>
</ul>

进阶语法


div+div>p>span+em^^bg

<div></div>
    <div>
        <p><span></span><em></em></p>
    </div>
<bg></bg>

div+div>p>span+em^bg

<div></div>
    <div>
        <p><span></span><em></em></p>
        <bg></bg>
</div>

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>

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.ietm$*5

<ul>
        <li class="ietm1"></li>
        <li class="ietm2"></li>
        <li class="ietm3"></li>
        <li class="ietm4"></li>
        <li class="ietm5"></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>

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>

p.a.b.c

<p class="a b c"></p>

from#a.b

<from id="a" class="b"></from>

ul>.item

<ul>
        <li class="item"></li>
</ul>

table>.row>.col

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

by 浅枫沐雪


此处评论已关闭