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

如何提升前端代码效率——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 1h1>
<h2 title="item2">Header 2h2>
<h3 title="item3">Header 3h3>

多位数自增

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="">herea> to continuep>