Emmet语法

溪初桾

发布于 2020-03-10 09:01:23

1.1K0

发布于 2020-03-10 09:01:23

生成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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

Emmet语法

Emmet语法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐