Emmet's html syntax - operate your code efficiently

All operations can be completed in an instant by pressing the "tab" key

element

1. Input the element name in the editor to automatically complete and generate HTML tags, even if they are not standard HTML tags.
2. Input:! Or html:5 or html:4s or html:4t will automatically complete the basic structure of html

Nested operation

1. Use ">" to generate child elements

// input
div>ul>li

// Press the TAB key.
<div>
    <ul>
        <li></li>
    </ul>
</div>

2. Use "+" to generate sibling elements

// input
div+p+bq

// Press the TAB key.
<div></div>
<p></p>
<blockquote></blockquote>

3. Use "^" to generate parent element

// input
div+div>p>span+em^bq

// Press the TAB key.
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

4. Use "*" to generate multiple identical elements

// input
div>ul>li*5

// Press the TAB key.
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

5. Use "()" to group elements

// input
// The element after "+" is sibling to the first element in brackets
div>(header>ul>li*2)+footer>p

//Press the TAB key.
<div>
    <header>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Attribute operation

1.id and class: elements and id attribute values are separated by "ා" and class attribute values are separated by "."

// input
div#header+div.page+div#footer.class1.class2.class3

// Press the TAB key.
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

2. Use "[]" to mark other properties

// input
td[title='hello' colspan=3]

// Press the TAB key.
<td title="hello" colspan="3"></td>

3. Implement automatic numbering from 1 to n with "$" ("*" implements multiple elements)

// input
li.item$*3

// Press the TAB key.
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

You can add "@ n" after "$" to modify the starting value of the number to n.

// input
li.item$@3*3

// Press the TAB key.
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>

You can add "@ -" after "$" to modify the direction of the number.

// input
li.item$@-3*3

// Press the TAB key.
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>

4. Add text content with "{}"

// input
a[href=me.htm]{click me}

// Press the TAB key.
<a href="me.htm">click me</a>

More shorthand methods are being updated. Follow me to get the latest news

Tags: Front-end Attribute

Posted on Wed, 25 Mar 2020 10:31:26 -0400 by jack_wetson