html快捷键

目录索引

1. 生成html模板：【!】或者【html:5】

生成的模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2.单个标签的快速生成

2.1 打完标签名，按下回车键或者Tab键：【div】

生成的模板如下：

<div></div>

2.2 【#】id，【.】class，【[]】属性 ，【{}】标签内容

例：

div.class1#id1[height=100%][width=50%]{aaa bbb}

生成的模板如下：

<div class="class1" id="id1" height="100%" width="50%">aaa bbb</div>

3.生成多个相同的同级标签：【table*3】

生成的模板如下：

  <table></table>
  <table></table>
  <table></table>

4.生成多个不同的同级标签：【div+input+table】

生成的模板如下：

  <div></div>
  <input type="text">
  <table></table>

5.生成嵌套标签：【>】

5.1 指定标签：【el-container>div>table】

生成的模板如下：

  <el-container>
    <div>
      <table></table>
    </div>
  </el-container>

5.2 指定class：【.class1>.class2>.class3】

生成的模板如下：

  <div class="class1">
    <div class="class2">
      <div class="class3"></div>
    </div>
  </div>

再例如：【el-container.class1>div.class2>table.class3】
生成的模板如下：

  <el-container class="class1">
    <div class="class2">
      <table class="class3"></table>
    </div>
  </el-container>

5.3 指定id：【el-container#id1>div#id2>table#id3】

生成的模板如下：

  <el-container id="id1">
    <div id="id2">
      <table id="id3"></table>
    </div>
  </el-container>

5.4 同时指定class和id

例：

el-container.class1#id1>div.class2#id2>table.class3#id3

生成的模板如下：

  <el-container class="class1" id="id1">
    <div class="class2" id="id2">
      <table class="class3" id="id3"></table>
    </div>
  </el-container>

5.5 上级元素：【^】

例：

div#id1>div#id2>div#id3^div#id4

生成的模板如下：
注：【^】使得id4的层级和它的上层元素id2相同

  <div id="id1">
    <div id="id2">
      <div id="id3"></div>
    </div>
    <div id="id4"></div>
  </div>

6 自增长：【$】

例：

div>div>ul>li*3>img[src=./imgs/0$.jpg][alt={img 0$}]

生成的模板如下：

  <div>
    <div>
      <ul>
        <li><img src="./imgs/01.jpg" alt={img 01}></li>
        <li><img src="./imgs/02.jpg" alt={img 02}></li>
        <li><img src="./imgs/03.jpg" alt={img 03}></li>
      </ul>
    </div>
  </div>

7.导入外部css：【link:css】

生成的模板如下：

<link rel="stylesheet" href="style.css">

8.导入外部js：【script:src】

生成的模板如下：

<script src=""></script>

9.随机文本的输入：【Lorem】

Lorem：自动输入1行随机文本(默认30个单词)。
Lorem10：自动输入1行随机文本(10个单词)。
Lorem*5：自动输入5行随机文本(每行默认30个单词)。
Lorem2*5：自动输入5行随机文本(每行默认2个单词)。

posted @ 2024-02-25 18:58  DawnTraveler  阅读(269)  评论(0)  编辑  收藏  举报