快捷搜索:  汽车  科技

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)<!-- 输入div#parent>div#child回车 --> <div id="parent"> <div id="child"></div> </div><!-- 输入div#bro1 div#bro2回车 --> <div id="bro1"></div> <div id="bro2"></div><!-- 输入div#sup>div#child div#bro^div#sub回车 --> <div id="sup"> <div id="child"></div> <div id=&

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这里分享给大家,权当抛砖引玉,欢迎有更多的朋友分享更多的技术知识。

1.输入html:5,然后按tab键或回车(Enter)键,效果如下:

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(1)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(2)

注:输入感叹号"!",然后按Tab键或者回车(Enter)键也可以生成html骨架。

2.输入link:css引入css样式文件,link:favicon引入网站logo,输入script:src引入js

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(3)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(4)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(5)

3.输入标签名自动补齐

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(6)

直接输入标签名后回车

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(7)

4.使用"#“输入id,”.“输入class,”[]"输入属性

<!-- 输入div#main回车 --> <div id="main"></div> <!-- 输入div.content回车 --> <div class="content"></div> <!-- 输入div#main.content回车 --> <div id="main" class="content"></div> <!-- img[src=1.jpg][alt=pic1] --> <img src="1.jpg" alt="pic1">

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(8)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(9)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(10)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(11)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(12)

5.使用">“输入嵌套标签,” " 输入并列的兄弟标签,"^"上级元素

<!-- 输入div#parent>div#child回车 --> <div id="parent"> <div id="child"></div> </div>

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(13)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(14)

<!-- 输入div#bro1 div#bro2回车 --> <div id="bro1"></div> <div id="bro2"></div>

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(15)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(16)

<!-- 输入div#sup>div#child div#bro^div#sub回车 --> <div id="sup"> <div id="child"></div> <div id="bro"></div> </div> <div id="sub"></div>

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(17)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(18)

6.使用{}输入标签中的文本

<!-- div#main{input sth here} --> <div id="main">input sth here</div>

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(19)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(20)

7.使用"()"对标签分组及使用"*"生成多个相同的标签

<!-- (div#list1>ul>li*2) (div#list2>ul>li*3) --> <div id="list1"> <ul> <li></li> <li></li> </ul> </div> <div id="list2"> <ul> <li></li> <li></li> <li></li> </ul> </div>

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(21)

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(22)

8.使用自增符号$

<!-- $ 自增符号 --> <!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] --> <ul> <li><img src="./imgs/1.jpg" alt="img1"></li> <li><img src="./imgs/2.jpg" alt="img2"></li> <li><img src="./imgs/3.jpg" alt="img3"></li> </ul> <!-- ul>li*3>img[src=./imgs/$$.jpg][alt=img$$] --> <ul> <li><img src="./imgs/01.jpg" alt="img01"></li> <li><img src="./imgs/02.jpg" alt="img02"></li> <li><img src="./imgs/03.jpg" alt="img 03"></li> </ul> <!-- ul>li*3>img[src=./imgs/$$$.jpg][alt=img$$$] --> <ul> <li><img src="./imgs/001.jpg" alt="img001"></li> <li><img src="./imgs/002.jpg" alt="img002"></li> <li><img src="./imgs/003.jpg" alt="img003"></li> </ul> <!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt=img$$@4] --> <ul> <li><img src="./imgs/04.jpg" alt="img04"></li> <li><img src="./imgs/05.jpg" alt="img05"></li> <li><img src="./imgs/06.jpg" alt="img06"></li> </ul>

怎么在vs code里面建css和html(Code中创建html文件时的一些快捷操作)(23)

依此类推……

以上这些快捷操作是因为VS Code自带有Emmet插件。

Emmet插件非常强大,还有很多用法,大家还知道哪些呢,期待大家的分享。

猜您喜欢: