使用 Emmet 提升CSS编写效率的终极指南(基础篇)

使用Emmet语法提高HTML/CSS编写效率

Emmet 语法的前身是 Zen coding,它使用缩写来提高 html/css 编写速度,VSCode内部已经集成该语法。本内容准备分两篇基础篇和高级篇详细说明 Emmet 的使用。

生成单个标签

生成单个标签,直接输入标签名,按 tabenter 键即可。

生成多个相同标签

  • 生成多个相同标签,在标签后面加上 * 键,之后在加上标签个数即可

  • 标签、 * 、 标签个数,中间不可以添加空格

    js 复制代码
    div*3

生成父子层级关系的标签

  • 生成父子层级关系的标签,俩个标签中间可以用 > 键拼接。

  • 标签、 * 、 标签,中间不可以添加空格

    js 复制代码
    ul>li

生成兄弟层级关系的标签

  • 生成兄弟层级关系的标签,俩个标签中间可以用 + 键拼接。

  • 标签、 + 、 标签,中间不可以添加空格

    js 复制代码
    div+p

生成带有 class 的标签

  • 生成带有的 class 标签,在类名之前加上 . 键即可。

  • .和类名 ,中间不可以添加空格(默认是<div>标签)

    js 复制代码
    .banner
  • 如果给某标签生成带有类名的标签

    标签、. 、类名 ,中间不可以添加空格(设置<p>标签)

    js 复制代码
    p.banner

生成带有 id 的标签

  • 生成带有的 id 的标签,在 id值 之前加上 # 键即可。

  • #和id值 ,中间不可以添加空格(默认是<div>标签)

    js 复制代码
    #nav
  • 如果给某标签生成带有 id 的标签 标签、# 、id值 ,中间不可以添加空格(设置<p>标签)

    js 复制代码
    p#nav

生成自增顺序的标签

  • 生成自增顺序的标签,用 $ 键即可。

  • #或. 、类名或id值、 $、 * 、标签个数 ,中间不可以添加空格(默认是<div>标签)

    js 复制代码
    #demo$*5
  • 如果给某标签生成自增顺序 标签、#或. 、类名或id值、 $、 * 、标签个数 ,中间不可以添加空格(设置<p>标签)

    js 复制代码
    p#demo$*5

写在最后的话

在这篇基础篇中,我们介绍了 Emmet 语法的基本用法。通过简洁的缩写,Emmet 可以大幅提升 HTML/CSS 的编写效率。我们涵盖了生成单个标签、多标签、父子层级标签、兄弟层级标签、带有 class 和 id 的标签以及自增顺序标签的用法。这些技巧能让开发者在编写代码时更高效、快捷。

相关推荐
人工智能训练师2 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny072 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy3 小时前
css的基本知识
前端·css
昔人'3 小时前
css `lh`单位
前端·css
Nan_Shu_6145 小时前
Web前端面试题(2)
前端
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队6 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5207 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20507 小时前
LeaferJS好用的 Canvas 引擎
前端·开源