标签：快速打开文件 等等 编辑 定义 其他 完成 ctr 自定义 代码
1、提高HTML页面的编辑速度
（1）Emmet语法，对于emmet语法的熟练运用，可以在很大程度上提高你的html编辑速度
//html的注释为<!-- -->的形式 此处使用"//"只是为了更加快捷 语法上说是错误的 //后代（一层套一层时使用）：> 缩写：nav>ul>li 代码： <nav> <ul> <li></li> </ul> </nav> //兄弟（相邻同胞元素的时候使用）：+ 缩写：div+p 代码： <div></div> <p></p> //父级：^（可以使用多个^^.... 表示的父父....级） //Class/ID名 缩写：div>p^div.hello+div#world 代码： <div> <p></p> </div> <div class="hello"></div> <div id="world"></div> //分组（当某标签和父元素为兄弟元素的时候使用）：（） 缩写：div>(ul>li>a)+p>span 代码： <div> <ul> <li><a href=""></a></li> </ul> <p><span></span></p> </div> //乘法有很多使用方法 //单纯的乘法（用来创建多个相同的标签）：* 缩写：ul>li*2 代码： <ul> <li></li> <li></li> </ul> //和自增号连用（用来创建多个相同却带序号的文本）：$ //用在Class/ID上 缩写：ul>li.item$*2+li#hello$*2 代码： <ul> <li class="item1"></li> <li class="item2"></li> <li id="hello1"></li> <li id="hello2"></li> </ul> //同时自增多个元素 缩写：h$[title=item$]{hello $}*2 代码： <h1 title="item1">hello 1</h1> <h2 title="item2">hello 2</h2> //规定自增的起始数字 缩写：ul>li.item$@3*2 代码： <ul> <li class="item3"></li> <li class="item4"></li> </ul> //自减 缩写：ul>li.item$@-*2 代码： <ul> <li class="item2"></li> <li class="item1"></li> </ul> //多个数字 缩写：ul>li.item$$*2 代码： <ul> <li class="item01"></li> <li class="item02"></li> </ul> //ID和类属性 //ID和类（不多说了"#"和"."） //ID和类同时设置 缩写：div.hello#world 代码： <div class="hello" id="world"></div> //多类名 缩写：div.hello.world 代码： <div class="hello world"></div> //自定义属性（属性选择器可能更好记）：[ ] 缩写：[a="value1" b=‘value2‘ c=value3 d]（双引号、单引号、没引号都没区别） 代码： <div a="value1" b="value2" c="value3" d=""></div> //文本（用来编辑标签内的文本）：{} //缩写：p>{hello}+a{world}+{!} || p{hello}>a{world}+{!} //此处的后代选择器是一定要有的 不然p和a就为兄弟元素了 //代码： <p>hello<a href="">world</a>!</p> //文档重复结构：！ 缩写：！ 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> //主要是这些 还有其他的自行链接
2、了解你的编辑器（主要是学会安装一些有用的插件和使用快捷键VS Code）
（1）快捷键：如快速注释ctrl+/、快速打开文件夹ctrl+k ctrl+o、快速选择整行ctrl+i等等（可以通过ctrl+shift+p查看）
（2）插件：Auto Close Tag（自动补充结束标签）、Auto Rename Tag（更改开始标签时改变相应的结束标签）、HTML Snippets（html标签包括H5）、HTML CSS Support（自动补全样式表）、Class autocomplete for HTML（自动补全html）、Path Intellisense（自动路径补全）、View In Browser（显而易见跑默认浏览器），未完待续....
标签：快速打开文件 等等 编辑 定义 其他 完成 ctr 自定义 代码
原文地址：http://www.cnblogs.com/swallowBoy/p/7189508.html
