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

玄子Share - HTML Emmet 语法详细介绍

news 2025/7/11 15:51:26

玄子Share - HTML Emmet 语法详细介绍

以下Emmet语法 基于WebStorm 2023.2演示

Emmet 语法介绍

Emmet 是一种缩写语法，旨在简化 HTML 和 CSS 的编写。它基于 CSS 选择器的语法结构，通过输入特定的缩写，可以快速生成 HTML 结构。

Emmet 语法优点

  • 提高开发效率： Emmet 的主要目的之一是提高开发效率。通过输入简单的缩写，您可以快速生成复杂的 HTML 和 CSS 代码，而无需手动键入每个标签和属性。这极大地减少了重复劳动和时间浪费。
  • 减少错误和拼写问题： 手动键入 HTML 和 CSS 代码时，经常会出现拼写错误、遗漏标签或属性等问题。Emmet 的自动补全功能可以减少这些错误，因为它根据缩写生成代码，不容易出现拼写错误。
  • 简洁的语法： Emmet 的语法非常简洁明了。通过使用简短的符号和缩写，您可以表示复杂的结构，这使得代码更易于阅读和管理。
  • 嵌套和结构更清晰： Emmet 支持嵌套结构，使得在 HTML 和 CSS 中创建嵌套元素和布局更加直观。这可以帮助您更清晰地组织代码，减少代码混乱的可能性。
  • 与编辑器无缝集成**：** Emmet 集成到许多流行的代码编辑器中，如 Visual Studio Code、Sublime Text、Atom 等。这意味着您可以在编辑器中直接使用 Emmet 缩写，并且很多编辑器还支持自定义 Emmet 扩展。
  • 功能丰富： Emmet 支持许多高级功能，如层级选择器、重复生成、数学表达式等。这些功能可以让您更灵活地生成代码，适应各种不同的开发需求。
  • 跨平台支持： 无论您是在 Windows、macOS 还是 Linux 上开发，Emmet 都提供跨平台支持，您可以在不同的操作系统上使用相同的缩写语法。

Emmet 基础语法

Emmet 编写的缩写通常是结合标签名、类名、ID、属性等信息，使用缩写后按下 Tab 键即可展开成完整的 HTML 或 CSS 代码。在您的编码工作中，掌握 Emmet 语法将会是一个非常实用的技能，它能够帮助您更快地编写出规范且高效的代码。

基础标签

<p></p>
<div></div>
<span></span>
<!-- * + Tab -->

输入对应标签名 + Tab补全标签，例如：div + Tab = <div></div>

属性标签

<a href=""></a>
<img src="" alt="">
<video src=""></video>
<audio src=""></audio>
<!-- * + Tab -->

输入对应标签名 + Tab补全标签，此类标签会生成必要属性，例如a标签的href属性

表单标签

<input type="button" value="">
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">
<input type="file" name="" id="">
<input type="text" name="" id="">
<input type="password" name="" id="">
<input type="color" name="" id="">
<input type="image" src="" alt="">
<input type="range" name="" id="">
<input type="search" name="" id="">
<input type="date" name="" id="">
<input type="month" name="" id="">
<input type="datetime" name="" id="">
<input type="datetime-local" name="" id="">
<!-- input:data + Tab -->

大多表单标签生成语法均为input: + 表单类型 + Tab，例如input:date + Tab = <input type="date" name="" id="">

<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id=""></select>
<!-- textarea + Tab -->

表单中的特殊标签，例如textarea与select标签等，Emmet语法与属性标签使用方法一致

textarea标签的必要属性会填充默认值

类名与 ID

Emmet 语法中，可以使用 . 符号来表示类名，使用 # 符号来表示 ID。

<div class="root"></div>
<!-- div.root + Tab -->
<span class="content"></span>
<!-- span.content + Tab -->
<img src="" alt="" class="logo">
<!-- img.logo + Tab -->
<header id="header"></header>
<!-- header#header + Tab -->
<nav id="navigate"></nav>
<!-- nav#navigate + Tab -->

输入对应标签名.class + Tab或标签名#id + Tab补全对应标签加class或id属性

直接写.class 或 #id默认生成div标签

标签文本

<div>这是一个 div</div>
<!-- div{这是一个 div} + Tab -->

输入对应标签名{text} + Tab，生成对应标签加text文本内容

标签属性

<a href="https://www.xuanzishare.com" target="_blank"></a>
<!-- a[href="https://www.xuanzishare.com"][target="_blank"] + Tab -->

输入对应标签名[属性名="属性值"] + Tab生成对应标签加对应属性，多对属性使用[ ]连续拼接

批量生成

在日常开发中一个ul 或 ol标签通常会附带多个li子标签，或多div子级嵌套都会出现多个重复的标签

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- li*5 + Tab -->

输入对应标签名*count + Tab，生成count个对应标签

编号排序

<li>1</li>
<li>2</li>
<li>3</li>
<!-- li{$}*3 + Tab -->

<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<!-- li{$@2}*5 + Tab-->

输入对应标签名{$}*count + Tab，生成count个对应标签，且文本自动填充编号，编号数量与count一致

使用@可修改起始编号

嵌套结构

Emmet 支持快速嵌套结构，可以使用>或+与^来实现。

<div><ul><li></li><li></li><li></li></ul>
</div>
<!-- div>ul>li*3 + Tab -->

输入对应标签名 > 子标签名 + Tab，生成指定标签的嵌套结构

<div></div>
<img src="" alt="">
<p></p>
<!-- div+img+p -->

输入对应标签名 + 兄弟标签名 + Tab，生成指定标签的同级结构

<div><p></p><img src="" alt="">
</div>
<div></div>
<!-- div>p+img^div + Tab -->

输入对应父级标签名 > 子级标签名 ^ 父级同级标签名 + Tab，生成指定父级标签的子级标签再返回父级标签生成父级的同级标签

页面结构

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body></body>
</html>

输入对应! + Tab，生成 HTML 基础页面结构

Emmet 高级语法

Emmet 语法在 CSS 中同样可以带来高效的编码体验。

生成选择器

使用 Emmet 可以快速生成选择器，避免手动键入重复的类名或标签名。

  • 输入 .class，会生成一个类选择器：.class {}
  • 输入 #id，会生成一个 ID 选择器：#id {}
  • 输入 div.container，会生成一个带标签和类名的选择器：div.container {}

生成属性

Emmet 也支持生成 CSS 属性，使您能够更快速地添加样式。

  • 输入 bgc:red，会生成 background-color: red;
  • 输入 fs:14px，会生成 font-size: 14px;
  • 输入 p:10px 20px，会生成 padding: 10px 20px;

生成边框圆角

Emmet 可以生成一些常见的属性，如边框、圆角、阴影等。

  • 输入 b:1px solid #ccc，会生成 border: 1px solid #ccc;
  • 输入 br:5px，会生成 border-radius: 5px;

生成伪类和伪元素

Emmet 支持生成伪类和伪元素。

  • 输入 h:hov，会生成 :hover {}
  • 输入 b:bef，会生成 ::before {}

生成属性值

Emmet 还可以在属性值中生成数值序列，适用于一些需要重复的属性值，如动画关键帧。

  • 输入 tr:0 100%，会生成 transform: translate(0, 100%);

生成属性值和自动补全

Emmet 支持生成属性值和自动补全，减少手动输入。

  • 输入 m:a，会生成 margin: auto;
  • 输入 d:f，会生成 display: flex;

这些示例展示了在 CSS 中使用 Emmet 的一些常见情况。Emmet 可以大大加速您编写 CSS 的速度，提高开发效率。它的语法简洁易懂，适用于各种样式的生成和快速编辑。

Emmet 实现场景

生成三行四列的表格加文本

table>tr*3>td{$}*4

<table><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>

生成指定数量的无序列表加文本

ol>li{$}*4

<ol><li>1</li><li>2</li><li>3</li><li>4</li>
</ol>

生成指定容器内多个同级元素加属性加文本

div.container>div.item${测试$}*8

<div class="container"><div class="item1">测试1</div><div class="item2">测试2</div><div class="item3">测试3</div><div class="item4">测试4</div><div class="item5">测试5</div><div class="item6">测试6</div><div class="item7">测试7</div><div class="item8">测试8</div>
</div>

玄子Share - HTML Emmet 语法详细介绍 8.19

相关文章：

玄子Share - HTML Emmet 语法详细介绍

玄子Share - HTML Emmet 语法详细介绍 以下Emmet语法 基于WebStorm 2023.2演示 Emmet 语法介绍 Emmet 是一种缩写语法&#xff0c;旨在简化 HTML 和 CSS 的编写。它基于 CSS 选择器的语法结构&#xff0c;通过输入特定的缩写&#xff0c;可以快速生成 HTML 结构。 Emmet 语法…...

编程日记 2023/8/22 23:08:39

Linux上安装和使用git到gitoschina和github上_亲测

Linux上安装和使用git到gitoschina和github上_亲测 git介绍与在linux上安装创建SSHkey在git-oschina使用maven-oschina使用在github使用maven-github使用组织与仓库 【git介绍与在linux上安装】 Git是一款免费、开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何…...

编程日记 2023/8/22 23:07:37

合宙Air724UG LuatOS-Air LVGL API--简介

为何是 LVGL LVGL 是一个开源的图形库&#xff0c;它提供了创建嵌入式 GUI 所需的一切&#xff0c;具有易于使用的图形元素、漂亮的视觉效果和低内存占用的特点。 LVGL特点&#xff1a; 强大的 控件 &#xff1a;按钮、图表、列表、滑动条、图像等 高级图形引擎&#xff1a;动…...

编程日记 2023/8/22 23:06:33

「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目

本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。 文章目录 一、准备工作&#xff1a;安装node.js二、项目搭建创建项目目录全局安装vue-cli使用Webpack初始化项目启动项目学会…...

编程日记 2023/8/22 23:05:31

7.5.tensorRT高级(2)-RAII接口模式下的生产者消费者多batch实现

目录 前言1. RAII接口模式封装生产者消费者2. 问答环节总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 高级-RAI…...

编程日记 2023/8/22 23:04:29

华为OD-最大括号深度

题目描述 一个合法的括号匹配序列有以下定义: 1、空串""是一个合法的括号匹配序列 2、如果"X"和"Y"都是合法的括号匹配序列,"XY"也是一个合法的括号匹配序列 3、如果"X"是一个合法的括号匹配序列,那么"(X)"也是一…...

编程日记 2023/8/22 23:03:28

【Leetcode】108. 将有序数组转换为二叉搜索树

一、题目 1、题目描述 给你一个整数数组 nums ，其中元素已经按 升序 排列，请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 示例1： 输入：nums = [-10,-3,0,5,9] 输出：[0,-3,9,-1…...

编程日记 2023/8/22 23:02:26

【树莓派打怪升级】：玩转个人Web世界！

文章目录 概述使用 Raspberry Pi Imager 安装 Raspberry Pi OS设置 Apache Web 服务器测试 web 站点安装静态样例站点 将web站点发布到公网安装 Cpolarcpolar进行token认证生成cpolar随机域名网址生成cpolar二级子域名将参数保存到cpolar配置文件中测试修改后配置文件配置cpola…...

编程日记 2023/8/22 23:01:25

mysql5.7在centos环境下的常见故障

1. GPG Keys升级导致安装失败 错误信息&#xff1a; The GPG keys listed for the "MySQL 5.7 Community Server" repository are already installed but they are not correct for this package. Check that the correct key URLs are configured for this reposi…...

编程日记 2023/8/22 23:00:23

hive中get_json_object函数不支持解析json中文key

问题 今天在 Hive 中 get_json_object 函数解析 json 串的时候&#xff0c;发现函数不支持解析 json 中文 key。 例如&#xff1a; select get_json_object({ "姓名":"张三" , "年龄":"18" }, $.姓名);我们希望的结果是得到姓名对应…...

编程日记 2023/8/22 22:59:19

Azure VM上意外禁用NIC如何还原恢复

创建一个windows虚拟机&#xff0c;并远程连接管理员的方式打开powershell 首先查看虚拟网卡&#xff0c;netsh interface show interface 然后禁用虚拟网卡 ,netsh interface set interface Ethernet disable 去Azure虚拟机控制台&#xff0c;打开串行控制台 控制台中键入cmd,…...

编程日记 2023/8/22 22:58:14

神经网络简单理解：机场登机

目录 神经网络简单理解&#xff1a;机场登机 ​编辑 激活函数&#xff1a;转为非线性问题 ​编辑 激活函数ReLU 通过神经元升维&#xff08;神经元数量&#xff09;&#xff1a;提升线性转化能力 通过增加隐藏层&#xff1a;增加非线性转化能力​编辑 模型越大&#xff0c;…...

编程日记 2023/8/22 22:57:13

Sping源码（七）— 后置处理器

简单回顾一下上一篇文章&#xff0c;是在BeanFacroty创建完之后&#xff0c;可以通过Editor和EditorRegistrar实现对类属性的自定义扩展&#xff0c;以及忽略要自动装配的Aware接口。 本篇帖子会顺着refresh()主流程方法接着向下执行。在讲invokeBeanFactoryPostProcessors方法…...

编程日记 2023/8/22 22:56:10

docker导出、导入镜像、提交

导出镜像到本地&#xff0c;然后可以通过压缩包的方式传输。 导出&#xff1a;docker image save 镜像名:版本号 > /home/quxiao/javatest.tgz 导入&#xff1a;docker image load -i /home/quxiao/javatest.tgz 删除镜像就得先删除容器&#xff0c;当你每运行一次镜像&…...

编程日记 2023/8/22 22:55:07

shell的变量

一、什么是变量 二、变量的命名 三、查看变量的值 env显示全局变量&#xff0c;刚刚定义的root_mess是局部变量 四、变量的定义 旧版本&#xff08;7、8四个文件都加载&#xff09;和新版本&#xff08;9只加载两个etc&#xff09;不一样&#xff0c;所以su - 现在要永久生效在…...

编程日记 2023/8/22 22:54:05

CentOS系统环境搭建（十三）——CentOS7安装nvm

centos系统环境搭建专栏&#x1f517;点击跳转 CentOS7.9安装nvm 文章目录 CentOS7.9安装nvm1.安装2.刷新系统环境3.查看所有node4.安装Node.js版本5.查看已安装版本号6.使用指定版本7.设置默认版本8.验证 在我们的日常开发中经常会遇到这种情况&#xff1a;手上有好几个项目&…...

编程日记 2023/8/22 22:53:04

uniapp评论列表插件获取

从评论列表&#xff0c;回复&#xff0c;点赞&#xff0c;删除&#xff0c;留言板 - DCloud 插件市场里导入&#xff0c;并使用。 代码样式优化及接入如下&#xff1a; <template><view class"hb-comment"><!-- 阅读数-start --><view v-if&q…...

编程日记 2023/8/22 22:52:02

3.redis数据结构之List

List-列表类型:L&R 列表类型&#xff1a;有序、可重复 Arraylist和linkedlist的区别 Arraylist是使用数组来存储数据&#xff0c;特点&#xff1a;查询快、增删慢 Linkedlist是使用双向链表存储数据&#xff0c;特点&#xff1a;增删快、查询慢&#xff0c;但是查询链表两端…...

编程日记 2023/8/22 22:51:01

安装使用MySQL8遇到的问题记录

1、root密码 启动运行后 /var/log/mysqld.log 存在默认密码 2023-08-21T15:58:17.469516Z 0 [System] [MY-013169] [Server] /usr/sbin/mysqld (mysqld 8.0.34) initializing of server in progress as process 61233 2023-08-21T15:58:17.478009Z 1 [System] [MY-013576] [I…...

编程日记 2023/8/22 22:49:59

Mysql、Oracle 中锁表问题解决办法

MySQL中锁表问题的解决方法&#xff1a; 1. 确定锁定表的原因&#xff1a; 首先&#xff0c;需要确定是什么原因导致了表的锁定。可能的原因包括长时间的事务、大量的并发查询、表维护操作等。 2. 查看锁定信息&#xff1a; 使用以下命令可以查看当前MySQL数据库中的锁定信…...

编程日记 2023/8/22 22:48:58

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/7/10 2:39:03

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/7/7 16:55:31

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/7/7 10:48:47

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/7 13:52:42

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/7/9 22:30:44

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/7/10 6:26:33

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/7/10 17:23:18

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/7/10 5:35:00

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/7/7 16:59:04

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/7/7 18:25:34