Home > Developer > Web Develop
The HTML code is cumbersome to write because it has many labels.
One way to do this is to use a template to fill in your own content within a skeleton that someone else has written. There is another way I would like to introduce today----shorthand method.
The commonly used shorthand method, at present mainly is Emmet and Haml two kinds, this article will introduce.
These two kinds of simple writing, function close, each has the characteristic. Considering that Haml is based on the Ruby language, I recommend that Ruby/rails projects use Haml, and other projects use Emmet.
First, the use of Emmet
Emmet is an editor plugin, the official website provides multi-editor support. I use Vim in general, and the following is an example of vim plugin.
First, follow the VIM plugin documentation to install it. Then, create a new text file, type
html:5
Click "<ctr+y>," (Press the CTRL key +y, then the comma key, the different editors have different conversion keys), this line immediately becomes the following look.
<! DOCTYPE html>Lang="En">><metaCharSet="UTF-8"> <title></title> < Span class= "token punctuation" >> <body> </body> >
This is the basic usage of Emmet: write the shorthand form first, then use "<CTRL+Y>" To turn it into HTML code.
Emmet supports shorthand rules, similar to CSS selectors (uppercase E represents an HTML tag):
1. E 代表HTML标签。 2. E#id 代表id属性。 3. E.class 代表class属性。 4. E[attr=foo] 代表某一个特定属性。 5. E{foo} 代表标签包含的内容是foo。 6. E>N 代表N是E的子元素。 7. E+N 代表N是E的同级元素。 8. E^N 代表N是E的上级元素。
Take a look at the example below.
p p#main.item a[href=http://wikipedia.org]{维基百科} div>p div+p p>span^div
The corresponding HTML code is:
<p></p><pId="Main"Class=The item"></p><aHref="Http://wikipedia.org"> Wikipedia</a><div><p></p></div><div></div><p></p> <p> <span></span> </p > <div></div>
The Emmet also provides ligatures (E*n) and auto-numbering (e$*n) functions.
li*3>a div#item$.class$$*3
The corresponding HTML code is
<li><aHref=""></a></li><li><aHref=""></a></li><li><aHref=""></a></li><divId="Item1"Class="Class01"></div><divId="Item2"Class= "Class02" >< Span class= "token tag" ></div > <div id= "Item3" class= "Class03" ></div>
Here are some other shorthand examples where readers can test themselves to see what HTML code they are translating into.
Header+main+footer Table> (Thead>tr>th* 5) (Tbody>tr>td* 5) Nav>ul> (Li>a[href=#]{link}"
Emmet Use the button "<ctrl+y>/" to make a block of code HTML comments. For more functions, please refer to the following links:
* Zeno Rocha, Goodbye, Zen Coding. Hello, emmet!.
* Sergey Chikuyonok, Zen coding:a Speedy to Write html/css Code
* Joshua Johnson, 7 Awesome Emmet HTML time-saving Tips
* Zen-coding VIM Tutorial
Second, the use of Haml
Haml differs from Emmet, which is a command-line tool. You need to install the Ruby language before installing Haml.
gem install haml
When used, the Haml file is converted to an HTML file at once using the command line.
haml input.haml output.html
The simplified rules for Haml are as follows:
1.!!!5 delegates<! DOCTYPE html>2.%E represents the HTML tag.3%e #id represents the id attribute. 4%e.class represents the Class attribute. 5%e (Attr=" xxx ") represents a particular attribute. 6%e XXX represents the contents of the insert tag. 7%e %n means that N is a child of E. n If you write on the second line, you need to indent.
The following is a code example of Haml, where the hierarchical relationship of the code block is represented by indentation.
!! ! 5 %html{lang: ' en ' } %head %title Haml Demo %bod Y %h1 Hello world %a (Href= "http://wikipedia.org" Title= "wikipedia" ) wikipedia
The corresponding HTML code is:
<! DOCTYPE html>Lang= ' en '>><title>haml Demo</title>><body>>hello World> <a href = ' http://wikipedia.org ' title= ' Wikipedia ' > wikipedia </a> </body> >
In Haml, the "/" line represents an HTML comment, and the "-#" line represents the Haml comment. Please refer to the following links for more functions.
* Nick Walsh, Craft Cleaner, more concise HTML with Haml
* Ian Oxley, an Introduction to Haml
* Haml Reference
HTML code shorthand: Emmet and Haml (EXT)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
