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

玄子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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/47977.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安卓修改SwitchCompat色值

安卓修改SwitchCompat色值

SwitchCompat控件色值跟系统设置的主题有关&#xff0c;但是主题效果不是能轻易就能改的&#xff0c;因为涉及到整个APP的样式。网上方案基本都是通过修改style文件来改变色值&#xff0c;经过多次尝试修改最终觉得单独修改控件色值比较好。 一、控件属性 //修改开关色值就是最…
阅读更多...
面试之快速学习STL-multimap

面试之快速学习STL-multimap

multimap multimap 容器也用于存储 pair<const K, T> 类型的键值对&#xff08;其中 K 表示键的类型&#xff0c;T 表示值的类型&#xff09;其中各个键值对的键不能做修改&#xff1b;该容器也会自行根据键的大小对存储的所有键值对做排序操作。和 map 容器的区别在于&…
阅读更多...
Linux相关知识点

Linux相关知识点

Linux是什么&#xff1f; Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。 Linux内核 是一个Linux系统的内核&…
阅读更多...
【JUC】线程池ThreadPoolTaskExecutor与面试题解读

【JUC】线程池ThreadPoolTaskExecutor与面试题解读

1、ThreadPoolTaskExecutor 创建线程池 从它的创建和使用说起&#xff0c;创建和使用的代码如下&#xff1a; 创建&#xff1a; ThreadPoolTaskExecutor executor new ThreadPoolTaskExecutor();executor.setCorePoolSize(corePoolSize);executor.setMaxPoolSize(maxPoolSize…
阅读更多...
Python web实战之细说Django的集成测试

Python web实战之细说Django的集成测试

关键词&#xff1a; Python Web开发、Django、集成测试、实战、测试驱动开发、自动化测试、Selenium、测试框架、测试用例、代码覆盖率、持续集成 今天给大家分享一下Python Web开发——Django的集成测试&#xff0c;如何利用集成测试来提高代码质量、减少bug。 1. 什么是集成…
阅读更多...
Apache Zookeeper架构和选举机制

Apache Zookeeper架构和选举机制

ZooKeeper是一个开源的分布式协调服务，旨在解决分布式系统中的一致性、配置管理、领导者选举等问题。它由Apache软件基金会维护，是Hadoop生态系统的一部分，被广泛用于构建高可用、可靠和具有一致性的分布式应用程序和服务。 ZooKeeper提供了一个层次化的命名空间，类似于文…
阅读更多...
Java之继承详解二

Java之继承详解二

3.7 方法重写 3.7.1 概念 方法重写 &#xff1a;子类中出现与父类一模一样的方法时&#xff08;返回值类型&#xff0c;方法名和参数列表都相同&#xff09;&#xff0c;会出现覆盖效果&#xff0c;也称为重写或者复写。声明不变&#xff0c;重新实现。 3.7.2 使用场景与案例…
阅读更多...
Spring复习：（55）ApplicationContext中BeanFactoryPostProcessor是怎么添加到容器的？

Spring复习：（55）ApplicationContext中BeanFactoryPostProcessor是怎么添加到容器的？

容器创建时会调用AbstractApplicationContext的refresh方法&#xff0c;其中会调用invokeBeanFactoryPostProcessor方法&#xff0c;如下图 invokeBeanFactoryPostProcessors代码如下&#xff1a; 其中调用的PostProcessorRegistrationDelegate的invokeBeanFactoryPostProcess…
阅读更多...
计算机竞赛 交通目标检测-行人车辆检测流量计数 - 计算机竞赛

计算机竞赛 交通目标检测-行人车辆检测流量计数 - 计算机竞赛

文章目录 0 前言1\. 目标检测概况1.1 什么是目标检测&#xff1f;1.2 发展阶段 2\. 行人检测2.1 行人检测简介2.2 行人检测技术难点2.3 行人检测实现效果2.4 关键代码-训练过程 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计…
阅读更多...
vue组件注册

vue组件注册

组件注册分为全局注册和局部注册 全局注册 在 main.js 或者入口文件中 import { createApp } from vue; import MyComponent from ./components/MyComponent.vue;const app createApp();app.component(my-component, MyComponent);app.mount(#app); 我们首先通过createApp…
阅读更多...
转圈游戏 （Day1 T1）

转圈游戏 （Day1 T1）

全国 2013 NOIP 提高组试题 题目描述 Description n个小伙伴&#xff08;编号从0到n-1&#xff09;围坐一圈玩游戏。按照顺时针方向给n个位置编号&#xff0c;从0到n-1。最初&#xff0c;从0号小伙伴在第0号位置&#xff0c;第1号小伙伴在第1号位置&#xff0c;…&#xff0c…
阅读更多...
【Flutter】Flutter 使用 font_awesome_flutter 展示图标

【Flutter】Flutter 使用 font_awesome_flutter 展示图标

【Flutter】Flutter 使用 font_awesome_flutter 展示图标 文章目录 一、前言二、安装和基本使用1. 安装2. 基本使用示例3. 图标的命名和样式 三、自定义图标和高级功能1.动态检索图标2.排除样式和优化 四、完整示例五、总结 一、前言 在现代移动应用开发中&#xff0c;图标起着…
阅读更多...
C语言入门 Day_8数据与运算小结

C语言入门 Day_8数据与运算小结

目录 前言 1.精度 2.运算 2.易错点 3.思维导图 前言 到目前为止我们一共学习了四种数据类型&#xff0c;他们分别是表示整数的整型&#xff1b;表示小数的浮点型&#xff1b;表示字符的字符型&#xff1b;和表示布尔数的布尔型。 表示整数的整型&#xff0c;它的变量类型名…
阅读更多...
浅谈泛在电力物联网在电力设备状态在线监测中的应用

浅谈泛在电力物联网在电力设备状态在线监测中的应用

安科瑞 华楠 摘要&#xff1a;随着信息化水平的不断发展&#xff0c;泛在电力物联网的建设提上日程&#xff0c;这对提升变电站电力设备在线监测水平&#xff0c;推动智能电网发展具有重要的指导意义。对基于物联网的电力设备状态监测系统进行了研究&#xff0c;概括了泛在电力…
阅读更多...
Android TV开发之VerticalGridView

Android TV开发之VerticalGridView

Android TV应用开发和手机应用开发是一样的&#xff0c;只是多了焦点控制&#xff0c;即选中变色。 androidx.leanback.widget.VerticalGridView 继承 BaseGridView &#xff0c; BaseGridView 继承 RecyclerView 。 所以 VerticalGridView 就是 RecyclerView &#xff0c;使…
阅读更多...
Redis高可用：哨兵机制（Redis Sentinel）详解

Redis高可用：哨兵机制（Redis Sentinel）详解

目录 1.什么是哨兵机制&#xff08;Redis Sentinel&#xff09; 2.哨兵机制基本流程 3.哨兵获取主从服务器信息 4.多个哨兵进行通信 5.主观下线和客观下线 6.哨兵集群的选举 7.新主库的选出 8.故障的转移 9.基于pub/sub机制的客户端事件通知 1.什么是哨兵机制&#xf…
阅读更多...
重生之我要学C++第六天(const,static,友元)

重生之我要学C++第六天(const,static,友元)

这篇文章的主要内容是const以及权限问题、static关键字、友元函数和友元类&#xff0c;希望对大家有所帮助&#xff0c;点赞收藏评论支持一下吧&#xff01; 更多优质内容跳转&#xff1a; 专栏&#xff1a;重生之C启程(文章平均质量分93) 目录 const以及权限问题 1.const修饰…
阅读更多...
【计算机网络】【常考问题总结】

【计算机网络】【常考问题总结】

1. ping 127.0.0.1 后会发生什么&#xff1f; ping 127.0.0.1 &#xff1b;ping 0.0.0.0 &#xff1b; ping localhost 面试官问&#xff1a;断网了&#xff0c;还能ping通 127.0.0.1 吗&#xff1f;为什么&#xff1f;_kevin_tech的博客-CSDN博客 2. MTU&#xff0c;MMU是…
阅读更多...
新书上市----Pytest企业级应用实战 新书上市

新书上市----Pytest企业级应用实战 新书上市

【原文链接】新书上市----Pytest企业级应用实战 新书上市 《Pytest企业级应用实战》 京东购书链接 当当购书链接 天猫购书链接 作者简介 本书作者本硕毕业于哈尔滨工业大学&#xff0c;曾先后就职于中兴通讯和华为&#xff0c;现任职于中科南京软件技术研究院&#xff0c;…
阅读更多...
（三）行为型模式：3、解释器模式（Interpreter Pattern）（C++示例）

（三）行为型模式：3、解释器模式（Interpreter Pattern）（C++示例）

目录 1、解释器模式&#xff08;Interpreter Pattern&#xff09;含义 2、解释器模式的UML图学习 3、解释器模式的应用场景 4、解释器模式的优缺点 5、C实现解释器模式的实例 1、解释器模式&#xff08;Interpreter Pattern&#xff09;含义 解释器模式&#xff08;Interp…
阅读更多...
最新文章

Copyright @ 2022~2023