当前位置: 首页 > news >正文

Emmet 使用笔记小结

Emmet 使用笔记小结

最近在跟视频走 CSS 的教程,然后要写很多的 HTML 结构,就想着总结一下 Emmet 的语法。

Emmet 是一个工具可以用来加速 HTML 和 CSS 的开发过程,不过 emmet 只支持 HTML & XML 文件结构,所以我个人觉得对 CSS 的帮助不是特别大,VSCode 本身就有 CSS 的缩写支撑,用起来也挺方便的。

下面快捷键全都基于 VSCode。

基本语法

生成 HTML 框架

生成 HTML5 的基础框架用 !,就要一个 doctype 可以用超过一个,但是不多于三个 !

在这里插入图片描述

在这里插入图片描述

生成 tag

所有的 tag 都可以直接输入 tag 然后按 tab 生成,VSCode 也会对缩写进行提示,比如 section,可以打 section,也可以用 sect

在这里插入图片描述

一些比较特殊的缩写会赘一些常见的属性,比如说导入 JS 可以直接用 script:src,导入 CSS 可以用 link:cssinput 默认是 text,但也可以跟 :b 生成按钮,:tel 生成电话等,

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

生成带类名

class name 直接用 <tag name>. 即可,有个比较特殊的 tag 是 div,它可以直接通过 . 生成一个带空 class 的 div:

在这里插入图片描述

想要让同一个类生成多个 id,可以用 <tag-name>.<class name 1>.<class name 2> 的方法嵌套,比如说一些常见的 fontawesome 的 icon,会通过一个 class 控制形状,另一个控制 icon,这时候就可以用这个技巧:i.fa-solid.fa-house

生成带 id 的 tag

和类差不多,不过这里使用 #,如:i.fa-solid.fa-house#house-icon 会生成

在这里插入图片描述

id 具有唯一性,所以没什么必要 overload,就算是 overload,emmet 也只会用最后一个:

在这里插入图片描述

生成带属性的 tag

这个用 [],我个人用的比较多的是图片和 input,如 img[src="images/example"]:

在这里插入图片描述

或者 input:password[placeholder="Your Password"]:

在这里插入图片描述

attributes 这块不太好说,如果是 input 这种,直接用 input:p 生成 tab,然后到里面根据自动提示操作,减少 typo 的同时也少打一些字,从效率上来说我觉得反而会比 emmet 快。

数字占位符

$,如 img[src="images/exaple$"] 会生成 在这里插入图片描述

这个单用不好用,搭配下面的这个功能好用

生成多个同样的 tag

可以用 *<num> 来生成多个同样的 tag,这里搭配数占位符好用,比如说我有多个 list,每个 list 中的内容都一样,但是 list 的类名不一样:

li.list-$*10 生成

在这里插入图片描述

或是需要生成多个图片(slideshow)的时候:

img[src="img/slideshows/slideshow-$"]*6 生成

在这里插入图片描述

向 tag 中添加内容

这有两个,一个是 >,这会形成一个父子结构,后面说结构的时候会说,另一个是 {},这会直接向当前 tag 里面添加内容。如果是一个扁平化的结构,两者没什么太大区别,比较好用的就是前者可以直接加 lorem

p>lorem 会生成 在这里插入图片描述

p{lorem} 会生成 在这里插入图片描述

嵌套结构

这里讲点嵌套的事情

平级结构

使用 + 连接,如生成两个 input 这种:

input:t+input:email+input:submit 会生成

在这里插入图片描述

父子结构(向下)

使用 >,上面简单的提了一下,这里会形成一个父子结构,如:

ul>li>a>i.fa.fas-home 会生成:

在这里插入图片描述

父子结构(向上)

使用 ^,这里能够回到上一个节点:

` 会生成:

在这里插入图片描述

<ul><li><a href=""><i class="fa fas-home"></i></a><img src="" alt="" /></li>
</ul>

这个时候可以看到,emmet 对于行内结构的排版其实看起来不太方便

刚找到一个 | 说是可以实现这个功能,不过我在 VSCode 上试了一下,不支持。如果用其他的 ide/editor 可以试试看

节点分组

使用 (),这里将括号内的部分生成一个整体,如:

(li>a>i.fa)*10 会生成 在这里插入图片描述

这也是最近才看到的,之前都会不断回到上一层然后去实现,比起使用 grouping 麻烦好多。

总结

其实 emmet 对 inline 的结构设置的不太好(不会默认换行),所以有的时候用 a*n>i 的时候,再自动排版结构会不太舒服,不过总体来说比一个个 cv 方便很多……

顺便丢一个之前跟着教程时用的结构:

h1.section-heading{Teams}+.team-wrapper>.team-member*3>img.team-member-img[src="images/team-member-$.jpg"]+h2.team-member-name{Nick Smith}>span{ Designer}^ul.team-member-skills>li{Ps}+li{Figma}+li{HTML5}+li{CSS3}+li{Ai}^a.projects-btn[href="$"]+.story-btn[title="My Story"]>.story-btn-line^.story>h4.story-heading{About Me}+p.story-paragraph>lorem

在这里插入图片描述

在这里插入图片描述

大概是这样一个三重式的结构:

在这里插入图片描述

我觉得一个个 cv 太麻烦了,所以就用 emmet 写了……不过好像还是出了点问题(挠头)

现在想来,其实还是应该使用 () 进行 grouping 实现会方便不少。

所以不太推荐 emmet 写太长,除非你知道自己想要做什么。

相关文章:

Emmet 使用笔记小结

Emmet 使用笔记小结 最近在跟视频走 CSS 的教程&#xff0c;然后要写很多的 HTML 结构&#xff0c;就想着总结一下 Emmet 的语法。 Emmet 是一个工具可以用来加速 HTML 和 CSS 的开发过程&#xff0c;不过 emmet 只支持 HTML & XML 文件结构&#xff0c;所以我个人觉得对…...

如何使用Puppeteer进行新闻网站数据抓取和聚合

导语 Puppeteer是一个基于Node.js的库&#xff0c;它提供了一个高级的API来控制Chrome或Chromium浏览器。通过Puppeteer&#xff0c;我们可以实现各种自动化任务&#xff0c;如网页截图、PDF生成、表单填写、网络监控等。本文将介绍如何使用Puppeteer进行新闻网站数据抓取和聚…...

【LeetCode每日一题合集】2023.8.7-2023.8.13(动态规划分治)

文章目录 344. 反转字符串1749. 任意子数组和的绝对值的最大值&#xff08;最大子数组和&#xff09;1281. 整数的各位积和之差1289. 下降路径最小和 II解法1——动态规划 O ( n 3 ) O(n^3) O(n3)解法2——转移过程优化 O ( n 2 ) O(n^2) O(n2) ⭐ 1572. 矩阵对角线元素的和解法…...

微信小程序修改vant组件样式

1 背景 在使用vant组件开发微信小程序的时候&#xff0c;想更改vant组件内部样式&#xff0c;达到自己想要的目的&#xff08;van-grid组件改成宫格背景色为透明&#xff0c;默认为白色&#xff09;&#xff0c;官网没有示例&#xff0c;通过以下几步修改成功。 2 步骤 2.1 …...

yum 、rpm、yumdownloader、repotrack 学习笔记

1 Linux 包管理器概述 rpm的使用&#xff1a; rpm -ivh filename.rpm#这列出该packageName&#xff08;包名&#xff09;安装的所有文件列表。 rpm -ql packageName #查询已安装的该packageName的详细信息&#xff0c;包括版本、发布日期等。 rpm -qi packageName #列出该pac…...

python检测CPU占用、内存和磁盘剩余空间 脚本

python检测CPU占用、内存和磁盘剩余空间 脚本。后续将其加入到计划列表中即可 # codingutf-8 import time import psutil import osimport smtplibfrom email.mime.multipart import MIMEMultipart from email.mime.text import MIMEText # email 用于构建邮件内容 from email…...

量化策略:CTA,市场中性,指数增强

CTA 策略 commodity Trading Advisor Strategy&#xff0c;即“商品交易顾问策略”&#xff0c;也被称作管理期货策略。 期货T0&#xff0c;股票T1双向交易&#xff1a;就单向交易而言的&#xff0c;不仅能先买入再卖出&#xff08;做多&#xff09;&#xff0c;而且可以先卖…...

L1-051 打折(Python实现) 测试点全过

前言&#xff1a; {\color{Blue}前言&#xff1a;} 前言&#xff1a; 本系列题使用的是&#xff0c;“PTA中的团体程序设计天梯赛——练习集”的题库&#xff0c;难度有L1、L2、L3三个等级&#xff0c;分别对应团体程序设计天梯赛的三个难度。更新取决于题目的难度&#xff0c;…...

任意文件读取和漏洞复现

任意文件读取 1. 概述 一些网站的需求&#xff0c;可能会提供文件查看与下载的功能。如果对用户查看或下载的文件没有限制或者限制绕过&#xff0c;就可以查看或下载任意文件。这些文件可以是漂代码文件&#xff0c;配置文件&#xff0c;敏感文件等等。 任意文件读取会造成&…...

编译KArchive在windows10下

使用QT6和VS2019编译KArchive的简要步骤&#xff1a; 安装 Qt &#xff0c;我是用源码自己编译的 "F:\qtbuild"安装CMakefile并配置环境变量安装Git下载ECM源码 https://github.com/KDE/extra-cmake-modules.git-------------------------------------------------…...

【Python】批量下载页面资源

【背景】 有一些非常不错的资源网站,比如一些MP3资源网站。资源很丰富,但是每一个资源都不大,一个一个下载费时费力,想用Python快速实现可复用的批量下载程序。 【思路】 获得包含资源链接的静态页面,用beautifulsoup分析页面,获得所有MP3资源的实际地址,然后下载。…...

Windows NUMA编程实践 – 处理器组、组亲和性、处理器亲和性及版本变化

Windows在设计之初没有考虑过对大数量的多CPU和NUMA架构的设备的支持&#xff0c;大部分关于CPU的设计按照64个为上限来设计。核心数越来越多的多核处理器的进入市场使得微软不得不做较大的改动来进行支持&#xff0c;因此Windows 的进程、线程和NUMA API在各个版本中行为不一样…...

MATLAB中编译器中的变量联系到Simulink

MATLAB中编译器中的变量联系到Simulink 现在编译器中创建变量&#xff0c;进行编译&#xff0c;使其生成在工作区。 然后在Simulink中国使用变量即可。...

开展自动化方案时,需要考虑哪些内容,开展实施前需要做哪些准备呢?

在开展软件自动化测试方案时&#xff0c;需要考虑以下方面&#xff1a; 选择合适的自动化测试工具&#xff1a;根据项目的需求和技术栈选择适合的自动化测试工具&#xff0c;如Selenium、Appium、Jenkins等。确定自动化测试范围&#xff1a;明确需要自动化的功能模块和业务场景…...

进程、线程、内存管理

目录 进程和线程区别 进程和线程切换的区别 系统调用流程 系统调用是否会引起线程切换 为什么需要使用虚拟内存 进程和线程区别 本质区别&#xff1a; 进程是资源分配的基本单元。 线程是操作系统调度的基本单元。 地址空间&#xff1a; 进程具有独立的虚拟地址空间。 线程…...

设计模式系列-创建者模式

一、上篇回顾 上篇我们主要讲述了抽象工厂模式和工厂模式。并且分析了该模式的应用场景和一些优缺点&#xff0c;并且给出了一些实现的思路和方案,我们现在来回顾一下&#xff1a; 抽象工厂模式&#xff1a;一个工厂负责所有类型对象的创建&#xff0c;支持无缝的新增新的类型对…...

加工生产调度

题目描述 某工厂收到了 n 个产品的订单&#xff0c;这 n 个产品分别在 A、B 两个车间加工&#xff0c;并且必须先在 A 车间加工后才可以到 B 车间加工。 某个产品 在 A&#xff0c;B 两车间加工的时间分别为 。怎样安排这 n 个产品的加工顺序&#xff0c;才能使总的加工时间…...

Hadoop 集群小文件归档 HAR、小文件优化 Uber 模式

文章目录 小文件归档 HAR小文件优化 Uber 模式 小文件归档 HAR 小文件归档是指将大量小文件合并成较大的文件&#xff0c;从而减少存储开销、元数据管理的开销以及处理时的任务调度开销。 这里我们通过 Hadoop Archive (HAR) 来进行实现&#xff0c;它是一种归档格式&#xf…...

Android OkHttp源码阅读详解一

博主前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住也分享一下给大家 &#x1f449;点击跳转到教程 前言&#xff1a;源码阅读基于okhttp:3.10.0 Android中OkHttp源码阅读二(责任链模式) implementation com.squareup.o…...

UG\NX CAM二次开发 查询工序所在的方法组TAG UF_OPER_ask_method_group

文章作者:代工 来源网站:NX CAM二次开发专栏 简介: UG\NX CAM二次开发 查询工序所在的方法组TAG UF_OPER_ask_method_group 效果: 代码: void MyClass::do_it() { int count=0;tag_t * objects;UF_UI_ONT_ask_selected_nodes(&count, &objects);for (i…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...