Emmet快速开发

标签元素关系展开

复制代码
div.wrap>div.content>(div.inner_l+div.inner_r)^div.sider

------缩写展开如下----------------------------------------------

<div class="wrap">
    <div class="content">
        <div class="inner_l"></div>
        <div class="inner_r"></div>
    </div>
    <div class="sider"></div>
</div>
复制代码

从这个html代码缩写里面我们可以看到使用了4个符号,分别是:

> 后面代表子元素
+ 后面代表下一个兄弟元素
^ 代表返回父级元素
() 小括号代表代表一个缩写集合

 

具有特定结构的标签展开

ul+

------缩写展开如下----------------------------------------------

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

这类特定的标签,缩写时在后面添加一个 +(加号),展开时会默认生成其子元素。类似的标签还有 map、dl、ol、table 等。

 

标签元素添加属性

table[cellpadding=0 cellspacing=0 width=100%]

------缩写展开如下----------------------------------------------

<table cellpadding="0" cellspacing="0" width="100%"></table>

标签元素的属性写在标签后紧跟的中括号内,属性之间用空格隔开,如果某个属性中有空格,那么属性值就需要添加引号。

 

id 和 class 属性是不需要写在中括号里面的,直接写 #idName 和 .className 就可以了,并且可以写多个 className,如:div#a.b.c

 

 

标签元素内添加文本节点

div{我是文本节点}

------缩写展开如下----------------------------------------------

<div>我是文本节点</div>

文本节点写在标签元素后面紧跟的大括号里面,并且,大括号里面可以用 $ 符号写入递增数字。

一些省略标签的展开方式,如:

在行内元素中省略子标签

复制代码
span>.c
strong>.c
b>.c

------缩写展开如下----------------------------------------------

<span><span class="c"></span></span>
<strong><span class="c"></span></strong>
<b><span class="c"></span></b>
复制代码

由此可以看出,在行内元素内省略子元素标签,子元素标签就会默认为 span 标签。

后续测试,p 元素默认的子元素也是 span 元素。而 h1-h6 标题标签默认的则是 div 元素,这和div元素的默认子元素是一样的。

因此可以得出一个结论,行内元素和p这个不能插入块元素的标签的默认子元素就是 span 元素。而除特定标签外的块元素默认插入的子元素则是div元素。

 

生成多个类似元素

复制代码
ul>li.item-${$}*5

------缩写展开如下----------------------------------------------

<ul>
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
    <li class="item-4">4</li>
    <li class="item-5">5</li>
</ul>
复制代码

我们可以在标签后面添加 *number 来生成我们需要标签的个数,同时还可以使用 $ 来递增改变数字部分,如 class 值中也可以使用这一符号。并且可以同时使用多个 $ 符号,如:

复制代码
ul>li.item-$$${$$}*5

------缩写展开如下----------------------------------------------

<ul>
    <li class="item-001">01</li>
    <li class="item-002">02</li>
    <li class="item-003">03</li>
    <li class="item-004">04</li>
    <li class="item-005">05</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$@-3[title]{文本节点}*5

------缩写展开如下----------------------------------------------

<ul>
    <li class="item7" title="">文本节点</li>
    <li class="item6" title="">文本节点</li>
    <li class="item5" title="">文本节点</li>
    <li class="item4" title="">文本节点</li>
    <li class="item3" title="">文本节点</li>
</ul>
复制代码

 

 

缩写代码后缀

这里只举前端用到的那部分,主要讲到 |e、|c 、|s、|t 这四个后缀

|e 后缀

div.box>div.inner{▪¥×}|e

------缩写展开如下----------------------------------------------

<div class="box">
    <div class="inner">▪¥×</div>
</div>

|e 后缀的作用就是将缩写里面的特殊字符转义成字符编码

 

|c 后缀

复制代码
div.box>div.inner{▪¥}>div|c

------缩写展开如下----------------------------------------------

<div class="box">
    <div class="inner">▪¥
        <div></div>
    </div>
    <!-- /.inner -->
</div>
<!-- /.box -->
复制代码

|c 后缀的作用就是给每个有 class 或 id 的元素添加结束注释。

 

|s 后缀

div.box>div.inner{▪¥}|s

------缩写展开如下----------------------------------------------

<div class="box"><div class="inner">▪¥</div></div>

|s 后缀的作用就是将缩写代码在一行中展开。

以上三种后缀可以同时使用多个,可以达到多个效果结合。

 

|t 后缀

最后来说下 |t 后缀,该后缀和上面其他的后缀有所不同,他使用的主要是给带有数字开头的文本节点包标签,并去掉开始的数字(可以带有小数点或中华线),如:

复制代码
12-3文本节点1
45-文本节点2
78、文本节点3
7.文本节点4
7,文本节点4
s文本节点4

------缩写展开如下----------------------------------------------

<ul>
    <li>文本节点1</li>
    <li>文本节点2</li>
    <li>、文本节点3</li>
    <li>文本节点4</li>
    <li>,文本节点4</li>
    <li>s文本节点</li>
</ul>
复制代码

操作方法是,先选中这段文本,按下 ctrl+shift+g 快捷键(Wrap with Abbreviation),再输入 ul>li*|t 回车,就会展开这个结果了。由此可以看出,|t 可以将这些文本节点前面的数字删除掉。

 

最后介绍一个自动生成测试文本的代码

自动生成文本节点的代码是 lorem 或 lipsum 字符串,这两个字符串后面可跟一个数字,用于确定生成多少个单词,默认生成30个单词。如:

p>lorem10   或  p>lipsum10

------缩写展开如下----------------------------------------------

p>lipsum10|e

lorem只能跟在 >(右括号)的后面,表示前一个标签的内容。

如果 lorem 后面还跟着 class 、 id 或 *number,那么就会在父标签里面创建一个默认标签,并未这个标签添加这个 class 或 id ,最后把生成的文本节点放到子标签里面。如:

复制代码
ul>lorem*5
或
ul>li*5>lorem
------缩写展开如下----------------------------------------------

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, nulla, asperiores quod ea facilis nostrum tempora dolores suscipit odio quasi doloribus nemo provident est deleniti molestias culpa ipsam assumenda! Doloremque.</li>
    <li>Eligendi, recusandae vitae tempore deleniti omnis alias distinctio asperiores commodi veritatis obcaecati id totam porro culpa earum rerum voluptatum cupiditate adipisci eos minima nesciunt eius modi repellendus minus eum doloribus?</li>
    <li>Aliquam, iure, eaque, accusantium vero modi est quam deserunt rerum minima in quisquam aut culpa odio quasi quibusdam optio pariatur suscipit cumque enim cum placeat quas vitae sed ullam fugiat!</li>
    <li>Deleniti, iusto, officia, sunt optio reiciendis error nihil sit amet dolorem debitis perferendis vel quia hic minus obcaecati ducimus consequatur aliquid sapiente at nam dolorum ipsum harum impedit vero tempora!</li>
    <li>Dicta earum aspernatur praesentium accusantium nam. Ipsam, ducimus corporis reiciendis laudantium iste consequatur debitis error tempora labore in. Fugit, quos eaque deserunt cupiditate et beatae provident ipsa expedita vel nam.</li>
</ul>
复制代码

可以到ul>lorem*5ul>li*5>lorem展开后的代码是一样的。

 

 

Emmet官网:http://emmet.io/

Emmet缩写集合:http://docs.emmet.io/cheat-sheet/ 

Emmet缩写设置-配置文件:http://docs.emmet.io/customization/snippets/

posted @   破男孩  阅读(544)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
· 重磅发布!DeepSeek 微调秘籍揭秘,一键解锁升级版全家桶,AI 玩家必备神器!
点击右上角即可分享
微信分享提示