VSCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這記錄一些。 1.輸入html:5，然後按tab鍵或enter鍵，效果如下： 2.輸入link:css引入css樣式文件，輸入script:src引入js 3.輸入標簽名自動補齊 4.隨機文本的輸入 5.使用"#"輸入id，"."輸入 ...
VSCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這記錄一些。
1.輸入html:5，然後按tab鍵或enter鍵，效果如下：
1 <!-- 輸入html或者html:5生成頁面模板 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 <body> 11 12 </body> 13 </html>
2.輸入link:css引入css樣式文件，輸入script:src引入js
1 <!-- 輸入link:css引入樣式 --> 2 <link rel="stylesheet" href=""> 3 <!-- 輸入script:src引入js --> 4 <script src=""></script>
3.輸入標簽名自動補齊
1 <!-- 輸入標簽名 h1 按tab鍵或Enter鍵自動補齊 --> 2 <h1>HTML快捷輸入練習</h1> 3 <!-- {}可輸入標簽內的文本 如輸入：h2{填充文本} --> 4 <h2>填充文本</h2>
4.隨機文本的輸入
1 <!-- Lorem自動輸入一段隨機文本(預設30個單詞)，Lorem10 輸入10個單詞，Lorem*5 輸入5遍隨機文本 --> 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis? 3 <!-- Lorem10 的結果--> 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem. 5 <!-- Lorem10*10 的結果--> 6 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis. 7 Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae. 8 Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.
5.使用"#"輸入id，"."輸入class，"[]"輸入屬性
1 <!-- div#main.content 輸入id、class --> 2 <div id="main" class="content"></div> 3 <div id="foot" class="foot" data="結束"></div> 4 <!-- div[alt=到底了]{結束} 添加屬性及包裹文本 --> 5 <div alt="到底了">結束</div>
6.使用">"輸入嵌套標簽，"+" 輸入併列的兄弟標簽，"^"上級元素
1 <!-- div>div#imgs{put some imgs here} 標簽的嵌套--> 2 <div> 3 <div id="imgs">put some imgs here</div> 4 </div> 5 6 <!-- div#left{I am left}+div#right{I am right} 併列標簽 --> 7 <div id="left">I am left</div> 8 <div id="right">I am right</div> 9 10 <!-- 看網上資料說^上級元素,沒懂是什麼意思，試了幾個體會一下 --> 11 <!-- div#div1>p^div#div2 把div1提出成一行和div2同級 --> 12 <div id="div1"> 13 <p></p> 14 </div> 15 <div id="div2"></div> 16 <!-- div>div#div1>p^div#div2 --> 17 <div> 18 <div id="div1"> 19 <p></p> 20 </div> 21 <div id="div2"></div> 22 </div> 23 24 <!-- div>p>img^div>ul>li --> 25 <div> 26 <p><img src="" alt=""></p> 27 <div> 28 <ul> 29 <li></li> 30 </ul> 31 </div> 32 </div> 33 <!-- div>div>div^div --> 34 <div> 35 <div> 36 <div></div> 37 </div> 38 <div></div> 39 </div> 40 <!-- div>div^div --> 41 <div> 42 <div></div> 43 </div> 44 <div></div>
7.使用"{}"對標簽分組及使用"*"生成多個相同的標簽
1 <!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括弧分組標簽 *生成多個標簽--> 2 <div id="list1"> 3 <ul> 4 <li></li> 5 <li></li> 6 </ul> 7 </div> 8 <div id="list1"> 9 <ul> 10 <li></li> 11 <li></li> 12 </ul> 13 </div>
8.自增符號$
1 <!-- $ 自增符號 --> 2 <!-- ul>li*3>img[src=./imgs/$.jpg][alt={img $}] --> 3 <ul> 4 <li><img src="./imgs/1.jpg" alt="img 1"></li> 5 <li><img src="./imgs/2.jpg" alt="img 2"></li> 6 <li><img src="./imgs/3.jpg" alt="img 3"></li> 7 </ul> 8 9 <!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] --> 10 <ul> 11 <li><img src="./imgs/001.jpg" alt="img 001"></li> 12 <li><img src="./imgs/002.jpg" alt="img 002"></li> 13 <li><img src="./imgs/003.jpg" alt="img 003"></li> 14 </ul> 15 16 <!-- ul>li*3>img[src=./imgs/[email protected]][alt={img $$@4}] --> 17 <ul> 18 <li><img src="./imgs/04.jpg" alt="img 04"></li> 19 <li><img src="./imgs/05.jpg" alt="img 05"></li> 20 <li><img src="./imgs/06.jpg" alt="img 06"></li> 21 </ul>
這些快捷操作需要Emmet插件，本文是在VSCode下編寫的，其他編輯器如Atom、Sublime Text都支持Emmet，其功能還有很多，待以後慢慢學習。
