vscode代码缩写

最新推荐文章于 2024-04-11 15:40:14 发布

宇宙超级无敌博

最新推荐文章于 2024-04-11 15:40:14 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vscode html css

本文链接：https://blog.csdn.net/qq_35410544/article/details/131285275

文章介绍了使用Tab键进行HTML和CSS编码时的一系列快捷方式，包括嵌套、并列、重复、返回、分组、属性添加、内容填充、编序等操作，以及CSS中的快捷输入如宽度、高度、定位和文本装饰等，提升了编码效率。

一、嵌套 >：输入div>ul>li，按下Tab键

<div>
    <ul>
        <li></li>
    </ul>
</div>

二、并列+：输入div+p，按下Tab键

<div></div>
<p></p>

三、重复*：输入li*3，按下Tab键

<li></li>
<li></li>
<li></li>

四、返回 ^：输入ul>li*3^p，按下Tab键

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p></p>

五、分组 ()：输入(ul>li*2)+p，按下Tab键

<ul>
    <li></li>
    <li></li>
</ul>
<p></p>

六、属性添加：

（1）class填充：div#header+div.container+div.foot#footer，按下Tab键

<div id="header"></div>
<div class="container"></div>
<div class="foot" id="footer"></div>

（2）属性填充：input[name=user value=xx]，按下Tab键

<input type="text" name="username" value="xx">

（3）文本填充：ul>li{小李}*3按下tab键

<ul>
    <li>小李</li>
    <li>小李</li>
    <li>小李</li>
</ul>

（4）循环填充：select>option{$}*3按下tab键

<select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
</select>

（4）循环+属性填充：select>option[value='北京']{$}*3>a[href='#']{北京}按下tab键

<select name="" id="">
    <option value="北京">1<a href="#">北京</a></option>
    <option value="北京">2<a href="#">北京</a></option>
    <option value="北京">3<a href="#">北京</a></option>
</select>

七、编序 $：ul>li.light-$*3，按下Tab键

<ul>
    <li class="light-1"></li>
    <li class="light-2"></li>
    <li class="light-3"></li>
</ul>

八、内容{}：输入ul>li{$}*3，按下Tab键

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

九、其他：在CSS中还有许多快捷输入机巧

输入w100，按下Tab键，快捷输入width: 100px;
输入h100，按下Tab键，快捷输入height: 100px;
输入poa，按下Tab键，快捷输入position: absolute;
输入por，按下Tab键，快捷输入position: relative;
输入tdn，按下Tab键，快捷输入text-decoration: none;
输入db，按下Tab键，快捷输入display: block;
输入df，按下Tab键，快捷输入display: flex;
输入fdc，按下Tab键，快捷输入flex-direction: column;
输入bd1px#cccsolid，按下Tab键，快捷输入border: 1px #ccc solid;

参考：https://blog.csdn.net/weixin_72155467/article/details/129355660