欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Visual Studio Code打印html标签快捷写法

程序员文章站 2022-02-14 11:18:47
...

使用Visual Studio Code打印html常用标签

  • #div打印出下列代码
    1. <div id="">box</div>
  • div[class]{box}打印出下列代码
    1. <div class="">box</div>
  • p.a打印出下列代码
    1. <p class="a"></p>
  • a[]{a标签}*3连续打印出3个a标签
    1. <a href="">a标签</a>
    2. <a href="">a标签</a>
    3. <a href="">a标签</a>
  • div>a+span打印如下代码
    1. <div>
    2. <a href=""></a>
    3. <span></span>
    4. </div>
  • div>a^p打印如下代码
    1. <div>
    2. <a href=""></a>
    3. </div>
    4. <p></p>
  • div>a+p打印如下代码
    1. <div>
    2. <a href=""></a>
    3. <p></p>
    4. </div>
  • []代表标签属性,{}标签内容,div.a小点代表属性class,后面的a代表类名,#代表id,^代表和第一个标签平级,+号代表添加+号前面一个平级标签,*号代表重复几个相同的标签,’$代表自动编号,可以有多个$$’。

  • 无序列表
  1. <nav>
  2. <ul>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. </ul
  7. </nav>

输出效果


  • 有序列表
    1. <nav>
    2. <ol>
    3. <li></li>
    4. <li></li>
    5. <li></li>
    6. </ol>
    7. </nav>
    输出效果
    1.网
    2.网
    3.网

  • 图片标签
    1. <img src="url.jpg" />

  • 表格标签
    1. <form>
    2. <table border="1">
    3. <tbody>
    4. <tr>
    5. <th>星期一</th>
    6. <th>星期二</th>
    7. <th>星期三</th>
    8. <th>星期四</th>
    9. <th>星期五</th>
    10. </tr>
    11. <tr>
    12. <td>语文</td>
    13. <td>数学</td>
    14. <td>语文</td>
    15. <td>数学</td>
    16. <td>语文</td>
    17. </tr>
    18. <tr>
    19. <td rowspan="2">数学</td>
    20. <td>语文</td>
    21. <td>数学</td>
    22. <td>语文</td>
    23. <td>数学</td>
    24. </tr>
    25. <tr>
    26. <td>数学</td>
    27. <td>语文</td>
    28. <td colspan="2">数学</td>
    29. </tr>
    30. </tbody>
    31. </table>
    32. </form>
星期一 星期二 星期三 星期四 星期五
语文 数学 语文 数学 语文
. 语文 数学 语文 数学
数学 语文 数学 语文 .

  • 内联框架跳转
    1. <iframe src="http://www.163.com" name="if" frameborder="0"> </iframe>
    2. <a href="http://www.qq.com" target="if">跳转iframe内联框架</a>