前端開發提高效率之快速輸入標籤
阿新 • • 發佈：2018-12-06
編寫《Java程式設計思想》的作者 Bruce Eckel 曾說過：在這個領域做得越多，我越覺得軟體開發比任何行業都更接近於寫作。
程式設計師可以說是程式設計領域的“作家”，作家需要好的寫作工具和技巧，對程式設計師來說，找到一款適合自己的程式碼編輯器和程式碼編寫技巧同樣重要。
在這裡我推薦使用Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級程式碼編輯器，支援語法高亮、智慧程式碼補全、自定義熱鍵等特性，提供了豐富的擴充套件生態系統。並針對網頁開發和雲端應用開發做了優化，可以直接下載可謂是微軟的良心之作。當然我在這裡也就是簡單論述下編輯器，本文主要是教大家如何提高html編寫效率。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <mate charest="utf-8" /> 5 <title>Demo</title> 6 </head> 7 <body> 8 <!-- 1、最常用使用方法輸入： ‘ <a ’ 的時候在輸入： ‘ > ’就可以自動補齊 --> 9 <a 10 <a></a> 11 12<!-- 2、輸入‘b’，按下Tab鍵,可以快速建立b標籤 --> 13 b 14 <b></b> 15 16 <!-- 3、輸入：‘ span#app ’，按下Tab，可以快速建立id為‘app’的‘span’標籤 --> 17 span#app 18 <span id="app"></span> 19 20 <!-- 4、輸入：‘ div.app ’,按下Tab鍵，可以快速建立class為‘app’的’‘div’標籤 --> 21 div.app22 <div class="app"></div> 23 24 <!-- 5、輸入：‘ ul>li*3 ’,按下Tab鍵可以快速建立‘ ul ’下的3個‘ li ’標籤 --> 25 ul>li*3 26 <ul> 27 <li></li> 28 <li></li> 29 <li></li> 30 </ul> 31 32 <!-- 6、輸入：‘ ul.menu>li*3>a[href=#]{建立一個class為‘ menu ’的‘ ul ’標籤 33 包裹住3個li標籤下包裹住超連結a標籤的內容為this！} --> 34 ul.menu>li*3>a[href=#]{建立一個class為‘ menu ’的‘ ul ’標籤包裹住3個li標籤下 35 包裹住超連結a標籤的內容為this！} 36 <ul class="menu"> 37 <li><a href="#">建立一個class為‘ menu ’的......的內容為this！</a></li> 38 <li><a href="#">建立一個class為‘ menu ’的......的內容為this！</a></li> 39 <li><a href="#">建立一個class為‘ menu ’的......的內容為this！</a></li> 40 </ul> 41 42 <!-- 7、輸入 ‘ ul>li*5>a[href=#]{我序號是$} ’ --> 43 ul>li*5>a[href=#]{我序號是$} 44 <ul> 45 <li><a href="#">我序號是1</a></li> 46 <li><a href="#">我序號是2</a></li> 47 <li><a href="#">我序號是3</a></li> 48 <li><a href="#">我序號是4</a></li> 49 <li><a href="#">我序號是5</a></li> 50 </ul> 51 52 <!-- 8、輸入： ‘ [img src="image/$.jpg" alt="new$"]*3 ’ --> 53 img[src="image/$.jpg" alt="new$"]*3 54 <img src="image/1.jpg" alt="new1"> 55 <img src="image/2.jpg" alt="new2"> 56 <img src="image/3.jpg" alt="new3"> 57 58 <!-- 9、輸入a[href=#] 按下Tab鍵，可以快速建立帶超連結的a標籤 --> 59 a[href=#] 60 <a href="#"></a> 61 62 <!-- 10、輸入 ‘ form：get/form:post ’ ，可以快速建立get傳參的form表單 --> 63 form:get 64 <form action="" method="get"></form> 65 form:post 66 <form action="" method="post"></form> 67 68 <!-- 11、輸入：‘ input：button ’，按下Tab鍵，可以快速建立input型別為button. PS其他型別也一樣！ --> 69 input:button 70 <input type="button" value=""> 71 72 <!-- 12、輸入： ‘ a:link ’ ，可以快速建立<a href="http://"></a> --> 73 a:link 74 <a href="http://"></a> 75 76 <!-- 13、輸入： ‘ div.news1+div.news2 ’,按下Tab鍵，可快速建立並列標籤 --> 77 <div class="news1"></div> 78 <div class="news2"></div> 79 80 <!-- 14、輸入： ‘ link ’， 按下Tab鍵，可快速建立<link rel="stylesheet" href=""> --> 81 <link rel="stylesheet" href=""> 82 83 <!-- 15、輸入： ‘ link:css ’, 按下Tab鍵，可快速建立<link rel="stylesheet" href="style.css"> --> 84 <link rel="stylesheet" href="style.css"> 85 86 <!-- 16、輸入： ‘ script:src ’,按下Tab鍵，可快速建立<script src=""></script> --> 87 script:src 88 <script src=""></script> 89 </body> 90 </html>
前端開發-Sky