webstorm zencoding

最新推荐文章于 2022-03-10 09:46:24 发布

小溪彼岸

最新推荐文章于 2022-03-10 09:46:24 发布

阅读量1.8k

点赞数 2

分类专栏： # HTML 文章标签： html webstorm

本文链接：https://blog.csdn.net/zww1984774346/article/details/52754549

版权

HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

一些常用的快捷提示：

快捷提示1：

html:5      //html5结构

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

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

</body>
</html>

快捷提示2：

link:css      //引入css

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

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

快捷提示3：

script:src      //引入js

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

<script src=""></script>

快捷提示4：

script      //html中插入js

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

<script></script>

快捷提示5：

ul+   //ul及一个li

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

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

快捷提示6：

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

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

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

快捷提示7：

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

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

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

快捷提示8：

form:get  //get表单

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

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

快捷提示9：

input:hidden  //hidden输入框

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

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

快捷提示10：

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

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

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

快捷提示11：

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

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

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

快捷提示12：

p+p  //两个p
p*3   //3个p

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

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


//三个p
<p></p>
<p></p>
<p></p>

快捷提示13：

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

按下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>

快捷提示14：

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

按下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>