学习记录：Emmet 基本语法(二)

已于 2024-04-29 21:19:18 修改
阅读量788 收藏 9
点赞数 25
文章标签： 学习 前端 html vscode intellij-idea css
于 2024-04-29 19:30:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/di_213/article/details/138322956
版权

文章目录

一、本文概述

本文延续了学习记录：Emmet基本语法(一)，继续扩展了Emmet语法的知识，能力有限，若想了解更多Emmet语法，可参考以下网址：

二、Emmet 常用语法

1.1 自动生成 HTML 模板

! + Tab可以快速生成完整结构的 HTML 代码

效果如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

1.2 属性 []

tag1[属性] 表示在标签 tag1 内生成属性

代码如下：
div[name=syz age=18]

效果如下：

<div name="syz" age="18"></div>

1.3 id

使用 # 生成带有 id 名字的标签

代码如下：
div#header

效果如下：

<div id="header"></div>

1.4 class .

使用 . 生成带有类名的标签

代码如下：
div.page

效果如下：

<div class="page"></div>

1.5 文本内容 {}

在生成的标签内部写内容可以用{ }

代码如下：
div{这是一个片段}

效果如下：

<div>这是一个片段</div>

1.6 快速生成 CSS 样式语法

大部分属性直接输入属性名的简写形式即可

  • 同时设置宽高
    代码如下：
    w200+h200

    效果如下：

    width: 200px; height: 200px;

  • 设置行高
    代码如下：
    lh26px

    效果如下：

    line-height: 26px;

  • 设置背景色
    代码如下：
    bgc:#bababa

    效果如下：

    background-color: #bababa;

还有很多可以快速生成的属性：

  1. 输入fwb即可生成代码片段font-weight: bold；
  2. 输入m10即可生成代码片段 margin: 10px；
  3. 输入df即可生成代码片段display: flex；
  4. 输入jcc即可生成代码片段justify-content: center；
  5. 输入aic即可生成代码片段align-items: center；
  6. 输入poa即可生成代码片段position: absolute；
  7. 输入tac即可生成代码片段text-align: center；
    ……

根据上面的例子，其实可以发现规律，Emmet 中用首字母+具体值的形式生成 CSS 代码片段，这里就不全部列举了，读者可以在编辑器中自行尝试

1.7 隐式标签

  1. body下 div内部直接写.class或#class默认转换结果为<div id="class"></div>
  2. p h1~h5 a span p标签等文本标签内部写.class或#class默认转换结果为<span class="class"></span>
  3. ul 内部默认转换为 li
  4. table一级默认为tr二级默认为td

三、Emmet 官网

Emmet 缩写语法 官网速查表

Emmet 官网说明文档

四、语法及标签缩写详细方法

后代：>
缩写：nav>ul>li

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

兄弟：+
缩写：div+p+bq

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

上级：^
缩写：div+div>p>span+em^bq

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

缩写：div+div>p>span+em^^bq

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

分组：()
缩写：div>(header>ul>li*2>a)+footer>p

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

缩写：(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

乘法：*
缩写：ul>li*5

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

自增符号：$
缩写：ul>li.item$*5

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

缩写：h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>

缩写：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$@-*5

<ul>
    <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></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>

ID和类属性
缩写：#header

<div id="header"></div>

缩写：.title

<div class="title"></div>

缩写：form#search.wide

<form id="search" class="wide"></form>

缩写：p.class1.class2.class3

<p class="class1 class2 class3"></p>

自定义属性
缩写：p[title="Hello world"]

<p title="Hello world"></p>

缩写：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

缩写：[a='value1' b="value2"]

<div a="value1" b="value2"></div>

文本：{}
缩写：a{Click me}

<a href="">Click me</a>

缩写：p>{Click }+a{here}+{ to continue}

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

隐式标签
缩写：.class

<div class="class"></div>

缩写：em>.class

<em><span class="class"></span></em>

缩写：ul>.class

<ul>
    <li class="class"></li> </ul>

缩写：table>.row>.col

<table>
    <tr class="row"> <td class="col"></td> </tr> </table>

HTML
所有未知的缩写都会转换成标签，例如，foo → <foo></foo>

缩写：!

<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

缩写：a

<a href=""></a>

缩写：a:link

<a href="http://"></a>

缩写：a:mail

<a href="mailto:"></a>

缩写：abbr

<abbr title=""></abbr>

缩写：acronym

<acronym title=""></acronym>

缩写：base

<base href="" />

缩写：basefont

<basefont />

缩写：br

<br />

缩写：frame

<frame />

缩写：hr

<hr />

缩写：bdo

<bdo dir=""></bdo>

缩写：bdo:r

<bdo dir="rtl"></bdo>

缩写：bdo:l

<bdo dir="ltr"></bdo>

缩写：col

<col />

缩写：link

<link rel="stylesheet" href="" />

缩写：link:css

<link rel="stylesheet" href="style.css" />

缩写：link:print

<link rel="stylesheet" href="print.css" media="print" />

缩写：link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

缩写：link:touch

<link rel="apple-touch-icon" href="favicon.png" />

缩写：link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

缩写：link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" /> 
`
缩写：`meta`
```html
<meta />

缩写：meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

缩写：meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

缩写：meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

缩写：meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

缩写：style

<style></style>

缩写：script

<script></script>

缩写：script:src

<script src=""></script>

缩写：img

<img src="" alt="" />

缩写：iframe

<iframe src="" frameborder="0"></iframe>

缩写：embed

<embed src="" type="" />

缩写：object

<object data="" type=""></object>

缩写：param

<param name="" value="" />

缩写：map

<map name=""></map>

缩写：area

<area shape="" coords="" href="" alt="" />

缩写：area:d

<area shape="default" href="" alt="" />

缩写：area:c

<area shape="circle" coords="" href="" alt="" />

缩写：area:r

<area shape="rect" coords="" href="" alt="" />

缩写：area:p

<area shape="poly" coords="" href="" alt="" />

缩写：form

<form action=""></form>

缩写：form:get

<form action="" method="get"></form>

缩写：form:post

<form action="" method="post"></form>

缩写：label

<label for=""></label>

缩写：input

<input type="text" />

缩写：inp

<input type="text" name="" id="" />

缩写：input:hidden

别名：input[type=hidden name]

<input type="hidden" name="" />

缩写：input:h

别名：input:hidden

<input type="hidden" name="" />

缩写：input:text, input:t

别名：inp

<input type="text" name="" id="" />

缩写：input:search

别名：inp[type=search]

<input type="search" name="" id="" />

缩写：input:email

别名：inp[type=email]

<input type="email" name="" id="" />

缩写：input:url

别名：inp[type=url]

<input type="url" name="" id="" />

缩写：input:password

别名：inp[type=password]

<input type="password" name="" id="" />

缩写：input:p

别名：input:password

<input type="password" name="" id="" />

缩写：input:datetime

别名：inp[type=datetime]

<input type="datetime" name="" id="" />

缩写：input:date

别名：inp[type=date]

<input type="date" name="" id="" />

缩写：input:datetime-local

别名：inp[type=datetime-local]

<input type="datetime-local" name="" id="" />

缩写：input:month

别名：inp[type=month]

<input type="month" name="" id="" />

缩写：input:week

别名：inp[type=week]

<input type="week" name="" id="" />

缩写：input:time

别名：inp[type=time]

<input type="time" name="" id="" />

缩写：input:number

别名：inp[type=number]

<input type="number" name="" id="" />

缩写：input:color

别名：inp[type=color]

<input type="color" name="" id="" />

缩写：input:checkbox

别名：inp[type=checkbox]

<input type="checkbox" name="" id="" />

缩写：input:c

别名：input:checkbox

<input type="checkbox" name="" id="" />

缩写：input:radio

别名：inp[type=radio]

<input type="radio" name="" id="" />

缩写：input:r

别名：input:radio

<input type="radio" name="" id="" />

缩写：input:range

别名：inp[type=range]

<input type="range" name="" id="" />

缩写：input:file

别名：inp[type=file]

<input type="file" name="" id="" />

缩写：input:f

别名：input:file

<input type="file" name="" id="" />

缩写：input:submit

<input type="submit" value="" />

缩写：input:s

别名：input:submit

<input type="submit" value="" />

缩写：input:image

<input type="image" src="" alt="" />

缩写：input:i

别名：input:image

<input type="image" src="" alt="" />

缩写：input:button

<input type="button" value="" />

缩写：input:b

别名：input:button

<input type="button" value="" />

缩写：isindex

<isindex />

缩写：input:reset

别名：input:button[type=reset]

<input type="reset" value="" />

缩写：select

<select name="" id=""></select>

缩写：option

<option value=""></option>

缩写：textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

缩写：menu:context

别名：menu[type=context]>

<menu type="context"></menu>

缩写：menu:c

别名：menu:context

<menu type="context"></menu>

缩写：menu:toolbar

别名：menu[type=toolbar]>

<menu type="toolbar"></menu>

缩写：menu:t

别名：menu:toolbar

<menu type="toolbar"></menu>

缩写：video

<video src=""></video>

缩写：audio

<audio src=""></audio>

缩写：html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>

缩写：keygen

<keygen />

缩写：command

<command />

缩写：bq

别名：blockquote

<blockquote></blockquote>

缩写：acr

别名：acronym

<acronym title=""></acronym>

缩写：fig

别名：figure

<figure></figure>

缩写：figc

别名：figcaption

<figcaption></figcaption>

缩写：ifr

别名：iframe

<iframe src="" frameborder="0"></iframe>

缩写：emb

别名：embed

<embed src="" type="" />

缩写：obj

别名：object

<object data="" type=""></object>

缩写：src

别名：source

<source></source>

缩写：cap

别名：caption

<caption></caption>

缩写：colg

别名：colgroup

<colgroup></colgroup>

缩写：fst, fset

别名：fieldset

<fieldset></fieldset>

缩写：btn

别名：button

<button></button>

缩写：btn:b

别名：button[type=button]

<button type="button"></button>

缩写：btn:r

别名：button[type=reset]

<button type="reset"></button>

缩写：btn:s

别名：button[type=submit]

<button type="submit"></button>

五、总结

记录自己的学习过程，温故知新

迪 eat more
关注
CSS学习笔记3Emmet语法、复合选择器、元素显示模式
qwq_666的博客
04-15 213
Emmet语法 快速生成HTML结构语法 生成标签直接输入标签名按tab键即可，比如输入div然后按tab键，就可以生成了 若想生成多个相同的标签，加上*就可以了，比如 div * 3（别有空格）再按tab键就可以快速生成3个div了 若有父子级关系的标签，可以用> 比如 ul>li 若有兄弟关系的标签，用+ 比如 div+p 若生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了 p.one 按tab键后如下 <p class="one"></
Vscode的Emmet语法
一名不想学习的未来程序猿。
11-24 909
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。1. 快速生成HTML结构语法2. 快速生成CSS样式语法。
学习记录：Emmet 基本语法(一)
di_213的博客
04-26 872
学习记录：Emmet 基本语法(一) >; +; ^; (); *; $; lorem;
CSS学习（二）- Emmet语法、复合选择器、元素显示模式
weixin_56656559的博客
01-04 1822
选择器作用特征使用情况隔开符号及用法后代选择器用来选择后代元素可以是子孙后代较多符号是空格,如.nav a子代选择器选择最近下一级元素只选亲儿子较少符号是大于，如 .nav>p并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号，如 .nav,.header链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a{}和a:hover实际开发的写法:focus选择器选择获得光标的表单跟表单相关较少记住这个写法。
emmet语法
live_yao的博客
02-27 176
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、emmet语法是什么？二、使用步骤1.快速生成HTML结构语法2.快速生成CSS样式语法3. 快速格式化代码 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、emmet语法是什么？ Emmet语法的前身是Zen coding,它使用缩写,来提高ht
html快速写法,HTML的快速写法：Emmet和Haml
weixin_30823291的博客
06-03 832
HTML代码写起来很费事，因为它的标签多。一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法—-简写法。常用的简写法，目前主要是Emmet和Haml两种，本文都将加以介绍。这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，我建议Ruby/Rails项目使用Haml，其他项目使用Emmet。一、Emmet的用法Emmet是一个编辑器插件，官...
CSS学习笔记3—文字样式、外观属性和Emmet语法
少儿编程乔老师
10-13 294
CSS学习笔记3—文字样式、外观属性和Emmet语法
【CSS学习记录-1】：CSS基本概念
qq_46808737的博客
07-22 127
介绍CSS的作用、基本组成、三大特性、Emmet语法（快速编写HTML与CSS）
（二）HTML绘制基本表格（学习笔记）
qq_44998273的博客
04-21 398
一、绘制基本表格 table主要用于呈现格式化数据。表格是由行和列组成。 格式： <table>/*表示一个表格，可能有多行多列*/ <tr> /*代表行*/ <td></td> /*代表每行被分割为若干单元格*/ <td></td> ......... </tr> ...
VScode必备插件、Emmet语法、面试题更新——用到老
N奈斯先生的博客
08-20 1012
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 目录 一、VScode必备插件 二、Emmet语法 三、每日面试题 一、VScode常用插件 1、VScode介绍 vscode作为微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。 当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，edi
CSS学习笔记二
qq_59301215的博客
11-17 292
css学习笔记，来自pink老师视频教学。
Redis 入门 - 五大基础类型及其指令学习
IT规划师
09-11 771
学习Redis基础类型：字符串、集合、有序集合、列表、哈希，每种类型有各自的特点和常用指令。掌握这些基础是熟练使用Redis的关键。更多指令需自行尝试。
qmt量化交易策略小白学习笔记第61期【qmt编程之期权行情数据--get_market_data_ex函数】
fanglue3705的博客
09-09 720
获取期权行情数据 获取期权最新数据，首先需要进行数据订阅。完成合约订阅后，用get_market_data_ex函数即可提取相关信息。这个过程包含两大步骤： 第一，通过订阅操作确保能接收到你感兴趣的期权合约的更新； 第二，调用get_market_data_ex函数来实际获取并处理这些订阅到的数据,如果需要用到历史数据或过期合约数据，需要使用download_history_data进行下载。
计算几何学习
最新发布
网安小白
09-12 365
学习计算几何过程中对经典算法的记录
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
nanxiaotao的博客
09-11 853
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
【学习笔记】SSL证书之前向保密
Taki_UP的博客
09-10 703
本篇介绍了密码学中前向保密（Forward Secrecy）的相关内容
Android Fragment 学习备忘
sdaujz的博客
09-08 417
1.fragment的动态添加与管理：
IIC基本学习
????????????????????????????????????????????????
09-11 230
对IIC通信协议补充了基本的了解，在进行相关的工程实践后再进行补充。
CSS学习笔记：EMMET语法与选择器详解
在CSS的学习过程中，了解和掌握高效编码工具如Emmet的语法，以及不同选择器的使用方法，能够显著提升工作效率。本资源总结了关于Emmet的基本操作，CSS复合选择器的应用，以及元素选择模式和背景设置的要点。 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值