VS Code 中 Emmet的使用

最新推荐文章于 2024-08-03 22:59:28 发布

qq_46187765

最新推荐文章于 2024-08-03 22:59:28 发布

阅读量292

点赞数 5

分类专栏：前端基础文章标签： vscode

本文链接：https://blog.csdn.net/qq_46187765/article/details/140827906

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

VSCode中自带插件Emmet的用法

Emmet 是一个强大的工具，集成在 Visual Studio Code (VSCode) 中，可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法：

使用Emmet编写html代码

输入 ! 然后按 Tab 或 Enter 键，可以生成一个基本的 HTML 模板：

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

语法介绍：

子代操作符： >

    <!-- 编辑器中输入 -->
    div>p>span
    <!-- 回车或者tab生成  -->
    <div>
      <p><span></span></p>
    </div>

兄弟操作符： +

    <!-- 编辑器中输入 -->
    div>ul+ol
    <!-- 回车或者tab生成  -->
    <div>
      <ul></ul>
      <ol></ol>
    </div>

乘法操作符： *

    <!-- 编辑器中输入 -->
    ul>li*5
    <!-- 回车或者tab生成  -->
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>

属性操作符（id选择器、类选择器）：#/.

   <!-- 编辑器中输入 -->
    div.container>div.header+div.main.content+div.footer
    <!-- 回车或者tab生成  -->
    <div class="container">
      <div class="header"></div>
      <div class="main content"></div>
      <div class="footer"></div>
    </div>

定制属性 : []

    <!-- 编辑器中输入 -->
    img[scr='./load.jpg' data-src='./real.jpg']
    <!-- 回车或者tab生成  -->
   <img src="" alt="" scr="./load.jpg" data-src="./real.jpg">

数值计算操作符： $

$类似于一个自动累加计算的数值的占位符。默认从1累加，如果想倒着排可以在$操作符后面加上 @-，如果想从指定的数开始，可以在$操作符后面加上@N

    <!-- 编辑器中输入 -->
    div>ul*li.item-$*5
    <!-- 回车或者tab生成  -->
    <div>
      <ul></ul>
      <li class="item-1"></li>
      <li class="item-2"></li>
      <li class="item-3"></li>
      <li class="item-4"></li>
      <li class="item-5"></li>
    </div>

文本操作符：{}

    <!-- 编辑器中输入 -->
    p{this is a paragraph}
    <!-- 回车或者tab生成  -->
    <p>this is a paragraph</p>

更多语法可以查看官方文档： Cheat Sheet

qq_46187765

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
VS Code 中 Emmet的使用

- 编辑器中输入 -->div>p>span-- 回车或者tab生成 --><div></div>
复制链接

扫一扫

专栏目录