webstorm 中使用zencoding

最新推荐文章于 2018-08-15 10:54:15 发布

Doris_sun

最新推荐文章于 2018-08-15 10:54:15 发布

阅读量943

点赞数

分类专栏：编辑器文章标签： webstorm

编辑器专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webstorm中提供了一些zencoding快捷编码提示，只要输入左边缩写，按下tab键就可以快速生成html代码。

一些常用的快捷提示：

快捷提示1：

html:5      //html5结构
   
   1
   
   1

按下Tab键回会生成以下代码：

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

</body>
</html>
   
   1
2
3
4
5
6
7
8
9
10
   
   1
2
3
4
5
6
7
8
9
10

快捷提示2：

link:css      //引入css
   
   1
   
   1

按下Tab键回会生成以下代码：

<link rel="stylesheet" href="style.css"/>
   
   1
   
   1

快捷提示3：

script:src      //引入js
   
   1
   
   1

按下Tab键回会生成以下代码：

<script src=""></script>
   
   1
   
   1

快捷提示4：

script      //html中插入js
   
   1
   
   1

按下Tab键回会生成以下代码：

<script></script>
   
   1
   
   1

快捷提示5：

ul+   //ul及一个li
   
   1
   
   1

按下Tab键回会生成以下代码：

<ul>
    <li></li>
</ul>
   
   1
2
3
   
   1
2
3

快捷提示6：

a:link  //<a href=”http://”></a>
   
   1
   
   1

按下Tab键回会生成以下代码：

<a href="http://"></a>
   
   1
   
   1

快捷提示7：

a:mail  //<a href=”mailto:“></a>
   
   1
   
   1

按下Tab键回会生成以下代码：

<a href=”mailto:“></a>
   
   1
   
   1

快捷提示8：

form:get  //get表单
   
   1
   
   1

按下Tab键回会生成以下代码：

<form action="" method="get"></form>
   
   1
   
   1

快捷提示9：

input:hidden  //hidden输入框
   
   1
   
   1

按下Tab键回会生成以下代码：

<input name="" type="hidden"/>
   
   1
   
   1

快捷提示10：

div#name  //id:name
div.name  //class:name
div.one.two.three //class:one,two,three
   
   1
2
3
   
   1
2
3

按下Tab键回会生成以下代码：

<div id="name"></div>
<div class="name"></div>
<div class="one two three"></div>
   
   1
2
3
   
   1
2
3

快捷提示11：

head>link:css  //## 标题 ##head加link
   
   1
   
   1

按下Tab键回会生成以下代码：

<head>
    <link rel="stylesheet" href="style.css"/>
</head>
   
   1
2
3
   
   1
2
3

快捷提示12：

p+p  //两个p
p*3   //3个p
   
   1
2
   
   1
2

按下Tab键回会生成以下代码：

//两个p
<p></p>
<p></p>


//三个p
<p></p>
<p></p>
<p></p>
   
   1
2
3
4
5
6
7
8
9
   
   1
2
3
4
5
6
7
8
9

快捷提示13：

ul>li.item$*6  //创建ul下有个li同时class分别为item1，item2.。。
   
   1
   
   1

按下Tab键回会生成以下代码：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
</ul>
   
   1
2
3
4
5
6
7
8
   
   1
2
3
4
5
6
7
8

快捷提示14：

ul.menu>li.item*6>a[href="http://www.baidu.com"]{HTML}
//简写
ul.menu>li.item*6>a[href="http://www.baidu.com"]
   
   1
2
3
   
   1
2
3

按下Tab键回会生成以下代码：

<ul class="menu">
    <li class="item"><a href="http://www.baidu.com">HTML</a></li>
    <li class="item"><a href="http://www.baidu.com">HTML</a></li>
    <li class="item"><a href="http://www.baidu.com">HTML</a></li>
    <li class="item"><a href="http://www.baidu.com">HTML</a></li>
    <li class="item"><a href="http://www.baidu.com">HTML</a></li>
    <li class="item"><a href="http://www.baidu.com">HTML</a></li>
</ul>

Doris_sun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webstorm 中使用zencoding

webstorm中提供了一些zencoding快捷编码提示，只要输入左边缩写，按下tab键就可以快速生成html代码。一些常用的快捷提示：快捷提示1：html:5 //html5结构11按下Tab键回会生成以下代码：html lang="en">head> meta charset="UTF-8"> title>Documenttitle>
复制链接

扫一扫

专栏目录