·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> php网站开发 >> Notepad++安装ZenCoding/Emmet插件

【如有意向点此提交需求】关于我们

Notepad++安装ZenCoding/Emmet插件

作者：佚名      php网站开发编辑：admin      更新时间：2022-07-23

Zen Coding 插件

==============

下载： Zen.Coding-Notepad++.v0.7.zip

==Installation==

1. Copy contents of this archive into Notepad++ 'plugins' folder (basically, it's C:\PRogram Files\Notepad++\plugins\)

2. Restart Notepad++

You should see "Zen Coding" menu item in top menu.

安装： 解压压缩包， 复制相应文件（NppScripting.dll及NppScripting文件夹）到Notepad++安装目录下的plugins文件夹下

 

---------------------------------------------------------------------------------------------------

 

Emmet 插件

============

zen-Coding改名Emmet，网站：docs.emmet.io

下载： emmet-npp.zip

https://github.com/emmetio/npp#readme

及 PythonScript_1.0.8.0.msi

 

 

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:

write HTML code with CSS-like abbreviations, use different actions to quickly select and modify HTML and CSS code and more!

 

==Installation==

Plugin manager

This plugin is available via Plugin Manager: use Plugins > Plugin Manager > Show Plugin Manager menu action and find and install “Emmet” plugin.

 

Manual installation

1.Install Python Script plugin (available in Plugin Manager).  

（可以通过Notepad++的Plugin安装Python Script          

或直接下载：PythonScript_1.0.8.0.msi进行安装）

2.Download EmmetNPP plugin and unpack it into C:\Program Files\Notepad++\plugins folder Start Nodepad++.

You should see Plugins > Emmet menu item.

 

==Changing keyboard shortcuts==

You can use default Settings > Shortcut Mapper… dialog to change action’s keyboard shortcuts.

plugin commands 》Expand abbreviation

Try to map Tab key to Expand Abbreviation action to improve your experience.

 

Extensions support

Emmet for Notepad++ supports extensions:

put all your .js and .json files into %USER%\AppData\Roaming\Notepad++\plugins\config\emmet folder and restart Notepad++.

---------------------------------------------------------------------------------------------------

 

如果遇到：

Unknown exception

Python Script Plugin did not accept the script

可参看 Notepad++ Emmet安装方法教程

 

PythonScript_1.0.8.0.msi 下载

http://sourceforge.net/projects/npppythonscript/files/Python%20Script%201.0.8.0/PythonScript_1.0.8.0.msi/download

 

----------------------------------------------------------------------------------------------------

Notepad++插件快捷键设置

!
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </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="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
 </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="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
 </head>
 <body>
  
 </body>
 </html>

#content.aticle.posts
 <div id="content" class="aticle posts"></div>


 ul#ccc.ddd
 <ul id="ccc" class="ddd">
 </ul>

div.aaa>ul>li
 <div class="aaa">
  <ul>
   <li></li>
  </ul>
 </div>

div>ul>li^^span
 <div>
  <ul>
   <li></li>
  </ul>
 </div>
 <span></span>


 div>ul>li^^div.clear
 <div>
  <ul>
   <li></li>
  </ul>
 </div>
 <div class="clear"></div>

div>ul>li*6
 <div>
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>

(div>dl>(dt+dl)*3)+footer>p
 <div>
  <dl>
   <dt></dt>
   <dl></dl>
   <dt></dt>
   <dl></dl>
   <dt></dt>
   <dl></dl>
  </dl>
 </div>
 <footer>
  <p></p>
 </footer>

div.banner>ul>li*2>((dt+dl)*3)+footer^^span

<div class="banner">
  <ul>
   <li>
    <dt></dt>
    <dl></dl>
    <dt></dt>
    <dl></dl>
    <dt></dt>
    <dl></dl>
    <footer></footer>
   </li>
   <li>
    <dt></dt>
    <dl></dl>
    <dt></dt>
    <dl></dl>
    <dt></dt>
    <dl></dl>
    <footer></footer>
   </li>
  </ul>
  <span></span>
 </div>

a
 <a href=""></a>

a>{我是链接标题}
 <a href="">我是链接标题</a>

link
 <link rel="stylesheet" href="">


 ul>li.item$*5
 <ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
 </ul>
 $ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个 $：

ul>li.item$$*5

<ul>
  <li class="item01"></li>
  <li class="item02"></li>
  <li class="item03"></li>
  <li class="item04"></li>
  <li class="item05"></li>
 </ul>

(header>ul.nav>li*5)+article+footer
 <header>
  <ul class="nav">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </header>
 <article></article>
 <footer></footer>