webstorm 中使用zencoding

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

一些常用的快捷提示:

快捷提示1:

html:5      //html5结构
  • 1
  • 1

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
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键回会生成以下代码:

"" 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">HTMLa>li>
    <li class="item"><a href="http://www.baidu.com">HTMLa>li>
    <li class="item"><a href="http://www.baidu.com">HTMLa>li>
    <li class="item"><a href="http://www.baidu.com">HTMLa>li>
    <li class="item"><a href="http://www.baidu.com">HTMLa>li>
    <li class="item"><a href="http://www.baidu.com">HTMLa>li>
ul>

你可能感兴趣的:(编辑器)