编写《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.app 22 <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