欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Emmet使用

程序员文章站 2022-05-26 14:19:01
...

对于开发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>[email protected]*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>[email protected]*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的简写功能略 可以自己了解使用

上一篇： 产妇的大便有血的原因有哪些，产妇注意了

下一篇： 茼蒿馍馍是什么食物

推荐阅读