Zen Coding语法

最新推荐文章于 2021-12-21 18:52:31 发布

花开花又谢

最新推荐文章于 2021-12-21 18:52:31 发布

阅读量498

点赞数

分类专栏： Zen-Coding

本文链接：https://blog.csdn.net/u010730897/article/details/52423223

版权

Zen-Coding 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以webstorm为例，执行以下的zen coding语法。只需要使用Tab键即可执行。
例：
输入html:5，然后按下Tab键生成以下代码

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
<body>

</body>
</html>

元素
输入元素名称即可生成对应html标签。
div
生成代码：

<div></div>

嵌套操作
子操作：>
div>li>span
生成代码：

  <div>
    <li><span></span></li>
  </div>

并列操作：+
div+li+span
生成代码：

  <div></div>
  <li></li>
  <span></span>

上级操作：^
div>li^div
生成代码：

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

重复：*
div>li*3
生成代码：

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

分组：（）
div>(li>span)*3
生成代码：

  <div>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
  </div>

分组可用于复杂的结构生成，但是通常建议一步一步的生成结构。例如：
div>(header>div>li*3>a)+footer>div
生成代码：

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

属性运算符
id、class：#，.
对于id属性在后面加#属性名，对于class属性在后面加.属性名
div>(header#header>div.class1.class2>li*3>a)+footer.footer>div
生成代码：

    <div>
    <header id="header">
      <div class="class1 class2">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </div>
    </header>
    <footer class="footer">
      <div></div>
    </footer>
  </div>

自定义属性:[]
input[type=’text’ placeholder=’输入…’ name]
生成代码:

  <input type="text" placeholder="输入..." name="">

编号:
div>li#id$*5
生成代码:

    <div>
    <li id="id1"></li>
    <li id="id2"></li>
    <li id="id3"></li>
    <li id="id4"></li>
    <li id="id5"></li>
  </div>

使用多个可以用零填充
div>li#id$$$*5
生成代码：

  <div>
    <li id="id001"></li>
    <li id="id002"></li>
    <li id="id003"></li>
    <li id="id004"></li>
    <li id="id005"></li>
  </div>

使用@可以改变顺序（升序、降序）和起始基数值
div>li#id$@-*5
生成代码：

  <div>
    <li id="id5"></li>
    <li id="id4"></li>
    <li id="id3"></li>
    <li id="id2"></li>
    <li id="id1"></li>
  </div>

div>li#id$@-8*5
生成代码：

    <div>
    <li id="id12"></li>
    <li id="id11"></li>
    <li id="id10"></li>
    <li id="id9"></li>
    <li id="id8"></li>
  </div>

文本：{}
p{文本内容}*3
生成代码：

  <p>文本内容</p>
  <p>文本内容</p>
  <p>文本内容</p>

使用Zen Coding的时候需要注意在元素与运算符之间是不能键入空格的，否则会无法运行。

花开花又谢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zen Coding语法

以webstorm为例，执行以下的zen coding语法。只需要使用Tab键即可执行。例：输入html:5，然后按下Tab键生成以下代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head><body></body></h
复制链接

扫一扫

专栏目录