html 01）Emmet-创建HTML结构

Posted 2021-05-11

Grouping Tags: ()
 
div>(h1>h2)+footer
 
<div>
    <h1>
        <h2></h2>
    </h1>
    <footer></footer>
</div>
 
 
 
(div>dl>(dt+dd)*3)+footer>p
 
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Making Multiple Same Tags Side By Side: *
 
ul>li*5
 
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Adding Tag One Step Up: ^

div>p>span^h1

<div>
    <p>
        <span></span>
    </p>
    <h1></h1>
</div>


div>p>span^^h1

<div>
    <p><span></span></p>
</div>
<h1></h1>

Nesting One Tag Inside Another: >
 
nav>ul>li    
 
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Adding Tags side By Side: +
 
div+span+p  
 
<div></div>
<span></span>
<p></p>