您的位置 首页 > 数码极客

atomzencoding如何使用

Emment插件

Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.

Emment的基本用法


创建初始文档

只要输入!或html:5,然后点击tab键,你就会看到一个HTML5的doctype默认标签

- html:5或!:HTML5文档类型

- html:xt:XHTML过渡型文档类型

- html:xs:XHTML严格型文档类型

- html:4t:HTML4过渡型文档类型

- html:4s:HTML4严格型文档类型

子元素>

使用>运算符可以用来生成彼此嵌套的元素:

section>div>p

上面的代码会生成下面的代码:

<section>

<div>

<p></p>

</div>

</section>

相邻元素+

使用+运算符可以用来生成彼此相邻的元素:

section+div+p

上面代码会生成下面的代码:

<section></section>

<div></div>

<p></p>

乘法*

ul>li*5

上面代码会生成5个li:

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

除了能一次性生成多个相同的标签之外,我们还可以通过$符号做递增;通过$@-符号做递减;

ul>li.i$*5生成以下内容:

<ul>

<li class="item item-1"></li>

<li class="item item-2"></li>

<li class="item item-3"></li>

<li class="item item-4"></li>

<li class="item item-5"></li>

</ul>

ul>li.i$@-*5生成以下内容:

<ul>

<li class="item item-5"></li>

<li class="item item-4"></li>

<li class="item item-3"></li>

<li class="item item-2"></li>

<li class="item item-1"></li>

</ul>

ul>li.i$@-3*5生成以下内容:

<ul>

<li class="item item-7"></li>

<li class="item item-6"></li>

<li class="item item-5"></li>

<li class="item item-4"></li>

<li class="item item-3"></li>

</ul>

更多用法请从下图中查询

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“atomzencoding如何使用”边界阅读