emmet语法学习笔记

最新推荐文章于 2023-08-04 18:19:20 发布

心刻

最新推荐文章于 2023-08-04 18:19:20 发布

阅读量114

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44679078/article/details/115564661

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

以下都是在支持emmet的环境下（如vscode）输入emmet结构形式后按Tab键生成html代码

生成html模板结构（!）

形式：
输入 !（英文感叹号），然后按Tab键或按回车

结果：

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

class（.）和id（#）

标签名.类名
（省略标签名时，在最外层默认是使用div，在ul或ol中默认使用li，在table、tbody、thead或tfoot中默认使用tr，在tr中默认使用td、在select中默认使用option标签）

emmet形式 ====>  生成的html代码
div.wrap ====>  <div class="wrap"></div>
ul.list  ====>  <ul class="list"></ul>
.container ====> <div class="container"></div>

标签名#id名
（省略标签名时，在最外层默认是使用div，在ul或ol中默认使用li，在table、tbody、thead或tfoot中默认使用tr，在tr中默认使用td、在select中默认使用option标签）

emmet形式 ====>  生成的html代码
div#wrap ====>  <div id="wrap"></div>
p#p1  ====>  <p id="p1"></p>
#container ====> <div id="container"></div>

重复（*）

emmet形式 ====>  生成的html代码
div*6 ====>  <div></div>
			 <div></div>
			 <div></div>
			 <div></div>
			 <div></div>
			 <div></div>

子节点（>）

emmet形式 ====>  生成的html代码
div>p>a ====>  <div>
					<p>
						<a href=""></a>
					</p>
			   </div>

兄弟节点（+）

emmet形式 ====>  生成的html代码
div+p+ul ====>  <div></div>
			    <p></p>
			    <ul></ul>

上级节点（^）

emmet形式 ====>  生成的html代码
div>ul>li^div ====>  <div>
						<ul>
							<li></li>
						</ul>
						<div></div>
					 </div>

分组（( )）

emmet形式 ====>  生成的html代码
div>(ul>li>a)+div>p ====>  <div>
								<ul>
									<li><a href=""></a></li>
								</ul>
								<div>
									<p></p>
								</div>
					 	   </div>

属性（[ ]）

emmet形式 ====>  生成的html代码
ul>li*3>a[href="#" traget="_blank"] ====>  <ul>
												<li>
													<a href="#" target="_blank"></a>
												</li>
												<li>
													<a href="#" target="_blank"></a>
												</li>
												<li>
													<a href="#" target="_blank"></a>
												</li>
										   </ul>

自增符（$）

从1开始自增，可以使用在内容也可以使用类名、id名等

emmet形式 ====>  生成的html代码
ul>li.item$*3 ====>  <ul>
						<li class="item1"></li>
						<li class="item2"></li>
						<li class="item3"></li>
					 </ul>

文本（{}）

emmet形式 ====>  生成的html代码
ul>li.item$*3{文本内容$} ====>  <ul>
						<li class="item1">文本内容1</li>
						<li class="item2">文本内容2</li>
						<li class="item3">文本内容3</li>
					 </ul>

以上emmet规则是可以结合一起来使用的

心刻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
emmet语法学习笔记

以下都是在支持emmet的环境下（如vscode）输入emmet结构形式后按Tab键生成html代码生成html模板结构（!）形式：输入 !（英文感叹号），然后按Tab键或按回车结果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫