Front-end development artifact: Emmet, front-end development God emmet

Front-end development artifact: Emmet, front-end development God emmet

Emmet (formerly Zen Coding) is an artifact that can greatly improve front-end development efficiency, allowing you to write HTML and CSS code.

Official Website: http://docs.emet.io/

1.> indicates the descendant

ul>li>a

<ul><li><a href=""></a></li></ul>

2. + indicates brother

div>h2+p

<div>


3. # id attribute


div#nav
<div id="nav"></div>


4. class Attribute


div.nav
<div class="nav"></div>


5. ^ indicates the upper level


div>p>span^a
<div><p><span></span></p><a href=""></a></div>


6. * Indicates multiplication.


ul>li*5
<ul><li></li><li></li><li></li><li></li><li></li></ul>


7. [] indicates Custom Attributes


div>a[title="hello world"]*3
<div><a href="" title="hello world"></a><a href="" title="hello world"></a><a href="" title="hello world"></a></div>


8. {} indicates text


div>a[title="hello world"]{Hello World}*3
<div><a href="" title="hello world">Hello World</a><a href="" title="hello world">Hello World</a><a href="" title="hello world">Hello World</a></div>


9. () indicates the group.


div>(ul>li>a)*5+p{Hello World}
<div><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><p>Hello World</p></div>


10. $ indicates auto-Increment


ul>li.item$*3
<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li></ul>


ul>li.item$$*3
<ul><li class="item01"></li><li class="item02"></li><li class="item03"></li></ul>


ul>li.item$@3*3
<ul><li class="item3"></li><li class="item4"></li><li class="item5"></li></ul>


ul>li.item$@-*3
<ul><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul>


11. More? See



What software is used for web Front-end development?
If you are a beginner, use editplus. This helps you understand the code and use dreamwaver again.
 
What are the most useful front-end development tools?
I just tried Microsoft's Modern. IE front end. It feels good.