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 that I would like to introduce today-shorthand.
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"><meta charset="UTF-8"><title></title><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.
pp#main.itema[href=http://wikipedia.org]{维基百科}div>pdiv+pp>span^div
The corresponding HTML code is:
<p></p><p id="main" class="item"></p><a href="http://wikipedia.org">维基百科</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>adiv#item$.class$$*3
The corresponding HTML code is
<li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><div id="item1" class="class01"></div><div id="item2" class="class02"></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+footertable>(thead>tr>th*5)(tbody>tr>td*5)nav>ul>(li>a[href=#]{Link})*5
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 代表 <!DOCTYPE html>2. %E 代表HTML标签。3. %E#id 代表id属性。4. %E.class 代表class属性。5. %E(attr="xxx") 代表某一个特定属性。6. %E XXX 代表插入标签的内容。7. %E %N 代表N是E的子元素。N如果写在第二行，需要缩进。
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%body%h1 Hello World%a(href="http://wikipedia.org" title="Wikipedia") 维基百科
The corresponding HTML code is:
<!DOCTYPE html>lang=‘en‘><title>Haml Demo</title><body>Hello World<a href=‘http://wikipedia.org‘ title=‘Wikipedia‘>维基百科</a></body>
In Haml, the "/" line represents an HTML comment, and the "-#" line represents the Haml comment.
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
