前端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>

 

posted on 2018-03-31 10:21  稀里糊涂学前端  阅读(173)  评论(0)    收藏  举报

导航