Use of Zen-coding in Notepad ++

Zen-coding is an editor plug-in that allows you to quickly compile HTML, CSS (or other formatting languages) Code. This plug-in can be abbreviated to complete a large number of repeated coding tasks, it is a powerful tool for Web Front-end practitioners. The Zen-coding plugin supports multiple editors, such as ultraedit and notepad ++.

Zen-conding: http://code.google.com/p/zen-coding/downloads/list (go to the download page and select the appropriate editor plug-in download)

I. Install Zen-coding on notepad ++

1. Download the notepad ++ plug-in for Zen-coding. (Zen-coding for notepad ++)
2. decompress the package and put the files in the package into the plugins folder under the notepad ++ installation directory;
3. Restart the notepad ++ editor and you will see a Zen coding added to the menu bar. As shown in:

Ii. Use of Zen-coding

Knowledge about CSS and HTML is required for the use of Zen-coding. In fact, as long as you are familiar with CSS selectors, you can use a short code similar to the CSS selector to efficiently compile HTML code. Open the notepad ++ editor and enter the following code:

Div # Name

Then press the shortcut key Ctrl + e to automatically generate the following HTML code:

 

<Divid = "name">

Next, let's look at a more efficient example.

Div # header> Div # logo + ul. Nav> Li. item-$ * 5>

Press Ctrl + e to generate the following code:

 

<Divid = "Header"> <divid = "logo"> <ulclass = "nav"> <liclass = "item-1"> <ahref = ""> </LI> <liclass = "item-2"> <ahref = ""> </LI> <liclass = "item-3"> <ahref = ""> </LI> <liclass = "item-4"> <ahref = ""> </LI> <liclass = "item-5"> <ahref = ""> </LI> </ul>

Zend coding syntax

1. E | E # name | E. Name

HereEIndicates elements, such as P and Div. # Name and. Name indicate the ID and class attributes respectively. Example:

Div

 

1

<Div>

Div # Main

 

1	<Divid = "Main">

Ul. Item

 

1	<Liclass = "item"> </LI>

To display one ID and multiple class attributes, write

Ul # nav. One. Two

 

1	<Ulid = "nav" class = "One Two"> </ul>

2. E> E | E # NAME> E # name | E. # NAME> E. Name | E. Name> E. Name

> Indicates parent-level nested child level. Example:

Div> Span

 

1	<Div> <span>

Div # nav> ul. Main

 

<Divid = "nav"> <ulclass = "Main"> </ul>

3. e + E | E # name + e # name | E. # name + E. Name | E. Name + E. Name

+ Indicates the sibling relationship. Example:

P + P

 

12

Div # header + Div # content + Div # footer

 

<Divid = "Header"> <divid = "content"> <divid = "footer">

E + (+ indicates that the default child element will be generated)

Table +

<TD>

<Table>

Ul +

 

<Ul> <li> </LI> </ul>

DL +

 

<DL> <DT> </DT> <DD> </dl>

4.E * n

N: the number of times an element needs to be repeated. Example:

P * 3

 

123

Ul # nav> Li. Item * 4

 

<Ulid = "nav"> <liclass = "item"> </LI> <liclass = "item"> </LI> </ul>

5. E * N $

$: Indicates the serial number. Example:

Ul # nav> Li. item-$ * 4

 

<Ulid = "nav"> <liclass = "item-1"> </LI> <liclass = "item-2"> </LI> <liclass = "item-3 "> </LI> <liclass =" item-4 "> </LI> </ul>

6. E [ATTR]

ATTR: indicates the element property. Example:

A [title]

 

1	<A href = "" Title = "">

TD [colspan = 2]

 

1	<Tdcolspan = "2">

7. E | Filter

E | E

| E: Output escape characters

Div # wrap> Div. content> p | E

 

& Lt; Div id = "Wrap" & gt; & lt; Div class = "content" & gt; & lt; P & gt; & lt;/P & gt; & lt;/Div & gt;

8. () control the nested group relationship

Div # header> (h1.logo> A) + ul. Nav> Li. Item * 5>

 

<Divid = "Header">

Div # header> h1.logo> A + ul. Nav> Li. Item * 5>

 

<Divid = "Header">

The structure obtained by the preceding two statements is different. Please observe.

Exercise: Write the following code using Zen-coding.

 

<Divid = "page"> <divid = "Header"> <ulid = "nav"> <li> <ahref = ""> </LI> <li> <ahref = ""> </LI> <li> <ahref = ""> </LI> <li> <ahref = ""> </LI> </ul> <divid = "page">         <Divid = "footer">

Answer: (select an empty row)
Div # page> (div # header> ul # nav> li * 4> A) + (div # page> (h1> span) + p * 2) + Div # footer

Iii. Use of Zen-coding in Notepad ++

Expand abbreviation (CTRL + E): Expand the abbreviation

Usage: Enter the abbreviation code and press the shortcut key at the end of the Code to obtain the complete code.

Wrap with abbreviation (CTRL + Shift + a): nesting parent-level elements

Usage: select the tag for which the parent element needs to be nested, press the shortcut key, and enter the parent tag in the pop-up dialog box and press Enter. Example:

 

List1list2list3list4list5

Select the preceding content and press Ctrl + Shift + A. In the displayed dialog box, enterUl. Nav> Li. item-$ *> A [title]Press enter to generate the following code:

 

<Ulclass = "nav"> <liclass = "item-1"> <ahref = "Title =" "> list1 </LI> <liclass =" item-2 "> <ahref = "" Title = ""> list2 </LI> <liclass = "item-3"> <ahref = "Title =" "> list3 </LI> <liclass = "item-4"> <ahref = "" Title = ""> list4 </LI> <liclass = "item-5"> <ahref = "" Title =" "> list5 </LI> </ul>

Balance taginward/outward (CTRL + Shift + d): Selected code block

Select the tag of the current cursor and press it again to select its parent tag.

Go to next/previous edit point (CTRL + ALT +]/CTRL + ALT + [): Go to the next/previous edit point

Merge lines (CTRL + ALT + M): Merge rows

Merge the selected multiple lines of code into one line. It is very convenient to compress CSS and JS Code as a line. CTRL + A, and then CTRL + ALT + M, which can be done twice, eliminating the trouble of using the compression tool. (Of course, this is simply to merge the code into one line, and it cannot be further compressed)

Toggle comment (Alt +/): add or remove comments

Comment out the code block where the cursor is located (Notepad ++'s built-in Ctrl + Shift + Q can also be used to comment out the code)

Split/join tag (CTRL + '): Empty tag Conversion

For example, you can convert <div> to <DIV/> to reverse.

/* Remove tag (CTRL + Shift + '): Remove tag

For example, you can remove the DIV tag <div> Hello world and leave it as "Hello World.

Abbreviation of Zen-coding

 

HTML: 4 T (HTML 4.01 transitional) HTML: 4 S (HTML 4.01) HTML: XT (XHTML 1.0) HTML: Xs (XHTML 1.0 strict) HTML: xxs (XHTML 1.1) HTML: 5 (HTML5) Meta: UTF, Meta: compatstyle, link: CSS, link: print, link: favicon, link: RSS, script, script: SRC Div, P, a, UL, ol, input: T, input: R ol +, dl +, table +, tr +, select +, MAP +, optg + CC: IE6, CC: IE, CC: noie

You can open the JS file plugins \ nppscripting \ shortdes \ Zen coding. js to familiarize yourself with some of the abbreviations and rules that Zen coding comes. */

 

TIPS: The/**/at the end of the image is used to prevent the content from being ugly due to external access to the box. I wonder if the Webmaster can handle this problem!