html标签的快捷

 

html标签的快捷录入方式

一：

?

1 2 3 4 5

<ul>     <li><a href=""></a></li> </ul> 如果要写上面的标签，直接写   ##ul>li>a 然后按Tap键盘，就可以快速构建

　　

二：

?

1 2 3 4 5

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

　　

ul>(li>a)*3 然后按Tap键，就可以快速撰写

三：同时还可以给标签添加属性：

?

1 2 3 4 5

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

　　

ul>(li>a[#])*3 然后按Tap键，就可以快速撰写

四：不同的属性：

?

1 2 3 4 5

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

　　

ul>(li>a[click="#"])*3

五. 父子关系：>，使用>操作符在内部相互嵌套的标签：

?

1 2 3 4 5 6

div>ul>li <div>      <ul>          <li></li>      </ul>  </div>

　　

六.：兄弟关系：+，使用+操作符将标签处于同一个层级：

div+p+footer
<div></div>  
<p></p>  
<footer></footer>  

七：生成兄弟关系时，像ul dl这样的列表标签，使用+操作符将生成一个标准的列表结构：

ul+
<ul>  
    <li></li>  
</ul>  


dl+
<dl>  
    <dt></dt>  
    <dd></dd>  
</dl>  

八： 上级关系：^，使用 ^ 操作符使标签与前一标签的父级处于相同的级别：

div+div>p>span+em^bq
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div> 

 


使用两^操作符就与前一标签的爷爷级是相同级别，依此类推：

?

1 2 3 4 5 6

div+div>p>span+em^^bq <div></div>  <div>      <p><span></span><em></em></p>  </div>  <blockquote></blockquote>

　　

九： 乘法：，使用操作符可以输出多个标签：

div>ul>li*5

<div>  
    <ul>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
    </ul>  
</div>  

十： 分组：()，用()操作符进行分组，使编写的代码结构更加清晰、明了，一组标签就相当一个元素：

div>(header>ul>li*2>a)+footer>p
<div>  
    <header>  
        <ul>  
            <li><a href=""></a></li>  
            <li><a href=""></a></li>  
        </ul>  
    </header>  
    <footer>  
        <p></p>  
    </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>

CSS选择器，给标签指定id和class选择器，只需在标签的后面直接添加，但必需以.或#开头：

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

<div id="header"></div>  
<div class="page"></div>  
<div id="footer" class="class1 class2 class3"></div>  

Emmet默认的标签是div，所以我们在写带有CSS选择器的div标签时，可以省去div，你可以试试。

十一：自定义属性：[]（英文下的中括号），使用[]操作符给标签添加自定义属性：

td[title="Hello world!" colspan=3]
<td title="Hello world!" colspan="3"></td>  

可以把你喜欢的一些属性放在[]内，如果不指定属性值，代码将生成不带属性值的HTML默认标签：

td[colspan title]

属性值必需使用单引号或双引号，不然就会出现你可能想到的效果。

十二：. 项目编号：，使用∗可以重复的标签，，使用∗可以重复的标签，可以使标签生成有序列表，输出的值为数字：

ul>li.item$*5
<ul>  
    <li class="item1"></li>  
    <li class="item2"></li>  
    <li class="item3"></li>  
    <li class="item4"></li>  
    <li class="item5"></li>  
</ul>  

除了生成无序列表，其它的标签也是一样：

h[title=item]{Header $}*3

<h1 title="item1">Header 1</h1>  
<h2 title="item2">Header 2</h2>  
<h3 title="item3">Header 3</h3>  

你也可以使用多个$操作符用0（零）来分填充数字：

ul>li.item$$$*5

<ul>  
    <li class="item001"></li>  
    <li class="item002"></li>  
    <li class="item003"></li>  
    <li class="item004"></li>  
    <li class="item005"></li>  
</ul>  

十二：. 更改列表的起始数字与顺序，看下面的代码就一目了然：数字的倒序，只需在前添加@-：*

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

起始数字，在前添加@起始数字：*

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

而从起始数字为3的列表倒序，只需把上面的Emmet代码item后面的数字写成@-3*5。

十三：. 文本：{}，使用花括号来添加文本元素：

a{Click me}

<a href="">Click me</a>

注意：当{}作为单独的一个操作符使用时，a{click}和a>{click}将生成相同的标签，但当使用了多个，或用了其它操作符时将会生成不同的标签：

作者：YU不忘初心
链接：https://www.jianshu.com/p/d0188312a14d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。