【Emmet 的使用手册（知识点超全版本）】

置顶 已于 2022-05-16 18:05:44 修改
阅读量6.2k 收藏 104
点赞数 24
分类专栏： 【Emmet 使用手册】 文章标签： Emmet 使用手册（知识点超全版本） Emmet介绍 Emmet缩写 Emmet语法
于 2019-02-22 16:18:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vickytsai/article/details/86749904
版权

Emmet 使用手册目录

Emmet 简介

1. Emmet 生成 HTML 的缩写语法

1.1 HTML 文档类型和结构初始化

  • html:5 或!：用于 HTML5文档类型
  • html:xt：用于 XHTML 过渡文档类型
  • html:4s：用于 HTML4 严格文档类型
<!-- ! -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		
	</body>
</html>

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

<!-- html:xt -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
	</head>
	<body>
		
	</body>
</html>

<!-- html:4s -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>
		
	</body>
</html>

1.2 注释

  • 快速注释 ：ctrl+ /
<!-- 快速注释：ctrl+/ -->

1.3 HTML 标签

  • 使用 元素的名称 (如 div 或 p ) 来生成 HTML标签。
  • Emmet 中 没有一组预定义的标签名称,可以编写任何单词 并将其转换为一个标签
    • 单词都可以转换成标签（所以要注意标签名 不要拼写错误）
    • :div→< div > < / div >, foo→< foo > < / foo >等等。
    • ▶ 有的编辑器，只解析正规的HTML标签名，比如 Sublime Text 3 中文版
      • 打 cat 、dog之类的 ，是不会展开成标签样式的
    • 更多 Emmet 的 HTML 标签缩写介绍
	<!-- div -->
	<div></div>
    <!-- cat 不是真正的html标签-->
	<cat></cat>
	<!-- dog 不是真正的html标签-->
	<dog></dog>

1.4 嵌套

⑴ 后代-下一级

  • 后代：>
<!-- 后代：> div>ul>li*3  -->
<div>
   <ul>
   	<li></li>
   	<li></li>
   	<li></li>
   </ul>
</div>

⑵ 兄弟-同一等级

  • 兄弟： +，相邻标签
	<!-- 兄弟：+ ，div+div+ul+p -->
   <div></div>
   <div></div>
   <ul></ul>
   <p></p>

⑶ 父亲-上级

  • 上级：^ ,父亲的相邻标签，一个^,可以上升一级
    • ▼ 注意点：^可以连续使用，如 ^^,父亲的父亲的相邻标签
  <!-- 上级：^ ,div+div>p+ul^p-->
  <div></div>
  <div>
  	<p></p>
  	<ul></ul>
  </div>
  <p></p>
 <!-- div>div>p>ul>li*3^^p -->
  <div>
  	<div>
  		<p>
  			<ul>
  				<li></li>
  				<li></li>
  				<li></li>
  			</ul>
  		</p>
  		<p></p>
  	</div>
  </div>

1.5 分组

  • 分组：()
	<!-- 分组：() ,div>(div1>p*2)+div2>ul>li*3-->
	<div>
		<div1>
			<p></p>
			<p></p>
		</div1>
		<div2>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div2>
	</div>

1.6 乘法-数量

  • 乘法：*,数量几个，重复几次
 <!-- 乘法：* 数量几个，div>ul>li*3 ，标签数量一次性定义-->
  <div>
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>

1.7 分组和乘法结合

  • 分组和乘法：
    • 分组()和乘法 * 可以一起使用，同样的分组有几个
    • 分组可以 再嵌套分组
	  <!-- (div>dl>(dt+dd)*3)+footer>p -->
	  <div>
	  	<dl>
	  		<dt></dt>
	  		<dd></dd>
	  		<dt></dt>
	  		<dd></dd>
	  		<dt></dt>
	  		<dd></dd>
	  	</dl>

1.8 自增符号-给项目编号

  • 自增符号：$，给元素编号
  • 注意点：自增和乘法一起使用，$*4,序号 1~4
  • 多加几个$,就是在序号前加几个0
  • 指定阶段使用@ ，$@n*m ,即m个序号，范围是n~（n+m-1），-1 是去掉起始数字本身
  • △ 知识点总结，思维导图
	  <!-- 自增符号：$,ul>li.item$*4，类名自增 -->
	  <ul>
	  	<li class="item1"></li>
	  	<li class="item2"></li>
	  	<li class="item3"></li>
	  	<li class="item4"></li>
	  </ul>

	  <!-- h$*3 ，标签自增-->
	  <h1></h1>
	  <h2></h2>
	  <h3></h3>
	  
	  <!-- h$[title=item$]*3 ，标签名和属性值一起自增-->
	  <h1 title="item1"></h1>
	  <h2 title="item2"></h2>
	  <h3 title="item3"></h3>
	  
	  <!-- h$[title=item$]{little boy$}*3 ，
	  标签名和属性值，标签内容一起自增-->
	  <h1 title="item1">little boy1</h1>
	  <h2 title="item2">little boy2</h2>
	  <h3 title="item3">little boy3</h3>

	  <!-- ul>li.item$$*3 ，自增从0开始，
	  再加一个$,$$*3-->
	  <ul>
	  	<li class="item01"></li>
	  	<li class="item02"></li>
	  	<li class="item03"></li>
	  </ul>
	  <!-- ul>li.item$$$*3 ,自增从00开始，
	  再加两个$$,$$$*3-->
	  <ul>
	  	<li class="item001"></li>
	  	<li class="item002"></li>
	  	<li class="item003"></li>
	  </ul>
  	<!-- ul>li.item$@-*3 ,自增顺序倒着来，
  	后面加@- ，$@-*3 -->
	  <ul>
	  	<li class="item3"></li>
	  	<li class="item2"></li>
	  	<li class="item1"></li>
	  </ul>

 	 <!-- ul>li.item$@3*6 ,自增顺序，按照指定阶段来显示，
 	 后面加上@数字*数字，$@3*6，从3开始 共6个序号，包含起始数字本身，序号范围：就是3-（3+6-1）3~8 -->

	  <ul>
	  	<li class="item3"></li>
	  	<li class="item4"></li>
	  	<li class="item5"></li>
	  	<li class="item6"></li>
	  	<li class="item7"></li>
	  	<li class="item8"></li>
	  </ul>
	  
	   <!-- ul>li.item$@3*3 3~5-->
	  <ul>
	  	<li class="item3"></li>
	  	<li class="item4"></li>
	  	<li class="item5"></li>
	  </ul>

1.9 ID

  • 定义ID名称：#
	  <!-- 定义ID,# ,div#header -->
	  <div id="header"></div>

1.10 类

  • 定义 类名称，使用 .
	<!-- 定义类名称，使用. div.title -->
	  <div class="title"></div>
  • 同时定义 ID名和 类的名称
	  <!-- form#search.red -->
	  <form action="" id="search" class="red"></form>
  • 给一个标签 一次性定义 多个类名：连续使用 .
	  <!-- div.class1.class2.class.3 ,给一个标签 
	  一次性定义多个类名,连续使用.符号即可-->
	  <div class="class1 class2 class 3"></div>

1.11 属性和属性值

  • 定义属性和属性值：[ ], 中括号，属性值用 =
  • 注意点：
    • 可以同时定义 多个属性和属性值
    • 属性个数 不限制
      • 多个属性之间，用 空格 分隔
    • 可以不指定属性值，只写属性名字，不写= 即可，会自动给空值
    • 关于属性值 需不需要使用引号：
      • 属性值不含空格，不需要使用引号
      • 属性值含空格，需要使用引号，让属性值作为一个整体，单引号和双引号都可以
	  <!-- 错误示例： p[title=hello world] 属性值中间 有空格时，
	  要加双引号-->
	  <p title="hello" world=""></p>
	  <!-- 正确示例： p[title="hello world"] -->
	  <p title="hello world"></p>
	  
	  <!-- td[rowspan=2 colspan=3 title] -->
	  <td rowspan="2" colspan="3" title=""></td>

	  <!-- div[title="hello world" ] 属性值带空格，使用双引号-->
	  <div title="hello world"></div>
	  <!-- div[title='hello world' ] 属性值带空格，使用单引号-->
	  <div title="hello world"></div>

1.12 文本

  • 文本：{ }, 大括号
  • 标签名{} 和 标签名+{} 的区别
    • 标签名{}，标签名后直接跟{}，{}中的就是标签的内容
    • 标签名+{}，因为有+ 这个同级别的符号，{}中的内容，相当于该标签的兄弟，同级别，所以会放在标签的 结束标签的后面。
	  <!-- div{click}>a{here}+{to continue} -->
	  <div>click<a href="">here</a>to continue</div>

	  <!-- div>{我是div的内容1}+p{我是div儿子p的内容}+{我是div的内容2} -->
	  <div>
	  我是div的内容1<p>我是div儿子p的内容</p>我是div的内容2
	  </div>

1.13 隐式标签-自动补全 标签名

  • 隐式标签（自动补全 标签名）：标签名 省略不写，也能自动补全标签名， 是后代的话，自动识别，并补全后代标签
  • 不写标签名时，展开时，都会先查看父标签的名字

    • ❶ 如果有 固定的父子搭配，根据父标签的名字 而自动生成不同的标签

      • em 的后代标签，一般为 span 标签
      • ul 的后代标签，一般为 li 标签……以此类推。

    • ❷ 没有 父子的固定搭配，一般会自动补全为 div 标签

	  <!-- 隐式标签 -->
	  <!-- .class1 没写标签名，自动补全为div标签 ，因为div最常用吗？-->
	  <div class="class1"></div>

	  <!-- #header 没写标签名，自动补全为div标签 -->
	  <div id="header"></div>
  • em 标签的后代，自动补全为 span 标签
    • （em 表示强调，span 用来设置样式，
      • 要强调的内容，一般都需要 单独设置一个特别的样式，所以，em 标签的后代，自动补全为 span）
  • ▼ 相关知识点：<em>和<strong>都表示 强调，
    • 但<em> </em>标签的内容表现为 斜体，
    • <strong> < /strong> 标签的内容表现为 加粗。
    • <span >标签没有语义，它的作用，就是为了行内分组，设置 单独的样式 用
      的。

<html>
	<head>
		<style>
			span{color:red;}
		</style>	
	</head>
	<body>
	  <!-- em>.red{我是要强调的内容，我用span标签设置样式} -->
	  <em><span class="red">我是要强调的内容，我用span标签设置样式</span></em>
	</body>
  • ul 标签的后代，自动补全为 li 标签
  <!-- ul>.class$.red*3 -->
	  <ul>
	  	<li class="class1 red"></li>
	  	<li class="class2 red"></li>
	  	<li class="class3 red"></li>
	  </ul>
  • table 标签的后代，自动识别为 tr
    • tr 的后代，自动识别为 td
	  <!-- table>.row>.col  表，行，列-->
	  <table>
	  	<tr class="row">
	  		<td class="col"></td>
	  	</tr>
	  </table>
  • 自动识别的规则
    • li for ul and ol
    • tr for table, tbody, thead and tfoot
    • td for tr
    • option for select and optgroup
父亲自动补全
ul、olli
table, tbody, thead and tfoottr
trtd
select and optgroupoption
emspan
<!-- 隐式标签，自动补全示例 -->
	<!-- <ul>.class</ul> -->
	<ul><li class></li></ul>
	<!-- <ol>.class-ol</ol>	 -->
	<ol><li class="class-ol"></li></ol>	

	<!-- <table>.class-table</table> -->
	<table><tr class="class-table"></tr></table>

	<!-- <tbody>.class-tbody</tbody> -->
	<tbody><tr class="class-tbody"></tr></tbody>

	<thead><tr class="class-thead"></tr></thead>

	<tfoot><tr class="class-tfoot"></tr></tfoot>

	<!-- <tr>.class-td</tr> -->
	<tr><td class="class-td"></td></tr>

	<!-- <optgroup>.class-opt</optgroup> -->
	<optgroup><option class="class-opt"></option></optgroup>

	<!-- <select name="" id="">.class-sel</select> -->
	<select name="" id=""><option class="class-sel"></option></select>
  • 补全后代标签名： 一部分的标签 ，后代的名字可以不写，会自动补全后代的标签名
	<!-- ul>.item$*3 和 ul>li.item$*3  解析后，展开的代码相同 -->
	<ul>
		<li class="item1"></li>
		<li class="item2"></li>
		<li class="item3"></li>
	</ul>

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

1.14 Emmet 书写格式

  • Emmet 的语法书写格式
    • ① emmet 缩写的使用位置
      • ❶ 新行：新行中可以使用 emmet 缩写，但不是必须要重新开始一行，才能使用 emmet 缩写
      • ❷ 行内：在标签中 ，行内 也能使用 emmet 的缩写，同样使用 tab 键进行缩写的扩展
    • ② emmet 缩写中 不能使用的符号是什么？
      • 空格：Emmet 缩写语法中 不能带 空格，因为空格是 终止解析 符号，遇到空格就停止缩写解析，不能拓展了
	<!-- div>ul>li*5 -->
	<div>
		<ul>
			<li><!-- hello world span.red --> >hello world <span class="red"></span></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

1.15 添加 虚拟测试文本（一段拉丁文，lorem，lipsum）

  • lorem lipsum
    • 一篇拉丁文的 文章；又叫做，哑元文本；乱数假文
    • dummy text
      • ['dʌmi]
      • adj. 虚拟的 n.哑巴
    • 用途：测试外观。许多 web 开发人员 使用 “Lorem ipsum” 虚拟文本 来测试他们的 HTML 模板在实际数据中的外观。
    • 缩写语法
      • lorem，lirem5,5代表5个单词
      • lipsum
      • 标签名>lorem5,搭配 >后代运算符，为标签 添加 5个单词 虚拟的测试文本。
    • ① 相同文字吗?
      • 每次使用缩写语 生成的文字都不同，不是同一段虚拟文字
    • ② 默认多少英文单词？
      • 默认的 lorem 每次都是30个单词
    • ③ 如何指定单词个数？
      • 后面写上数字
      • lorem10 will generate a 10-words dummy text.
      • lorem10 将生成10个单词的虚拟文本。
    • ④ 可以在重复的元素中，同时生成 虚拟测试文本吗？
      • 可以，使用后代 运算符 >
      • p*4>lorem10
    • ⑤ 如何和隐式标签名一起使用？
      • 写在 被省略的标签名的位置
      • ul>lorem5.item*3 和 ul>.item*3>lorem5 一个意思

	<!-- ul>lorem5.item*3 -->
	<ul>
		<li class="item">Lorem ipsum dolor sit amet.</li>
		<li class="item">Vel eveniet assumenda, expedita quaerat!</li>
		<li class="item">Esse beatae unde nulla quia.</li>
	</ul>
	
	<!-- ul>.item*3>lorem5 -->
	<ul>
		<li class="item">Lorem ipsum dolor sit amet.</li>
		<li class="item">A itaque architecto quas recusandae.</li>
		<li class="item">Deleniti, necessitatibus porro perspiciatis ab!</li>
	</ul>


	<!-- 使用 lorem 产生虚拟文字 -->
	<!-- <p>lorem10</p> -->
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, quidem!</p>
	
	<!-- p*4>lorem10	 -->
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, id.</p>
		<p>Blanditiis sapiente expedita incidunt autem necessitatibus provident deserunt eius sequi.</p>
		<p>Vitae nobis quos id modi quam ad nulla. Laborum, cum!</p>
		<p>Itaque, illum veritatis? Debitis, mollitia nulla doloribus quae dolorem aliquid.</p>	


	<!-- <p>lorem</p> -->
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id consequuntur odit perferendis debitis quos unde totam pariatur quibusdam, at explicabo corporis, quisquam labore cupiditate deserunt odio maiores adipisci dicta aliquid! 后面是第二次使用 lorem 产生的段落：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis consequatur nulla magnam minima, nesciunt ipsa quo, quibusdam recusandae fugiat aspernatur amet libero numquam deleniti eligendi nobis rem neque saepe sed.</p>
<!-- <p>lipsum</p> -->

2. Emmet 生成 CSS 的缩写语法

2.1 属性的缩写

  • 属性名可简写吗？
    • 可以，如 margin ，使用 m 即可
  • 如果 该缩写 没找到预定义的片段，会如何处理？
    • 把该缩写 直接作为属性名
    • borderr: ; 多一个r，错误、不存在的属性名，但也会直接作为属性名，所以，不要打错

2.2 同时缩写 属性和属性值

  • 可以同时缩写 属性和属性值吗？
    • 可以，如 m10，可以扩展为 margin: 10px;
    • 为什么 属性名称和属性值 之间不使用分隔符？
      • 是为了更快的打出代码。
    • 属性和属性值的边界是什么？
      • 第一次出现的 ❶ 数字 或 ❷ 连字符 被视为一个 值边界。在m10的例子中，m是属性部分，10是值部分，10就是值边界。

2.3 同时缩写 多个属性值 或者属性

  • 如何 同时缩写 多个属性值 或者属性？
    • 使用 +和 - 符号:
      • 如何连接多个属性值？
        • 使用 连字符 -
      • 如何连接多个属性
        • 使用 加号 +
 /* m+b ，+ 连接 多个属性*/
 margin: ;
 bottom: ;
 /*m10-20，带两个属性值，- 连接多个属性值*/
 margin: 10px 20px;

2.4 负的属性值

  • 如何表示 负的属性值？
    • 使用连字符 -
    • ❶ 值在属性名后面，一个-即可，m-10是对的，m--10 是无效的，因为属性名和属性值之间，不需要-做边界，数字就可以是 表明边界。
    • ❷ 值在 属性值的后面：两个连字符 --，前一个是表示 属性值连接符的，后一个是表示负值的。
/*m ，margin的缩写*/
margin: ;

/*m10 ，带属性值的，属性名称和属性值之间不使用分隔符，是为了更快的打出代码*/
margin: 10px;

/*m10-20，带两个属性值的*/
margin: 10px 20px;

/*m-10--20 带负得属性值的*/
margin: -10px -20px;

/*m-10-20 带一个正值 一个负值的*/
margin: -10px 20px;

/*m-10--20 带两个负值的*/
margin: -10px -20px;
/*m-10--20--30 带三个负值的*/
margin: -10px -20px -30px;

/*★ 同时定义多个属性*/
/*m10+bd20，同时定义两个属性*/
margin: 10px;
border: 20px;

/*m10+bd20+bg#3，同时定义三个属性*/
margin: 10px;
border: 20px;
background: #333;

/*m10-20+bd20，同时定义两个属性，第一个属性两个属性值*/
margin: 10px 20px;
border: 20px;

2.5 属性值的单位

  • （1）数字的默认单位
    • 如果是 整数值:默认单位是什么？
      • px，像素
    • 如果是 浮点数（带小数的值）:默认单位是什么？
      • em （em可以表示倍数，所以可以使用于小数，0.75em，即 75%）
     /*m5*/
     margin: 5px;
     /*m0.5*/
     margin: 0.5em;
  • （2）显式定义 属性值单位
    • 如何定义数字的单位？
      • 属性名，后跟 任意字母：
        • 注意，任意单词 可以定义属性值单位，所以不要打错单词
        • m10cat5dog，即 margin: 10cat 5dog;
  • （3）单位的简写
    • p → %，percent 的首字母
    • e → em
    • x → ex
  • 有哪些 默认不带单位的属性？
    • z-index, line-height, opacity and font-weight （这些属性的属性值 一般都不用单位，所以默认不带单位）
/*★ 属性值的单位*/
/*m10  整数值，默认单位是px*/
margin: 10px;

/*m10.5 小数值，默认单位是em*/
margin: 10.5em;

/*m10ex15em ，显式定义属性值单位*/
margin: 10ex 15em;

/*m10cat5dog，任意单词 可以定义属性值单位，注意不要打错单词*/
margin: 10cat 5dog;

/*属性值单位的简写 */
/*m10p*/
margin: 10%;

/*m10e*/
margin: 10em;

/*m10x*/
margin: 10ex;

2.6 颜色的属性值

  • 表示颜色的属性值，搭配哪个符号？
    • # 符号：十六进制颜色值，使用 # 符号
    • 颜色值格式：1,2,3,6个字符，详情参见下方代码
/*★ 颜色的属性值格式*/
/*c#3，#后面一个字符*/
color: #333;

/*c#e0，#后面两个字符*/
color: #e0e0e0;

/*c#fc0，#后面三个字符*/
color: #fc0;

/*c#ffcc00，#后面六个字符*/
color: #fc0;

2.7 属性值 !important 缩写

  • 后缀：在属性名或者属性值缩写 后面添加！即可快速生成
/*!important 属性值的生成 */
/*p!+c#3!		*/
padding:  !important;
color: #333 !important;

2.8 浏览器供应商的前缀

  • （1）用途：简化输入 浏览器供应商前缀的过程
    • 连字符作为前缀
      • 使用方法：在属性名前 加连字符 -
    • 同时输入属性值：支持制表键的编辑器，还会自动生成一串占位符
      • 可以几个相同的属性值
        在这里插入图片描述
        在这里插入图片描述
  • （2）默认添加的前缀
    • 所有在 供应商目录 文件中定义的 CSS 属性 将自动提供匹配的供应商前缀变量。
    • 这意味，我们不需要使用连字符 -，也能得到已知 CSS 属性的有效前缀变体，只需展开缩写即可
      • 如 trf，就可以获得供应商前缀属性的有效列表。
  • （3）带连字符作为前缀 和不带连字符的缩写 的区别
    • 如果 供应商目录文件中有这个属性，则生成的片段是一样的。
    • 如果没有的话，一个不生成前缀，一个生成全部的浏览器前缀
    • 综上，
      • 忘记写前缀时，需要的前缀还是会自动添加的
      • 需要前缀时，最好把 连字符带上。
/*-bdrs ,会自动生成占位符，可以同时输入几个属性值*/
-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;

/*trf ,没有加 连字符 - 前缀，但是自动生成了浏览器供应商的前缀，
因为这个trf属性在供应商目录文件中，会自动添加浏览器供应商前缀*/
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;


/*-trf 和不带连字符的 缩写，生成一样的浏览器供应商前缀*/
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
  • （4）指定的浏览器前缀：wmso
    • w: webkit
    • m: moz
    • s: ms
    • o: o
/*-w-trf 一次定义一个指定浏览器前缀*/
-webkit-transform: ;
transform: ;

/*-m-trf 一次定义一个指定浏览器前缀*/
-moz-transform: ;
transform: ;

/*-s-trf 一次定义一个指定浏览器前缀*/
-ms-transform: ;
transform: ;

/*-o-trf 一次定义一个指定浏览器前缀*/
-o-transform: ;
transform: ;

/*-wm-trf 一次定义两个指定的浏览器前缀*/
-webkit-transform: ;
-moz-transform: ;
transform: ;

/*-wms-trf 一次定义三个指定的浏览器前缀*/
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
transform: ;

/*-wmso-trf 一次定义四个指定的浏览器前缀*/
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
  • （5）前缀是如何解析的
    • ❶ 确定属性名称：在 CSS 解析器确定 应该输出的属性名称之后
    • ❷ 查找属性名：在特定的供应商目录文件中（暂时没有找到是哪个文件，这个能找到的话，据说是可重写的）查找它的出现。
      • 如果在这些 目录中 找到了展开的属性，那么它们的供应商前缀 将用于生成前缀属性。
      • 如果没找到，将使用 所有前缀。
      • 需要浏览器前缀的，一定需要所有前缀吗？
        • 并不，有的属性 不需要所有的浏览器前缀。
        • 一般刚出现的 前沿的 新 CSS 属性 会需要所有的浏览器前缀

  • ▼ 知识拓展：em 单位，相对 长度单位。

    • 相对于 当前对象内 -文本的字体尺寸。
      • 当前 行内文本的字体尺寸 未被人为设置，则相对于 浏览器的-默认字体尺寸。
        • 1em 为参考字体的-大写字母的高度
          • CSS 定义 1em 为 字符框的高度。
        • 以 em 表示的尺寸是 十进制小数或者参考字体尺寸的 倍数。
          • 因此，2em 和 200%是一样的，而 .75em 和 75% 也表示同样的尺寸
      • 相对单位
        • em (em，元素的字体的高度)
        • ex (x-height，字母 “x” 的高度)
        • px (像素，相对于屏幕的分辨率)
    • CSS 单位 更多详细介绍链接
    • 为什么需要浏览器前缀？
      • ❶ 实验新属性： 方便 各个浏览器厂商 实验新属性（该属性的实现 以后可能会变更）
      • ❷ 向后兼容 最新的标准。
        • 方法： 把不带前缀的版本 放到最后一行；
        • 最终标准确定时，开发的页面就能够自适应 最终定义的实现方式（因为我们会在最后一行 写上无前缀的）

  • 这些前缀并非所有 都是需要的，但加上这些前缀 不会有任何害处——只要记住一条，把不带前缀的版本 放到最后一行：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

2.9 渐变属性值 的前缀

  • 1.属性名和 属性值的前缀 同时自动添加
    • 属性名和前缀都没有指定
      • 自动添加 匹配的 background-image 属性名和 属性值的前缀
 div{
 	/*lg(left,#fc0 30%,red),没有指明属性名，自动生成 background-image属性，
 	属性值 渐变的定义，自动生成浏览器供应商前缀*/
 	background-image: -webkit-linear-gradient(left, #fc0 30%, red);
 	background-image: -o-linear-gradient(left, #fc0 30%, red);
 	background-image: linear-gradient(to right, #fc0 30%, red);

 }
  • 2.自动添加 指定的属性名的前缀 和 属性值的前缀
 div{
 	/*border-image：lg(left,#fc0 30%,red)  指定了属性名*/
 	-webkit-border-image: -webkit-linear-gradient(left, #fc0 30%, red);
 	-o-border-image: -o-linear-gradient(left, #fc0 30%, red);
 	border-image: linear-gradient(to right, #fc0 30%, red);	
 }
  • 针对 知识点1,2 的情况，2022.05.16 在 webstorm 编辑器中测试结果
           /*lg(left,#fc0 30%,red)*/
            /*lg(left,#fc0 30%,red) 没有成功展开*/
            /*border-image：lg(left,#fc0 30%,red)*/
            /*border-image：lg(left,#fc0 30%,red) 也没有成功展开    */

            /*lg 成功展开了，但并没有添加任何前缀，lg()无法成功展开*/
            background-image: linear-gradient();
  • 3.同时修改 不同浏览器前缀的函数值
    • 修改函数值，按下 tab 键，相同位置的属性值，会一起修改成一样的属性值

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

2.10 模糊查询

  • 原理：每次输入未知缩写时，Emmet 都会尝试找到 最接近的代码片段定义。
    • 模糊搜索执行对象： 是根据预定义的 代码片段名称 执行的，而不是代码片段值或CSS属性。
    • 创建和重定义：可以创建自己的代码片段或重新定义现有的代码片段，以微调模糊搜索体验。
  • 用途1：相同的属性名和属性值，可以用不同的缩写打出来
  • 用途2：让我们写一些缩写的时候，可以更自由灵活点，不用死记硬背固定的格式
 /*因为模糊查询，使用5种不同的缩写，拓展出了相同的代码片段*/
 /*ov*/
 overflow: hidden;
 /*ove*/
 overflow: hidden;
 /*ovh*/
 overflow: hidden;
 /*ov:h*/
 overflow: hidden;
 /*ovhi*/
 overflow: hidden;
  • 2022.05.16 在 webstorm 编辑器中 再次测试
    • 只有两种情况 展开成功，可能是 不同的编辑器，关于模糊查询的实现 有些许的不同
           /*ov*/
            overflow: hidden;
            /*ove*/
            /*ove 展开失败*/
            /*ovh*/
            /*ovh 展开失败  */
            /*ov:h*/
            overflow: hidden;
            /*ovhi 展开失败   */

2.11 Emmet 如何解析 CSS 缩写

  • CSS 解析器

    • Emmet 有一个特殊的 CSS 解析器，它将这些缩写 扩展为一个完整的 CSS 属性。
    • 如何解析的：
    • 两部分：属性+属性值。分别拓展。
      • 找到文件中的片段定义：在 snippets.json 文件中（这个文件 Emmet 插件安装包里会有）查找 m10 代码片段定义。
        • 如果找到它，它将作为 常规代码段 输出。
          • ★ 所以，如何修改 预定义的缩写拓展？
            • 修改 snippets.json 中的代码，可以修改预定义的缩写拓展，可以用 sublime text3 等编辑器 打开并修改。
          • 当找到属性部分时，解析器 将搜索 snippets.json 中 的代码片段定义。
            • 对于 m 部分，它将找到 “m”:“margin:|;” 定义
              • | 字符的作用是什么？
                • 当代码片段展开时，| 字符用作插入符号位置引用。
        • 有属性值的话，它从缩写中提取值。

  • 代码片段定义的样式

    • 像一个CSS 属性
    • 两部分：属性+属性值。
      • 是为了 Emmet 能够将 css 缩写 拆分为一个 CSS 属性和值 两部分
      • 放置值：并将 转换后的值部分 放置在插入符号位置(即 | 字符)。

  • 定制 Emmet 插件

    • 如何 添加和更新缩写？
    • 如何更改 Emmet 过滤器和操作的行为？
    • 定义如何生成 HTML 或 XML 代码？
      • 可修改 syntaxProfiles.json文件
      • 这些文件在 Emmet 插件的安装包里，都能找到（sublime 中 ，菜单栏 — 首选项 — 浏览插件，可以找到安装包）

  • 相关链接

3. Emmet 的操作

  • Emmet 支持的快捷键操作-官网介绍
    • 快捷键和 sublime 或其他编辑器中自带的快捷键 冲突，如何处理？
    • 解决办法：重新定义 Emmet 的快捷键
      • 如何自定义快捷键？
        • 首选项-浏览插件-在安装包中找到“Default (Windows).sublime-keymap”文件，用 sublime 打开，可以看到快捷键
        • 修改后，关闭 软件，再重启，亲测有效

  • ⑴ 展开缩写：tab 键

    • “Expand Abbreviation” (Tab key)

  • ⑵ 按照标签对 选取内容

    • 原来：ctrl+D，ctrl+shift+D 自定义: ctrl+shift+0 和 ctrl+shift+9

  • 从当前插入符号的位置 搜索标记或标记的内容边界 并选择这些内容。

    • 由内向外：ctrl+D
    • 由外向内：ctrl+shift+D
      • subime 不支持这个，和本身的快捷键冲突了
        ，不是所有编辑器都支持的
    • 英文（想知道英文的意思，可以看官网介绍，知道这个英文的意思，看源文件的时候，比较方便清楚里面代码的意思，因为是英文备注解释的）
      • “Balance Outward” (Ctrl+D)
      • “Balance Inward (Shift+Ctrl+D)

    在这里插入图片描述

    • ★ 自定义 “按标签对选择内容”的快捷键
      • 本来的快捷键和sublime的快捷键冲突
      • 这里重新定义成 ctrl+shift+0 和 ctrl+shift+9（9和0 数字键上方是左右两个括号，比较好记）
      • 其他的操作，快捷键重新定义，可以参考这个方法
        在这里插入图片描述

  • ⑶ 标签对之间 快速跳转

    • 自定义:ctrl+alt+t

  • 在匹配的开始标签和结束标签两端 快速跳转
    • ctrl+T（这个 sublme text 3 也用不了，快捷键冲突了）
      • 用的翻译软件，是有道词典 PC 版本，可以在网页上划词翻译，看外文网站很方便
      • “Go to Matching Pair” (Ctrl+T)
      • crtl+T 已经被 sublime 占用，可以使用 ctrl+alt+t（自定义快捷键）
        在这里插入图片描述

  • ⑷ 包裹（包含）选定内容

    • 自定义: Shift+Ctrl+W 和 $#

  • 将 当前选定的内容 放在生成的代码片段的最后一个元素中。

    • （1）如果没有选择，action 将无声地调用“匹配的标签对”来包含上下文元素。
      • 同一等级的所有元素
    • （2）将插入符号 放在要换行的标签(或标签的内容)内并运行“用缩写包含该内容”操作
      • 放在标记中，会包含整个标签对
      • 放在标签的内容中，会包含标签的内容
      • 包含多个选定的行数

  • Emmet 默认快捷键：“Wrap with Abbreviation” (Shift+Ctrl+A)

    • 跟 sublime 快捷键重复，这边修改为 Shift+Ctrl+W（w，wrap，包含的缩写，好记一点）

  • a. 包含 指定的标签内容

    • 在下方写 缩写的时候，上方直接会实时显示出来
      在这里插入图片描述

  • b. 包含指定的标签对

    • 光标放在开始，或者结束的标签中 后，按下 ctrl+shift+w 的快捷键，就可以选定这对标签
      在这里插入图片描述

  • c. 同时包含多个单行

  • 注意点：不需要为换行添加乘数的数字(例如li*5)

    • 必须使用 不带数字的*运算符，例如:li*。
    • 包含内容的标签对的数目，会根据 被包含内容的行数，自动重复。
      在这里插入图片描述

  • d. 改变 被包含内容的输出位置

    • 默认情况下，被包含的内容，是放在最后一个元素中的，当做 元素的内容
    • 使用 $# 来指定位置
    • 如，把选择的多行，作为属性值
    • ul>li[title=$#]*
      在这里插入图片描述

  • ⑸ 过滤器

    • |t , |e , |c

  • ① 同时包含多个单行，并删除多余的 列表标记

    • 在缩写的末尾，使用 |t，可以同时去掉多项的列表标记，省时间

在这里插入图片描述

  • ② 实体转义
    • 使用 |e，一般写博客可用用到
<!-- 过滤器 ，实体转义 -->

<!-- #content>p.title -->
<div id="content">
	<p class="title"></p>
</div>

<!-- #content>p.title|e -->
&lt;div id="content"&gt;
	&lt;p class="title"&gt;&lt;/p&gt;
&lt;/div&gt;

<!-- #content>p.title|e|e -->
&amp;lt;div id="content"&amp;gt;
	&amp;lt;p class="title"&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;

  • ③ 注释标签： |c （Comment tags:）

    • 在重要标签周围添加注释。
    • 默认情况下，“重要标签”是那些带有 id 和/或class属性的标签。

  • ★ 官网 更多可用过滤器的信息

  • ⑹ 在编辑点间 快速跳转

    • Ctrl+Alt+→ , Ctrl+Alt+→

  • 快速遍历代码点：此操作适用于HTML代码块，允许您快速遍历重要代码点

    • 这些位置，一般是 需要快速定位光标 和输入内容的位置
      • 标签之间
      • 空的属性
      • 新行和缩进
    • Emmet 默认快捷键（sublime 中可以使用）
      • 下一个编辑点： “Next Edit Point” (Ctrl+Alt+→)
      • 上一个编辑点：“Previous Edit Point” (Ctrl+Alt+←)

在这里插入图片描述

  • ⑺ 快速选择 项目(标签名 , 属性 , 属性值 , 选择器)

    • Shift+Ctrl+. 和 Shift+Ctrl+,

  • 在 HTML 中
    • 快速选择 标签名、完整属性和属性值。
      • 对于class属性，它还选择不同的类。
  • 在 CSS 中
    • 快速选择 选择器、完整属性和属性值。
      • 对于复杂的值和函数，也会选择其中的一部分。
  • Emmet 的默认快捷键 （sublime 中可用）
    • 选择下一项 “Select Next Item” (Shift+Ctrl+.)
    • 选择上一项： “Select Previous Item” (Shift+Ctrl+,)

  • ⑻ 开关注释

    • 自定义:ctrl +shift + /

  • Emmet 的默认快捷键 “Toggle Comment” (Ctrl+/)
    • 和sublime 的冲突，可设置为 ctrl +shift + forward_slash(/)
  • 当在 HTML 文档中没有选择 被调用时
    • “切换注释”操作 将匹配完整的标记
      • 对于HTML，它是一个完整的标签，对于CSS，它是一个规则或完整的属性。
        在这里插入图片描述

  • ⑼ 快速删除 标签对

    • 自定义:ctrl + alt +k

  • 位置和缩进：快速移除标签，从当前插入符号位置找到，并调整缩进。
  • 非 HTML 语法的 html 片段 也可以工作：“移除标签”操作在内部使用“HTML匹配器”，因此它也可以在非 HTML 语法中工作。
  • 快捷键：Emmet 的默认快捷键 ：“Remove Tag” (Ctrl+K)
    • 和 sublime 的冲突，可用设置为 ctrl + alt +k
      在这里插入图片描述

  • ⑽ 快速计算 数学表达式

    • Shift+Ctrl+Y

  • 计算简单的数学表达式，并输出其结果。
    • 使用/运算符，它相当于四舍五入(a/b)。
  • 用途：在需要经常修改数值的 CSS 中非常有用。
  • 快捷键：“Evaluate Math Expression” (Shift+Ctrl+Y) ，sublime 中可以使用

在这里插入图片描述

  • ⑾ 递增/递减数量

    • 自定义: 1,Ctrl+↑↓,0.1 alt + ↑↓ ,10,Shift+altl+↑

  • 按1递增和递减，sublime 中可用

    • Increment by 1” (Ctrl+↑)
    • “Decrement by 1” (Ctrl+↓)

  • 按0.1 递增和递减，sublime 中不可用，需要重新设置快捷键

    • “Increment by 0.1” (Ctrl+Alt+↑)
    • “Decrement by 0.1” (Ctrl+Alt+↓)
      • 可以设置为 Alt+↑和 Alt+↓

  • 按10 递增和递减，sublime 中不可用，需要重新设置快捷键

    • “Increment by 10” (Shift+Ctrl+↑)
    • “Decrement by 10” (Shift+Ctrl+↓)
      • 可以设置为 Shift+altl+↑和 Shift+altl+↓

  • ⑿ 快速展开缩写

    • ctrl+alt+enter

  • 一边写缩写，可以一边看到缩写展开的样子，不用 tab 来展开

    • expand_as_you_type ，快捷键 ctrl+alt+enter，输入完毕 enter 键确认
      在这里插入图片描述

  • ⒀ 分裂和合并 标签对

    • 自定义 : shift+ctrl+`

  • 用途：对XML/XSL开发人员非常有用。

  • 快捷键：“Split/Join Tag” (Ctrl+J) ，和sublime本身快捷键冲突

    • 自定义为 shift+ctrl+`
      在这里插入图片描述

  • 还有多行合并为一行，映射 css 属性值到多行，解码和编码图像到 data：url。详情见 官网 Emmet 操作介绍

♣ 结束语 和 友情链接

  • 捐助: 喜欢这篇文章吗? 捐助此文,向团团 表示鼓励和支持吧~❤
    在这里插入图片描述
  • 捐助二维码:
    在这里插入图片描述

  • 感谢：♥♥♥ 这篇文章 对小伙伴有帮助的话，可以点赞、评论和关注，鼓励下作者哦，感谢阅读~

  • 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ

    • 作者：Hey_Coder
    • 来源：CSDN
    • 原文：https://blog.csdn.net/VickyTsai/article/details/86749904
    • 版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述

Hey_Coder
关注
  • 24
    点赞
  • 踩
  • 104
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
fortran操作excel
04-04
fortran操作excel的例子,这里有例子及演示,很有用的,希望你们多加研究改进,相互交流
Emmet使用手册.pdf
07-26
Emmet使用手册.pdf
【Emmet 的使用手册（知识点超全版本）】-附件资源
03-05
【Emmet 的使用手册（知识点超全版本）】-附件资源
Emmet 常用语法参考
来杯卡布奇诺的博客
11-16 1713
Emmet 常用语法参考Emmet 介绍快速生成HTML结构语法快速生成CSS样式语法VSCode 快速格式化代码 Emmet 介绍 Emmet 语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度， VSCode 内部已经集成该语法。 Emmet 的使用方式很简单，写完缩写之后敲下tab按键，就可以自动渲染代码。 快速生成HTML结构语法 生成标签：直接输入标签名，按tab键即可 <!-- 输入 div 之后直接按tab键 --> <div></
前端开发必备！Emmet语法
weixin_33802505的博客
08-27 175
使用方法 emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键） 语法: 后代：&gt; 缩写：nav&gt;ul&gt;li &lt;nav&gt; &lt;ul&gt; &lt;li&...
❤ Emmet 的使用手册【(sublime插件)】
林太白
06-09 1067
❤ Emmet 的使用手册【(sublime插件)】
Emmet：HTML/CSS代码快速编写神器
04-26 3659
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：    Zen coding下的编码演示 去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。  一、快速编写HTML代码
Emment语法的使用一思维导图
caicai16的博客
04-19 192
Emmet语法总结
热门推荐
syzdev的博客
03-29 1万+
1 Emmet简介 Emmet一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外，截至2022年，主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具，无需手动安装即可使用。 如在Visual Studio Code中新建index.html，输入div，可以看到Emmet Abbreviation说明这是一个Emmet语法规则，如下图所示： 此时点击Emmet Abbreviati
Emmet 使用手册
03-06
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。 虽然片段能很好地推动你得生产力，但大多数的实现都有...
Emmet--语法手册
05-12
Emmet--语法手册
emmet详解
雷雨天的雷胖子
06-29 1792
目录 一、概念 二、隐式符号 三、关系符号 四、占位标记 一、概念 emmet是一种介于标记性语言（如html、xml）和规范之外的逻辑输入方法，是一种能大幅提高前端开发效率的工具。 二、隐式符号 html:5 html:5和叹号，二者作用相同。 html:5 ! <!DOCTYPE html> <html lang="en"> <hea...
(英文转载)对创业者的10条忠告
casheen
01-19 336
Ten Commandments for Entrepreneur 原文地址：http://rememme.com/story.php?title=ten-commandments-for-entrepreneur   Every Entrepreneur has a story to tell, Experience to pass on the younger generatio...
Part2_扩展MATSIM_Subpart4_除个人车外的其他模式_第18章 公交路线图匹配半自动工具
weixin_47687315的博客
09-12 293
一般来说，问题可以定义如下。给定：• 一组停靠点（二维点坐标），• 一组路线轮廓（连续停靠点序列），• 一组 GPS 点序列（二维点坐标序列）• 高分辨率导航网络（带属性的二维有向图），任务是将每个站点与网络链接相关联，并将每条路线转换为网络路径（链接的连接序列）。图 18.1 通过提供可用输入信息和正确输出的示例来说明问题。输入信息 GTFS（通用交通信息规范）是一种最近但已被广泛使用的用于指定公共交通系统的格式，由 Google 创建，用于为其地理信息应用程序提供信息。
Redis Cluster 集群搭建
java1_boy的博客
10-26 155
一：环境 虚拟机 centos7 +redis-5.0.4.tar.gz，搭建为三主三从集群模式 二：Redis 单机安装步骤 在/var 建文件夹 redis-cluster/7001 mkdir -p /var/redis-cluster/7001 之后会用到 1：获取redis资源 wget http://download.redis.io/redis-5.0.4.tar.gz 2：解压 tar -xzvf redis-5.0.4.tar.gz 3：安装 cd redis-5.0.
06_pinctr子系统与gpio子系统
Yuanghxb的博客
06-30 305
gpio子系统顾名思义,就是用于初始化GPIO并且提供相应的API函数,比如设置GPIO为输入输出,读取GPIO的值等。当设备和驱动匹配成功以后platform_driver的probe成员变量所代表的函数就会执行,在353行设置probe成员变量为imx6ul_pinctrl_probe函数,因此在本章实验中imx6ul_pinctrl_probe这个函数就会执行,可以认为 imx6ul_pinctrl_probe函数就是I.MX6ULL这个SOC的PIN配置入口函数。gpio子系统提供的常用的AP。
Emmet语法
枯寂家博客
01-13 5425
1.Emmet语法 Emmet语法的前身是Zen coding,它使用缩写,来提高HTML/CSS的编写速度,VScode内部已经集成该语法. ①快速生产HTML结构语法 ②快速生产CSS样式语法 2.快速生成HTML结构语法 ①生成标签 直接输入标签名 按tab键即可 比如 div 然后tab键,就可以生成<div></div> ②如果想要生成多个相同标签 加上 * 就可以 比如 div*3 就可以快速生成3个div ...
emmet 语法手册
最新发布
09-02
Emmet 语法手册是一本指导使用 Emmet 工具的手册。Emmet 是一种高效的编写 HTML 和 CSS 代码的工具，能够节省开发者的时间和精力。 Emmet 语法手册包含了 Emmet 工具的详细使用说明和示例。首先，它介绍了如何在编辑器中启用 Emmet 插件，以及如何使用 Emmet 表达式来生成代码。Emmet 表达式是一种简洁而强大的语法结构，用于快速生成 HTML 和 CSS 代码。 在 Emmet 语法手册中，我们可以学习到如何使用 Emmet 快捷键来生成常见的 HTML 结构，如 div、ul、li 等标签，并设置它们的属性和内容。我们还能学习到如何使用 Emmet 表达式来生成 CSS 选择器和规则，并设置它们的样式。 此外，Emmet 语法手册还介绍了一些高级的 Emmet 技巧和功能，如使用数字增量、自动生成重复模式、快速选取兄弟结点等。这些技巧不仅能够提高编码效率，还能让代码更加规范和可维护。 总体而言，Emmet 语法手册是一本对于使用 Emmet 工具来编写 HTML 和 CSS 代码的开发者来说非常有价值的参考资料。通过学习和掌握 Emmet 语法手册中的内容，开发者能够更加高效地编写代码，提升开发效率，并且减少出错的可能性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值