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

VSCode安装使用与Emmet语法

程序员文章站 2022-03-07 19:45:36
...

一.VScode安装与常用插件

  1. 选择官网下载安装vscode编辑器
    https://code.visualstudio.com/
  2. 搜索下载需要的插件和主题
    效果如图：
    VSCode安装使用与Emmet语法
  3. 其他问题
  • 更改默认格式化程序，由Prettier-Code formatter格式化代码
    VSCode安装使用与Emmet语法
  • 解决vscode中emmet中对行内标签不换行的问题
    VSCode安装使用与Emmet语法

二.Emmet语法

1.快速生成html5文档结构

!+tab

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body></body>
    10. 

  10. </html>
    11.

2.id和class
#+id名称
#content

  1. <div id="content"></div>

.+class名称

.main

  1. <div class="main"></div>

3.层级
子元素用>
div>p>a

    

  1. <div>
    2. 

  2.       <p><a href=""></a></p>
    3. 

  3. </div>
    4.

兄弟元素用+
div+p+a

    

  1. <div></div>
    2. 

  2. <p></p>
    3. 

  3. <a href=""></a>
    4.

父级元素用^
div>p^a

    

  1. <div>
    2. 

  2. <p></p>
    3. 

  3. </div>
    4. 

  4. <a href=""></a>
    5.

4.重复*n

>ul>li*5>a

    

  1.     <ul>
    2. 

  2.       <li><a href=""></a></li>
    3. 

  3.       <li><a href=""></a></li>
    4. 

  4.       <li><a href=""></a></li>
    5. 

  5.       <li><a href=""></a></li>
    6. 

  6.       <li><a href=""></a></li>
    7. 

  7.     </ul>
    8.

5.序号

ul>li.item$*5>a{link$@6}

    

  1.     <ul>
    2. 

  2.       <li class="item1"><a href="">link6</a></li>
    3. 

  3.       <li class="item2"><a href="">link7</a></li>
    4. 

  4.       <li class="item3"><a href="">link8</a></li>
    5. 

  5.       <li class="item4"><a href="">link9</a></li>
    6. 

  6.       <li class="item5"><a href="">link10</a></li>
    7. 

  7.     </ul>
    8.

上一篇： CSS怎么设置table样式

下一篇： css怎么设置表格第一行颜色

推荐阅读