如何提升前端代码效率——HTML、CSS缩写自动补全

最新推荐文章于 2025-04-07 11:18:24 发布

前端彭于晏Eddie

最新推荐文章于 2025-04-07 11:18:24 发布

阅读量2.4k

点赞数 6

分类专栏： coding效率文章标签： html 前端效率

本文链接：https://blog.youkuaiyun.com/weixin_45495667/article/details/111986031

版权

coding效率专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用HTML缩写和自动补全功能提高前端开发效率。通过特定的语法，如*号表示重复标签，>用于创建子标签，+用于创建兄弟标签，^表示上级标签，()用于分组，$进行自增计数，可以快速生成和组织HTML结构。此外，还能根据id和class自动生成div标签，以及设置标签属性和内部文本。这些技巧能帮助前端开发者节省大量手动编写和修改代码的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何提升前端代码效率——HTML缩写自动补全

我们在学习前端的时候，是否经常看到视频里的讲师，快速生成HTML代码，自己却丈二摸不着头脑；自己写前端的时候，面对重复代码的时候只会复制粘贴，还需要一个个修改class，id等特有属性。而以上这一切，都可以通过技巧来实现。

在代码编辑器里输入以下代码后使用Tab(有提示可以使用Enter)键即可实现

HTML

`根据标签名称生成`

a
div

<a href=""></a>
<div></div>

`重复标签 *`

div*5

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

`子标签 >`

ul>li>a

<ul>
  <li><a href=""></a></li>
</ul>

`兄弟标签 +`

div+img

<div></div>
<img src="" alt="">

`上级 ^`

nav>div>p+img^span

<nav>
  <div>
    <p></p>
    <img src="" alt="">
  </div>
  <span></span>
</nav>

`分组 ()`

(ul>li)*2

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

`自增 $`

class命名自增

ul>li.item$*5

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

标签、标签属性、标签内文本信息自增

h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

多位数自增

ul>li.item$$$*5

<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

从自定义数字开始自增

ul>li.item$@3*5

<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

`根据id、class生成div标签`

#header
.title
form#search.wide
p.class1.class2.class3

<div id="header"></div>
<div class="title"></div>
<form id="search" class="wide"></form>
<p class="class1 class2 class3"></p>

`标签属性`

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

`标签内文本`

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>