Webstorm快捷输入Emmet简单语法

最新推荐文章于 2024-12-04 11:16:10 发布

转载最新推荐文章于 2024-12-04 11:16:10 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：cnblogs.com/byx1024/p/12837934.html

web前端同时被 2 个专栏收录

73 篇文章

订阅专栏

47 篇文章

订阅专栏

本文介绍了在SublimeText中使用Emmet进行HTML模板快速生成的方法。通过！ + Tab快捷键结合Emmet语法，例如#page>div.logo+ul#nav>li*5>a{Item$}

HTML模板生成，这个貌似 sublime Text 中用的多，不过也应该知道一下。

！ +Tab (Emmet语法默认最后都是+Tab ，下面我就不再多说了)

意思就是打完快捷输入后按tab键

例子：

语法五：最后来个嵌套多的。（细品，你细品就会发现很多时候都会用到。）

#page>div.logo+ul#nav>li*5>a{Item $}

<div id="page">
    <div class="logo"></div>
    <ul id="nav">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

注：

1、在 Emmet插件中，可以利用如：h1{元素内容$}*n 的方式，自动复制生成 n行，$ 的作用是自动升序生成序号，便于测试。

2、在 Emmet插件中，loremn(n为字母个数) 可自动输出 n个字母组成的文本内容。

转自cnblogs.com/byx1024/p/12837934.html