2017年12月5日 星期二

notepad++结合Zen Coding快速编写HTML代码

查notepad++的使用發現這篇，蠻好用的感覺
轉載自:notepad++結合Zen Coding快速編寫HTML代碼

經朋友介紹認識了Zen Coding一款快速編寫HTML代碼的插件，然後在google搜索一下其使用，讓在下激動不以，今天特意寫了一篇blog來跟大家一起分享。
         Zen Coding其實是一款快速編寫HTML,XML,XSL（或其他格式化語言）的編輯器插件，這個插件的實現了用縮寫方式完成大量重複的書寫工作。他的核心是一個強大的縮寫引擎，掌握這些縮寫技巧，給我們的編寫代碼帶來極高的編寫效率。他支持好多編輯器，如TextMate，UltraEdit，Notepad++等許多編寫器，我們可以從http://code.google.com/p/zen-coding下載到相對應的編輯插件，然後我們把解壓縮出來的文件，如下圖：


放到你的Notepad++安裝文件下的plugins目錄下，在我的電腦中的程序安裝地址是「C:\Program Files\Notepad++\plugins」（這個地址需要對應你的程序安裝地址）。然後重新啟動你的Notepad++編輯器就能看到菜單欄上增加了一項Zen Coding。如下圖所示：


這樣我們在Notepad++編輯下就成功的安裝好了Zen Coding的插件。
接著我們一起來看看Zen Coding如何使用，其實只要你對CSS的選擇器比較熟悉，就可以得用簡短的類似於CSS選擇器的代碼高效的編寫出HTML代碼，我們先來看一個簡單的實例，首先在你的編輯器中輸入下面一句代碼
div#header>div#logo+ul.nav>li.item-$*5>a
       接著按一下快捷鍵ctr+E，就會自動生成如下的HTML代碼：
<div id="header">
    <div id="logo"></div>
    <ul class="nav">
        <li class="item-1"><a href=""></a></li>
        <li class="item-2"><a href=""></a></li>
        <li class="item-3"><a href=""></a></li>
        <li class="item-4"><a href=""></a></li>
        <li class="item-5"><a href=""></a></li>
    </ul>
</div>
       這樣是不是很神奇呀。你一定會問這是怎麼實現的呢？在沒搞清楚這是怎麼回事的時候，你可能會相當的迷惑，不知道這是怎麼一回事。沒關係，我們先來看一下其在線演示，一起感受下zen-codingr的強大功能，請看其在線的DEMO演示。
       在打開的在線編輯中我們同樣輸入上面的那段代碼：
div#header>div#logo+ul.nav>li.item-$*5>a
       此時我們在按一下ctr+,就能看到轉換的HTML代碼
<div id="header">
    <div id="logo"></div>
    <ul class="nav">
        <li class="item-1"><a href=""></a></li>
        <li class="item-2"><a href=""></a></li>
        <li class="item-3"><a href=""></a></li>
        <li class="item-4"><a href=""></a></li>
        <li class="item-5"><a href=""></a></li>
    </ul>
</div>
       此處的快捷方式是ctr+,而在我們的Notepad++中使用的是ctr+E，所以這裡要提醒大家，在不同的編輯中的快捷方式是不一樣的，感興趣的朋友可以自己多研究一下，我們這裡主要是針對在notepad++中如何使用zen coding。
       在學習如何在notepad++中使用zen coding之前我們有必要先瞭解一下zen coding是一些基本規則，這樣我們才能更好的在notepad++中應用zen coding來提高大家編定代碼的效率。
Zend Coding書寫規範
            E：表示元素，如p,div等，例如我們在編輯中輸入：
p
按一下ctr+E，我們就能得到
<p></p>
E#name和E.name:這個是ID和Class屬性，和CSS樣式表定義ID和Class是一樣的。#表示ID，.表示Class。例如定義一個ID為header的div，我們可以這樣來書寫：div#header，然後定義一個class我們可以寫在div.region。我們一起先在編輯中輸入：
div#header
       然後展開，就成為：
<div id="header"></div>

div.region
       展開就是：
<div class="region"></div>
       當然我們同時可以將兩者合併在一起，因為在我們編寫代碼時，常會碰到一個元素具有一個ID和多個Class名，那我們這裡也可以簡單方便的實現，大家一起來看下面的一個例子：
div#nav.menu.links.tab
       同時我們來展開他：
<div id="nav" class="menu links tab"></div>
       是不是我們這個div同時具有ID名nav和class名menu，links，tab呀，方便吧
E>E:表示父級嵌套子級:
div#header>h1#logog
<div id="header">
    <h1 class="logo"></h1>
</div>
       我們還可以實現多級嵌套：
div#header>h1#logo>a
<div id="header">
    <h1 id="logo"><a href=""></a></h1>
</div>
E+E:同輩元素：
div#header>h1.site_name+p.site_solgan
<div id="header">
    <h1 class="site_name"></h1>
    <p class="site_solgan"></p>
</div>
給元素添加屬性：給標籤元素添加屬性
a[title]
<a href="" title=""></a>
       當然我們還可以給其加上屬性值：
a[title="hello zen coding"]
<a href="" title="hello zen coding"></a>
       不過這裡需要提醒大家一點，在展開之前，光標最好放在a[title="hello zen coding"]的末尾。不然會造成不可想像的錯誤，大家可以自己嘗試一下，就自然明白了。
E*N:多個相同元素的寫法
div#nav>ul>li.item*5>a
<div id="nav">
    <ul>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
    </ul>
</div>
E*N$：按索引生成
ul>li.item-$*3
<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>
       上面上一些Zen Coding的書寫規範，當然更多的書寫大家還可以參考ZenCodingCheatSheet.pdf文檔，這裡我就不全部闡述了。
       到這裡我們對zen coding有一定的瞭解了，也不會對一開始那一段如何產生代碼感到迷惑不解了，接著我們就可以來一起看看zen coding在notepad++編輯中的應用了。
【Ctrl+E】展開縮寫(Expand Abbreviation)：例如前面那些例子，我們只要在notepad++編輯中輸入如下代碼：
div#header>(h1.logo>a)+ul.nav>li.item*5>a
       我們只要按一下【Ctrl+E】，馬上就能把上面的代碼轉換成如下的HTML代碼
<div id="header">
    <h1 class="logo"><a href=""></a></h1>
    <ul class="nav">
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
    </ul>
</div>
       需要提醒大家的一點是，我們上面中的括號的使用，在前面我們沒有碰到過，這裡加上這個括號是為控制其嵌套格式，如果我們不加上這個括號，那麼生成出來的HTML是完全另外一們樣子，大家可以在自己本地電腦上的編輯上嘗試一下。你會恍然大悟的，同時也會知道他的更神奇之處。
【Ctrl+Shift+A】嵌套代碼(Wrap with Abbreviation)：如何說我們想在下面代碼中的P標籤外嵌套一個div.limiter
<div id="header">
    <p>Hello Zen Coding</p>
</div>
       我們只需要在p標籤的結束位置按【Ctrl+Shift+A】,在彈出的窗口中輸入div.limiter，如下圖所示：
       然後按回車【Enter】鍵，就會自動在p標籤外嵌套一個div.limiter的div標籤，如：
<div id="header">
    <div class="limiter">
        <p>Hello Zen Coding</p>
    </div>
</div>
          一定要記住是在p標籤的末尾，如果光標不在p標籤的末尾，而是在p標籤內容中的任何一個位置，那不div.limiter就不會嵌套在<p></p>外面，而是嵌套在Hello Zen Coding的外面。
       還有一種更讓你感興趣的方法，我們在編輯中寫幾行沒有任何標籤的內容，但我想給每個沒有標籤的內容嵌套在ul列表中,如下所示
list1
list2
list3
list4
list5
         我們在編輯器中按【Ctrl+A】選中這幾行內容，然後按【Ctrl+Shift+A】在彈出的對話框中輸入ul.menu>li.item*>a後按【Enter】鍵，就會生成如下代碼
<ul class="menu">
    <li class="item"><a href="">list1</a></li>
    <li class="item"><a href="">list2</a></li>
    <li class="item"><a href="">list3</a></li>
    <li class="item"><a href="">list4</a></li>
    <li class="item"><a href="">list5</a></li>
</ul>
        記得選中所有內容喲，我嘗試了不選中內容是沒有效果出現的喲。
       下面我們一起來看幾個常用的快捷方式
【Ctrl+Shift+D】選中代碼塊(Balance TagInward/Outward):選中當前光標所在的代碼塊，長按可以依次選中其父塊代碼。
【Ctrl+Alt+[，Ctrl+Alt+]】轉到上一個/下一個編輯點:按下可以依次跳到可輸入內容的編輯點，省去了不停按方向鍵或鼠標來定位編輯點的麻煩。
【Ctrl+Alt+M 】合併行（Merge Lines）:將選中的多行代碼合併為一行。壓縮css、js代碼為一行時，這個很方便。Ctrl+A，然後Ctrl+Alt+M，兩下即可搞定，免去了動用壓縮工具的麻煩。（當然這個只是簡單地將代碼合併為一行，並不能做更深入的代碼壓縮）
【Alt+/ 】添加、移除註釋（Toggle Comment）: 註釋掉光標所在的代碼塊
【Ctrl+Shift+』 】移除標籤（Remove Tag）:比如將
<div class="test">
    hello world
</div>
 移除div標籤，留下hello world。
【Ctrl+』 】空標籤轉化（Split/Join Tag）:比如將<div class="test"></div>轉化為<div class="test"/>，反向亦可。
       我們在這裡介紹了一些快捷的使用，但常用的還是我們前面看到那幾個生成HTML代碼的兩種【Ctrl+E】和【Ctrl+Shift+A】當然感興趣的朋友可以依次去嘗試。體會一下。
       如果你對JS精通的話，你還可以改寫plugins\NppScripting\includes\Zen Coding.js這個JS文件，讓它按照你喜歡的編輯習慣，當然你不編寫自己的縮寫規則，也強烈建議您閱讀一下這個JS文件，熟悉Zen Coding自帶的一些縮寫規則，讓你編輯代碼更快。
       最後Zen Coding分為Zen Html和Zen Css兩個部分，在這裡我們主要一起探討了Html部分，如果感興趣的朋友可以去深入瞭解一下Zen Css部分
如需轉載請註明出處：W3CPlus
-
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)