前端emmet插件的一些經常使用用法

時間 2019-11-11

標籤前端 emmet 插件一些經常使用用法简体版

原文原文鏈接

如下是在webstorm中簡單使用emmet插件，注意一點就是當編寫完emmet命令後必定要把光標移動到命令的結尾處，否則生成的代碼會不同

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--1.#box$*4-->
 9     <div id="box1"></div>
10     <div id="box2"></div>
11     <div id="box3"></div>
12     <div id="box4"></div>
13 <!--2.div[attr='attr']-->
14     <!--div[attr='attr'][data-type='addText']-->
15     <div attr="attr" data-type="addText"></div> 
16 <!--.box1[attr='attr']-->
17     <div class="box1" attr="attr"></div>
18 <!--3.div{content}-->
19 <!--.box{這是測試emmet的內容部分}-->
20     <div class="box">這是測試emmet的內容部分</div>
21 <!--4.佈局；div>#header+#main+footer-->
22 <!--#container>(#header>ul>li*5>a)+(#main>#left+#right)+#footer-->
23     <div id="container">
24         <div id="header">
25             <ul>
26                 <li><a href=""></a></li>
27                 <li><a href=""></a></li>
28                 <li><a href=""></a></li>
29                 <li><a href=""></a></li>
30                 <li><a href=""></a></li>
31             </ul>
32         </div>
33         <div id="main">
34             <div id="left"></div>
35             <div id="right"></div>
36         </div>
37         <div id="footer"></div>
38     </div>
39 </body>
40 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。