

The structure obtained by the preceding two statements is different. () control the nested group relationshipĭiv # header> (h1.logo> A) + ul.


& Lt Div id = "Wrap" & gt & lt Div class = "content" & gt & lt P & gt & lt /P & gt & lt /Div & gt Ĩ. Example:ĪTTR: indicates the element property. N: the number of times an element needs to be repeated. Example:ĭiv # header + Div # content + Div # footerĮ + (+ indicates that the default child element will be generated) > Indicates parent-level nested child level. To display one ID and multiple class attributes, writeĢ. Name indicate the ID and class attributes respectively. Here EIndicates elements, such as P and Div. Press Ctrl + e to generate the following code: Next, let's look at a more efficient example.ĭiv # header> Div # logo + ul. Then press the shortcut key Ctrl + e to automatically generate the following HTML code: Open the notepad ++ editor and enter the following code: 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. Knowledge about CSS and HTML is required for the use of Zen-coding. Restart the notepad ++ editor and you will see a Zen coding added to the menu bar. decompress the package and put the files in the package into the plugins folder under the notepad ++ installation directory ģ. Download the notepad ++ plug-in for Zen-coding. Zen-conding: (go to the download page and select the appropriate editor plug-in download)ġ. The Zen-coding plugin supports multiple editors, such as ultraedit and notepad ++. 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. Zen-coding is an editor plug-in that allows you to quickly compile HTML, CSS (or other formatting languages) Code.
