sublime / vscode 快捷生成HTML代码的实现
这篇文章主要介绍了sublime / vscode 快捷生成HTML代码的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
基本html结构
输入 !+Enter
1 2 3 4 5 6 7 8 9 10 11 12 | <!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 > |
生成div加类名的快捷键
输入 div.list>div.item_$*6
1 2 3 4 5 6 7 8 | < div class = "list" > < div class = "item_1" ></ div > < div class = "item_2" ></ div > < div class = "item_3" ></ div > < div class = "item_4" ></ div > < div class = "item_5" ></ div > < div class = "item_6" ></ div > </ div > |
带类名的div
输入 div.wrapper
1 | < div class = "wrapper" ></ div > |
带id的div
div#wrapper
1 | < div id = "wrapper" ></ div > |
属性 []
span[title=“test”]
1 | < span title = "test" ></ span > |
后代 >
输入div>span>a
1 | < div >< span >< a href = "" ></ a ></ span ></ div > |
兄弟 +
div+p+span
1 2 3 | < div ></ div > < p ></ p > < span ></ span > |
上级 ^
div>span^i
1 2 | < div >< span ></ span ></ div > < i ></ i > |
乘法 *
ul>li*2
1 2 3 4 | < ul > < li ></ li > < li ></ li > </ ul > |
文本 {}
div>span{this is test}
1 | < div >< span >this is test</ span ></ div > |
自增符 $
ul>li.list_${list $}*3
1 2 3 4 5 | < ul > < li class = "list_1" >list 1</ li > < li class = "list_2" >list 2</ li > < li class = "list_3" >list 3</ li > </ ul > |
ul>li.item$@3*3 “@3” (表示从3开始计数)
1 2 3 4 5 | < ul > < li class = "item3" >list 1</ li > < li class = "item4" >list 2</ li > < li class = "item5" >list 3</ li > </ ul > |
隐式转换
.class
1 | < div class = "class" ></ div > |
ul>.item
1 2 3 | < ul > < li class = "item" ></ li > </ ul > |
table>.row>.col
1 2 3 4 5 | < table > < tr class = "row" > < td class = "col" ></ td > </ tr > </ table > |
到此这篇关于sublime / vscode 快捷生成HTML代码的实现的文章就介绍到这了