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

Emmet常用语法总结

Emmet常用语法总结

  • 子元素:>
  • 兄弟元素:+
  • 上级元素:^
  • 倍数:*
  • 分组:()
  • 属性:[]
  • id和类:# .
  • 迭代数字:$
  • 文本内容:{}
  • 注意事项

Emmet是许多流行文本编辑器的插件,极大地改进了HTML和CSS工作流程。
想必大家一定听过Zen Coding(Sergey Chikuyonok开发),后面才更名为Emmet。
使用过Sublime Text 的也一定使用过这个语法,非法简单易用。
官网地址:https://www.emmet.io/

在这里插入图片描述
在这里插入图片描述

子元素:>

div>ul>li 然后tab键,就会出来下面代码:

<div><ul><li></li></ul>
</div>

兄弟元素:+

div+p+bq 然后tab键,就会出来下面代码:

<div></div>
<p></p>
<blockquote></blockquote>

上级元素:^

div+div>p>span+em^bq 然后tab键,就会出来下面代码:

<div></div>
<div><p><span></span><em></em></p><blockquote></blockquote>
</div>

倍数:*

ul>li*5 然后tab键,就会出来下面代码:

<ul><li></li><li></li><li></li><li></li><li></li>
</ul>

分组:()

div>(header>ul>li*2>a)+footer>p 然后tab键,就会出来下面代码:

<div><header><ul><li><a href=""></a></li><li><a href=""></a></li></ul></header><footer><p></p></footer>
</div>

属性:[]

td[title="Hello world!" colspan=3] 然后tab键,就会出来下面代码:

<td title="Hello world!" colspan="3"></td>

id和类:# .

div#header+div.page+div#footer.class1.class2.class3 然后tab键,就会出来下面代码:

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

迭代数字:$

ul>li.item$*5 然后tab键,就会出来下面代码:

<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li>
</ul>

ul>li.item$$$*5

<ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li>
</ul>

ul>li.item$@3*5

<ul><li class="item3"></li><li class="item4"></li><li class="item5"></li><li class="item6"></li><li class="item7"></li>
</ul>

ul>li.item$@-3*5

<ul><li class="item7"></li><li class="item6"></li><li class="item5"></li><li class="item4"></li><li class="item3"></li>
</ul>

文本内容:{}

p>{Click }+a{here}+{ to continue} 然后tab键,就会出来下面代码:

<p>Click <a href="">here</a> to continue</p>

注意事项

所有上面的符号之间不能有空格!!!!
比如下面的,你之间带上了空格就只能解析最后一个字符了。
(header > ul.nav > li*5) + footer

相关文章:

Emmet常用语法总结

Emmet常用语法总结 子元素&#xff1a;>兄弟元素&#xff1a;上级元素&#xff1a;^倍数&#xff1a;*分组&#xff1a;&#xff08;&#xff09;属性&#xff1a;[]id和类&#xff1a;# .迭代数字&#xff1a;$文本内容&#xff1a;{}注意事项 Emmet是许多流行文本编辑器的…...

Android 12系统源码_页面管理(四)获取系统当前最上层的Activity信息

前言 很多应用开发人员&#xff0c;在日常开发过程中&#xff0c;经常会遇到一些需求&#xff0c;例如需要知道当前最上层的Activity是哪个&#xff0c;并结合这个Activity的名称来完成一些特定场景的需求。最简单的方法&#xff0c;是在创建Activity的时候将该Actvity存储到一…...

RK3588开发板Ubuntu与开发板使用U盘互传

1 将 U 盘(U 盘的格式必须为 FAT32 格式&#xff0c;大小在 32G 以下)插到开发板的 usb 接口&#xff0c;串口打印信息如下所示&#xff0c;U 盘的设备节点是/dev/sdb4。U 盘的设备节点不是固定的&#xff0c;根据实际情况来查看设备节点。 2 输入以下命令挂载 U 盘&#xff0c…...

【BUG】golang gorm导入数据库报错 “unexpected type clause.Expr“

帮同事排查一个gorm导入数据报错的问题 事发现场 ck sql CREATE TABLE ods_api.t_sms_jg_msg_callback_dis (app_key String DEFAULT COMMENT 应用标识,callback_type Int32 DEFAULT 0 COMMENT 0送达&#xff0c;1回执,channel Int32 DEFAULT 0 COMMENT uid下发的渠道,mode…...

TCP/IP网络模型

大家好我是苏麟 , 今天聊聊TCP/IP四层网络模型 . 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) 应用层 最上层的&#xff0c;也是我们能直接接触到的就是应用层&#xff08;Application Layer&#xff09;&#xff0c;我们电脑或手机使用的应用软件都…...

github连不上

github连不上 错误提示解决方案steam 采用Hosts加速 错误提示 fatal: unable to access ‘https://github.com/Ada-design/qianduan.git/’: Failed to connect to github.com port 443 after 21073 ms: Couldn’t connect to server 解决方案 下载steam https://steampp.ne…...

Excel计算表达式的值

Excel如何求解表达式 其中第三种方法最简单&#xff0c;通过剪贴板实现 如&#xff0c;单元格A1中输入了 12345 然后在A2输入 “”&A1 然后复制A2&#xff0c;打开剪贴板&#xff0c;点击刚才复制的内容&#xff0c;就会在A2显示计算结果...

26元/月起!腾讯云一键自动搭建4核16G幻兽帕鲁服务器

腾讯云无需任何配置自动搭建幻兽帕鲁游戏联机服务器&#xff0c;游戏24小时在线&#xff0c;4核16G游戏联机服务器低至26元/月起&#xff0c;新手小白也能一键搭建属于自己的幻兽帕鲁游戏联机服务器&#xff01; 第一步&#xff1a;购买游戏联机服务器 购买入口&#xff1a;htt…...

【C++游戏开发-01】推箱子

C游戏开发 文章目录 C游戏开发[TOC](文章目录) 前言一、逻辑分析1.1地图实现1.2人物的移动1.2.1小人移动1.2.2其他移动 1.3墙壁的碰撞1.4箱子的推动1.4.1什么时候推箱子1.4.2什么情况可以推箱子 1.5胜利的判断1.6卡关的处理1.7关卡的切换 二、DEMO代码2.1游戏框架2.2各功能函数…...

【lesson26】学习MySQL事务前的基础知识

文章目录 CURD不加控制&#xff0c;会有什么问题&#xff1f;CURD满足什么属性&#xff0c;能解决上述问题&#xff1f;什么是事务&#xff1f;为什么会出现事务事务的版本支持 CURD不加控制&#xff0c;会有什么问题&#xff1f; CURD满足什么属性&#xff0c;能解决上述问题&…...

持续积累分享金融知识

持续积累分享金融知识 一、什么是两融余额&#xff1f;二、什么是量化&#xff1f;三、散户可以进行量化投资么&#xff1f; 一、什么是两融余额&#xff1f; 两融余额是指投资者在融资买入和融券卖出交易中&#xff0c;通过向券商借入资金或证券进行交易&#xff0c;并且在交…...

网络协议 UDP协议

网络协议 UDP协议 在之前的文章中有对UDP协议套接字的使用进行讲解&#xff0c;本文主要对UDP协议进行一些理论补充。 文章目录 网络协议 UDP协议1. 概念2. UDP协议格式2.1 数据报长度2.2 校验和/检验和2.2.1 CRC校验2.2.2 MD5算法 1. 概念 UDP&#xff0c;即User Datagram P…...

爬虫笔记(三):实战qq登录

咳咳&#xff0c;再这样下去会进橘子叭hhhhhh 以及&#xff0c;这个我觉得大概率是成功的&#xff0c;因为测试了太多次&#xff0c;登录并且验证之后&#xff0c;qq提醒我要我修改密码才可以登录捏QAQ 1. selenium 有关selenium具体是啥&#xff0c;这里就不再赘述了&#x…...

又涨又跌 近期现货黄金价格波动怎么看?

踏入2024年一月的下旬&#xff0c;现货黄金价格可以说没了之前火热的状态&#xff0c;盘面上是又涨又跌。面对这样的行情&#xff0c;很多投资者不知道如何看了。下面我们就来讨论一下怎么把握近期的行情。 先区分走势类型。在现货黄金市场中有两种主要的走势类型&#xff0c;一…...

软件压力测试:探究其目的与重要性

随着软件应用在各行各业中的广泛应用&#xff0c;确保软件在高负载和极端条件下的稳定性变得至关重要。软件压力测试是一种验证系统在不同负载条件下的性能和稳定性的方法。本文将介绍软件压力测试的目的以及为什么它对软件开发和部署过程至关重要。 验证系统性能的极限&#x…...

Android.bp入门指南之浅析Android.bp文件

文章目录 Android.bp文件是什么&#xff1f;Android.bp的主要作用模块定义依赖关系构建规则模块属性插件支持模块的可配置性 为什么会引入Android.bp语法例子 Android.bp文件是什么&#xff1f; Android.bp 文件是 Android 构建系统&#xff08;Android Build System&#xff…...

2024年美赛 (D题ICM)| 湖流网络水位控制 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看美赛的D题&#xff01; 完整内容可以在文章末尾领…...

安卓网格布局GridLayout

<?xml version"1.0" encoding"utf-8"?> <GridLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layout_width"match_parent"android:la…...

DHCP简介

定义 动态主机配置协议DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种用于集中对用户IP地址进行动态管理和配置的技术。即使规模较小的网络&#xff0c;通过DHCP也可以使后续增加网络设备变得简单快捷。 DHCP是在BOOTP&#xff08;BOOTstrap Protoc…...

Hadoop生态系统中一些关键组件的详细解析

1. Hadoop核心组件 HDFS&#xff08;Hadoop Distributed File System&#xff09;: 分布式文件存储系统。提供高吞吐量的数据访问&#xff0c;非常适合用于大规模数据集。有高容错性&#xff0c;通过在多个节点间复制数据块来实现。 MapReduce: 一种编程模型&#xff0c;用于在…...

干农活总腰疼?农民朋友别再硬扛腰突

经常弯腰种地、扛重物、干农活&#xff0c;很多农民朋友常年腰疼&#xff0c;总觉得累点正常&#xff0c;咬牙硬扛。 殊不知慢慢发展成腰间盘突出&#xff0c;坐骨神经疼、腿麻无力&#xff0c;后期连农活都干不了。乱贴偏方、盲目正骨&#xff0c;还容易加重病情。我院 30 多年…...

Phi-4-mini-reasoning保姆级教学:Windows WSL2环境部署全流程

Phi-4-mini-reasoning保姆级教学&#xff1a;Windows WSL2环境部署全流程 1. 模型介绍 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个模型主打"小参数、强推理、长上下文、低延迟"的…...

突破Windows与Android壁垒:APK-Installer重构跨平台应用安装体验

突破Windows与Android壁垒&#xff1a;APK-Installer重构跨平台应用安装体验 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在数字化生活中&#xff0c;两个场景常常困…...

3步打造智能家居音乐自由:给爱好者的开源方案详解

3步打造智能家居音乐自由&#xff1a;给爱好者的开源方案详解 【免费下载链接】xiaomusic 使用小爱音箱播放音乐&#xff0c;音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 在智能家居的日常使用中&#xff0c;许多用户都面临着…...

Claude Code助手对比:百川2-13B在代码生成与解释方面的能力展示

Claude Code助手对比&#xff1a;百川2-13B在代码生成与解释方面的能力展示 最近和几个做开发的朋友聊天&#xff0c;大家讨论最多的就是AI编程助手到底哪个更好用。Claude Code的名气确实很大&#xff0c;很多技术社区都在讨论它。不过&#xff0c;除了这些“明星”选手&…...

一天一个开源项目(第61篇):knowledge_graph - 把任意文本转成知识图谱

引言 “Convert any text to a graph of knowledge. Graph Retrieval Augmented Generation (GRAG) — a new and improved version of RAG.” 这是「一天一个开源项目」系列的第 61 篇文章。今天介绍的项目是 knowledge_graph&#xff08;GitHub&#xff09;。 想把文档、PDF…...

Matlab GUI计时器:自动更新的数字时钟与恢复/暂停功能的定时器对象实现

Matlab图形用户界面计时器&#xff1a;使用定时器对象自动更新的MatlabGUI&#xff0c;一个数字时钟&#xff0c;作为显示基本组件的快速演示&#xff0c;带有一个按钮&#xff0c;用于恢复/暂停执行更新 实验室配了新酶标仪孵箱但总有人&#xff08;比如同组摸鱼的小师妹顺便…...

Windows Cleaner终极攻略:系统优化与空间释放完整指南

Windows Cleaner终极攻略&#xff1a;系统优化与空间释放完整指南 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统设计的开…...

Ostrakon-VL像素终端实操:自定义扫描任务清单配置方法

Ostrakon-VL像素终端实操&#xff1a;自定义扫描任务清单配置方法 1. 像素特工终端介绍 Ostrakon-VL像素终端是一款专为零售与餐饮场景设计的智能扫描工具&#xff0c;采用独特的8-bit像素风格界面&#xff0c;将复杂的图像识别任务转化为直观有趣的"特工任务"。基…...

OpenClaw定时任务:千问3.5-9B实现每日自动化流程

OpenClaw定时任务&#xff1a;千问3.5-9B实现每日自动化流程 1. 为什么需要定时任务自动化 去年冬天的一个深夜&#xff0c;我正熬夜准备第二天的重要汇报材料&#xff0c;突然发现需要从三个不同平台导出数据并整理成统一格式。手动操作到凌晨两点时&#xff0c;我意识到这种…...