前端开发神器：notepad++插件zen-coding

budinger

墨衍会员 · AI 创作全网分发码龄18年

关注

翻译最新推荐文章于 2026-09-14 12:18:36 发布 1.4w 阅读 AI 写同款· GEO 优化 ›

Notepad++（带zen coding插件） Notepad++绿色版，自带zen coding插件，不用麻烦的一步一步下载插件了。立即下载

Zen HTML Elements

Based on HTML 5 specification draft.

Root Element

`html`

<html></html>

`html:xml`

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"></html>

`html:4t`

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>

</body>
</html>

`html:4s`

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>

</body>
</html>

`html:xt`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

`html:xs`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

`html:xxs`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

`html:5`

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>

</body>
</html>

Document Metadata

`head`

<head></head>

`title`

<title></title>

`base`

<base href="">

`link`

<link>

`link:css`

<link rel="stylesheet" type="text/css" href="style.css" media="all">

`link:print`

<link rel="stylesheet" type="text/css" href="print.css" media="print">

`link:favicon`

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

`link:touch`

<link rel="apple-touch-icon" href="favicon.png">

`link:rss`

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

`link:atom`

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">

`meta`

<meta>

`meta:utf`

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

`meta:win`

<meta http-equiv="Content-Type" content="text/html;charset=Win-1251">

`meta:compat`

<meta http-equiv="X-UA-Compatible" content="IE=7">

`style`

<style type="text/css"></style>

Scripting

`script`

<script type="text/javascript"></script>

`script:src`

<script type="text/javascript" src=""></script>

`noscript`

<noscript></noscript>

Sections

`body`

<body></body>

`section, sect`

<section></section>

`nav`

<nav></nav>

`article, art`

<article></article>

`aside`

<aside></aside>

`h1`

<h1></h1>

`h2`

<h2></h2>

`h3`

<h3></h3>

`h4`

<h4></h4>

`h5`

<h5></h5>

`h6`

<h6></h6>

`hgroup, hgr`

<hgroup></hgroup>

`header, hdr`

<header></header>

`footer, ftr`

<footer></footer>

`address, adr`

<address></address>

`div`

<div></div>

Grouping Content

`p`

<p></p>

`hr`

<hr>

`br`

<br>

`pre`

<pre></pre>

`dialog, dlg`

<dialog></dialog>

`blockquote, bq`

<blockquote></blockquote>

`ol`

<ol></ol>

`ol+`

<ol>
    <li></li>
</ol>

`ul`

<ul></ul>

`ul+`

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

`li`

<li></li>

`dl`

<dl></dl>

`dl+`

<dl>
    <dt></dt>
    <dd></dd>
</dl>

`dt`

<dt></dt>

`dd`

<dd></dd>

Text-level Semantics

`a`

<a href=""></a>

`a:link`

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

`a:mail`

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

`q`

<q></q>

`cite`

<cite></cite>

`em`

<em></em>

`strong, str`

<strong></strong>

`small`

<small></small>

`mark`

<mark></mark>

`dfn`

<dfn></dfn>

`abbr`

<abbr title=""></abbr>

`acronym, acr`

<acronym title=""></acronym>

`time`

<time></time>

`progress, prog`

<progress></progress>

`meter`

<meter></meter>

`code`

<code></code>

`var`

<var></var>

`samp`

<samp></samp>

`kbd`

<kbd></kbd>

`sub`

<sub></sub>

`sup`

<sup></sup>

`span`

<span></span>

`i`

<i></i>

`b`

<b></b>

`bdo`

<bdo dir=""></bdo>

`bdo:r`

<bdo dir="rtl"></bdo>

`bdo:l`

<bdo dir="ltr"></bdo>

`ruby`

<ruby></ruby>

`rt`

<rt></rt>

`rp`

<rp></rp>

Edits

`ins`

<ins></ins>

`del`

<del></del>

Embedded Content

`figure, fig`

<figure></figure>

`img`

<img src="" alt="">

`iframe, ifr`

<iframe src="" frameborder="0"></iframe>

`embed, emb`

<embed src="" type="">

`object, obj`

<object data="" type=""></object>

`param`

<param name="" value="">

`video`

<video src=""></video>

`audio`

<audio src=""></audio>

`source, src`

<source>

`canvas`

<canvas></canvas>

`map`

<map name=""></map>

`map+`

<map name="">
    <area shape="" coords="" href="" alt="">
</map>

`area`

<area shape="" coords="" href="" alt="">

`area:d`

<area shape="default" href="" alt="">

`area:c`

<area shape="circle" coords="" href="" alt="">

`area:r`

<area shape="rect" coords="" href="" alt="">

`area:p`

<area shape="poly" coords="" href="" alt="">

Tabular Data

`table`

<table></table>

`table+`

<table>
<tr>
    <td></td>
</tr>
</table>

`caption, cap`

<caption></caption>

`colgroup, colg`

<colgroup></colgroup>

`colgroup+, colg+`

<colgroup>
    <col>
</colgroup>

`col`

<col>

`tbody`

<tbody></tbody>

`thead`

<thead></thead>

`tfoot`

<tfoot></tfoot>

`tr`

<tr></tr>

`tr+`

<tr>
    <td></td>
</tr>

`th`

<th></th>

`td`

<td></td>

Forms

`form`

<form action=""></form>

`form:get`

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

`form:post`

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

`fieldset, fset`

<fieldset></fieldset>

`legend, leg`

<legend></legend>

`label`

<label for=""></label>

`input`

<input type="">

`input:hidden, input:h`

<input type="hidden" value="">

`input:text, input:t`

<input type="text" value="" id="">

`input:search`

<input type="search" value="" id="">

`input:email`

<input type="email" value="" id="">

`input:url`

<input type="url" value="" id="">

`input:password, input:p`

<input type="password" value="" id="">

`input:datetime`

<input type="datetime" value="" id="">

`input:datetime-local`

<input type="datetime-local" value="" id="">

`input:date`

<input type="date" value="" id="">

`input:month`

<input type="month" value="" id="">

`input:week`

<input type="week" value="" id="">

`input:time`

<input type="time" value="" id="">

`input:number`

<input type="number" value="" id="">

`input:range`

<input type="range" value="" id="">

`input:color`

<input type="color" value="" id="">

`input:checkbox, input:c`

<input type="checkbox" id="">

`input:radio, input:r`

<input type="radio" id="">

`input:file, input:f`

<input type="file" id="">

`input:submit, input:s`

<input type="submit" value="">

`input:image, input:i`

<input type="image" src="" alt="">

`input:reset`

<input type="reset" value="">

`input:button, input:b`

<input type="button" value="">

`button, btn`

<button></button>

`select`

<select id=""></select>

`select+`

<select id="">
    <option value=""></option>
</select>

`optgroup, optg`

<optgroup></optgroup>

`optgroup+, optg+`

<optgroup>
    <option></option>
</optgroup>

`option, opt`

<option></option>

Interactive Elements

`datagrid, datag`

<datagrid></datagrid>

`datalist, datal`

<datalist></datalist>

`textarea, tarea`

<textarea id="" cols="30" rows="10"></textarea>

`keygen, kg`

<keygen>

`output, out`

<output></output>

`details, det`

<details></details>

`command, cmd`

<command>

`bb`

<bb></bb>

`menu`

<menu></menu>

`menu:context, menu:c`

<menu type="context"></menu>

`menu:toolbar, menu:t`

<menu type="toolbar"></menu>

Conditional Comments

`cc:ie`

<!--[if IE]><![endif]-->

`cc:noie`

<!--[if !IE]><!--><!--<![endif]-->

展开缩写
展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。
这里是一个支持的属性和操作符的列表：
 E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);
正如你能看到的，你已经知道如何使用Zen Coding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…
 
  
   div#header>img.logo+ul#nav>li*4>a
  
 
…然后调用”展开缩写”行为。
这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下HTML代码：
 
  1
2
3
4 <li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
 
最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:
 
  1
2
3 <div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
 
只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…
 
  
   div#i$-test.class$$$*5
  
 
会被转换成为:
 
  1
2
3
4
5 <div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>
 
你会看到，当你写a的缩写的时候，输出是<a href=”"></a>。或者，如果你写img，输出就是<img src=”" alt=”" />。
Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：
 
  1
2
3
4
5
6
7 'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
   ...
   },
     'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
   ...
   }
   }