编辑器中快速生成代码——emmet输入法

使用快速输入html文本的格式，又叫zencoding。

1.！+ tab：生成html

2.标签名+tab：输入一个标签名。

3.标签名*n：连续输入n个标签。

4.标签名.c1.c2.c3 ... ：输入包含n个class值的标签。

5.标签名#c：输入一个id属性为c的标签。

6.当标签名是div时，一般可以直接#box。

7.标签名[pro]：输入一个拥有pro属性的标签。

8.标签名[p1=v1 p2=v2 ...]：输入一个p1属性为v1，p2属性为v2的标签。

9.标签名{内容}：输入一个指定内容的标签。

10.标签名>子标签名：输入父标签和子标签

11.在输入多个标签时，可以用$表示序号：

例如：ul>li{第$行}*3、img[src=$.jpg]*3

tab以后自动生成代码如下：

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

<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">

12.复合写法，自行搭配和尝试。例如：table#t1.red>tr*3>td[rowspan=2]*4{第$列}。

生成如下 一个table，id为t1,class为red，3行4列，每个td都有一个rowspan属性为2，在td中，标明几行几列：

 <table id="t1" class="red">
        <tr>
            <td rowspan="2">第1列</td>
            <td rowspan="2">第2列</td>
            <td rowspan="2">第3列</td>
            <td rowspan="2">第4列</td>
        </tr>
        <tr>
            <td rowspan="2">第1列</td>
            <td rowspan="2">第2列</td>
            <td rowspan="2">第3列</td>
            <td rowspan="2">第4列</td>
        </tr>
        <tr>
            <td rowspan="2">第1列</td>
            <td rowspan="2">第2列</td>
            <td rowspan="2">第3列</td>
            <td rowspan="2">第4列</td>
        </tr>
    </table>

...

 

转载于:https://www.cnblogs.com/PeriHe/p/8275115.html