Emmet使用

对于开发web前端来说，尤其是编写html文件，emmet无疑是一个神器

1、生成html基本框架

！+tab == >> 生成HTML5 的标准文档初始结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

类似的

html:5 或者 ! 生成 HTML5 结构

html:xt 生成 HTML4 过渡型

html:4s 生成 HTML4 严格型

2、生成带有id或者class的标签代码

①生成带有id的代码

div#aaa +tab ==>> 生成

<div id="aaa" ></div>

②生成带有class的代码

div.bbb +tab ==>> 生成

<div class="bbb"></div>

③生成同时带有id和class的代码

div#aaa.bbb +tab ==>>生成

<div id="aaa" class="bbb"></div>

3、生成下级标签

div>ul>li +tab ==>>生成

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

4、同时生成多个相同标签

ul>li*5 +tab ==>>生成

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

5、生成同级标签

div+p+ul>li +tab ==>> 生成

<div></div>
<p></p>
<ul>
    <li></li>
</ul>

6、生成上级标签一个^表示上一级

div>ul>li^^div.ccc +tab ==>> 生成

<div>
    <ul>
        <li></li>
    </ul>
</div>
<div class="ccc"></div>

7、生成分组（）有利于看清层次结构

div>(header>ul>li*2>a)+footer>p +tab ==>> 生成

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

8、自定义属性[attr]

a[href="https://blog.csdn.net/ice_cap1995" title="ice_cap1995"] +tab ==>>生成

<a href="https://blog.csdn.net/ice_cap1995" title="ice_cap1995"></a>

9、对生成内容编号

ul>li.item$*5 +tab ==>>生成

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

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

使用@N指定起始编号N

ul>li.item$@41*5 +tab ==>> 生成

<ul>
    <li class="item41"></li>
    <li class="item42"></li>
    <li class="item43"></li>
    <li class="item44"></li>
    <li class="item45"></li>
</ul>

使用@-表示倒序排列

ul>li.item$@-11*5 +tab ==>> 生成

<ul>
    <li class="item15"></li>
    <li class="item14"></li>
    <li class="item13"></li>
    <li class="item12"></li>
    <li class="item11"></li>

</ul>

10、使用{}生成文本

a[href="https://blog.csdn.net/ice_cap1995"]{点击这里到ice_cap1995的博客} +tab ==>>生成

<a href="https://blog.csdn.net/ice_cap1995">点击这里到ice_cap1995的博客</a>

注意事项：

1、使用的所有符号均为英文标点

2、使用时中间不允许有空格存在

其他包括css的简写功能略可以自己了解使用

猜你喜欢