前端开发中，使用Emmet语法提升开发效率

觉醒法师

已于 2022-05-17 10:43:04 修改

阅读量870

点赞数

分类专栏： HTML+CSS 文章标签：前端 html css3 css

于 2022-05-05 16:42:34 首次发布

本文链接：https://blog.csdn.net/jiciqiang/article/details/124589022

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目前很多主流前端开发IDE工具，都支持Emmet语法，它的前身是Zen coding，因为其写法更为高效，被广泛使用。如EditPlus、WebStorm 、HBuilder都支持Emmet语法，如果之前没使用过，可以尝试写下，会发现代码编写速度提升很多。

一、常用语法使用

1.1 通过“>”号，创建多层Html结构

<!-- 输入：div>ul>li，Tab键结束 -->
<div>
	<ul>
		<li></li>
	</ul>
</div>

1.2 通过"+"号，创建兄弟结构

<!-- 输入：div>p+h2+a，Tab结束 -->
<div>
	<p></p>
	<h2></h2>
	<a href=""></a>
</div>

1.3 通过"^"号，创建子项上一级Html结构

<!-- 输入：div+div>span+a+em^div>p，Tab结束 -->
<div></div>
<div>
	<span></span>
	<a href=""></a>
	<em></em>
</div>
<div>
	<p></p>
</div>

1.4 通过"*"号，创建多个元素

<!-- 输入：ul>li*3，Tab结束 -->
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

1.5 通过“()”号，分组创建

<!-- 输入：div>(header>ul>li*3>a)+footer>p*2，Tab结束 -->
<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<footer>
		<p></p>
		<p></p>
	</footer>
</div>

<!-- 输入：(div>dl>(dt+dd)*3)+footer>p*2，Tab结束 -->
<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p></p>
	<p></p>
</footer>

1.6 通过"."，创建元素的类选择器

<!-- 输入：ul>li.item*3，Tab结束 -->
<ul>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ul>

1.7 通过"#"，创建元素的ID选择器

<!-- 输入：div#header，Tab结束 -->
<div id="header"></div>

1.8 通过"[]"，创建元素的属性值

<!-- 输入：div[title='标题']，Tab结束 -->
<div title="标题"></div>	

<!-- 输入：a[href='链接' title='标题']，Tab结束 -->
<a href="链接" title="标题"></a>

1.9 通过"{}"，创建元素中内容

<!-- 输入：a[href='#']{标题内容},Tab结束 -->
<a href="#">标题内容</a>

<!-- 输入：h3{这是一个标题}+p{这里是描述内容} -->
<h3>这是一个标题</h3>
<p>这里是描述内容</p>

2.0 通过“$"，创建相对索引

<!-- 类选择器，循环输入对应索引值，输入：ul>li.item$*3，Tab结束 -->
<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
</ul>

<!-- 内容部分，循环输入对应索引值，输入：p{这里是内容 $}*3，Tab结束 -->
<p>这里是内容 1</p>
<p>这里是内容 2</p>
<p>这里是内容 3</p>

<!-- Html标签，循环输入对应索引值，输入：h${标题 $}*3，Tab结束 -->
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>

<!-- 通过多个$符号，实现数值长度变化，输入：ul>li.item$$${标题 $}*3，Tab结束 -->
<ul>
	<li class="item001">标题 1</li>
	<li class="item002">标题 2</li>
	<li class="item003">标题 3</li>
</ul>

2.1 智能检索，通过对应符号或标签，自动生成下级元素

<!-- 前面无任何标签，直接通过点，默认为div元素，输入：.heaeder，Tab结束 -->
<div class="heaeder"></div>	

<!-- 父级为块级元素，下级会默认生成行内标签span，输入：p>.item，Tab结束 -->
<p><span class="item"></span></p>

<!-- 父级为ul，dl，table等元素，下级会默认生成其对应的子项标签，输入：ul>.item*3，Tab结束 -->
<ul>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ul>

<!-- 输入：table>.row>.column*2，Tab结束 -->
<table>
	<tr class="row">
		<td class="column"></td>
		<td class="column"></td>
	</tr>
</table>

二、HTML模块缩写转化

2.1 通过"!"，生成html结构体

<!-- 输入：!，Tab结束 -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2.2 生成a标签

<!-- 输入：a:link，Tab结束 -->
<a href="http://"></a>

<!-- 输入：a:mail，Tab结束 -->
<a href="mailto:"></a>

2.3 link元素的生成

<!-- 输入：link，Tab结束 -->
<link rel="stylesheet" href="">

<!-- 输入：link:css，Tab结束 -->
<link rel="stylesheet" href="style.css" media="all">

<!-- 输入：，Tab结束 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 输入：link:favicon，Tab结束 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<!-- 输入：link:touch，Tab结束 -->
<link rel="apple-touch-icon" href="favicon.png">

<!-- 输入：link:rss，Tab结束 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

2.4 meta标签生成

<!-- 输入：meta:utf，Tab结束 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<!-- 输入：meta:vp，Tab结束 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 输入：meta:compat，Tab结束 -->
<meta http-equiv="X-UA-Compatible" content="IE=7">

2.5 input标签生成

<!-- 输入：input:hidden，Tab结束 -->
<input type="hidden" name="">

<!-- 输入：input:file，Tab结束 -->
<input type="file" name="" id="">

2.6 通过"+"，生成ol、ul、dl、table、select等元素完整结构

<!-- 输入：ol+，Tab结束 -->
<ol>
	<li></li>
</ol>

<!-- 输入：ul+，Tab结束 -->
<ul>
	<li></li>
</ul>

<!-- 输入：dl+，Tab结束 -->
<dl>
	<dt></dt>
	<dd></dd>
</dl>

<!-- 输入：table+，Tab结束 -->
<table>
	<tr>
		<td></td>
	</tr>
</table>

2.7 输入"c”，回车得到html注释代码

<!-- 输入：c，Tab结束 -->
<!--  -->

2.8 通过"cc:"，生成IE对应兼容代码

<!-- 输入：cc:ie6，Tab结束 -->
<!--[if lte IE 6]>
	
<![endif]-->

<!-- 输入：cc:ie，Tab结束 -->
<!--[if IE]>
	
<![endif]-->

<!-- 输入：cc:noie，Tab结束 -->
<!--[if !IE]><!-->
	
<!--<![endif]-->

注：其他标签就不一一介绍了，常规如：hr、br、input、a、p、span、style、script直接回车即可。

三、CSS模块缩写转化

3.1 position属性转化

/* 输入：pos:s，Tab结束 */
position: static;

/* 输入：pos:a，Tab结束 */
position: absolute;

/* 输入：pos:r，Tab结束 */
position: relative;

/* 输入：pos:f，Tab结束 */
position: fixed;

3.2 float属性转化

/* 输入：fl:n，Tab结束 */
float: none;

/* 输入：fl:l，Tab结束 */
float: left;

/* 输入：fl:r，Tab结束 */
float: right;

3.3 display属性转化

/* 输入：d:n，Tab结束 */
display: none;

/* 输入：d:b，Tab结束 */
display: block;

/* 输入：d:i，Tab结束 */
display: inline;

/* 输入：d:ib，Tab结束 */
display: inline-block;

/* 输入：d:li，Tab结束 */
display: list-item;

/* 输入：d:ri，Tab结束 */
display: run-in;

/* 输入：d:cp，Tab结束 */
display: compact;

/* 输入：d:tb，Tab结束 */
display: table;

3.4 face属性转化

/* 输入：@f，Tab结束 */
@font-face {
	font-family:;
	src:url();
}

/* 输入：@f+，Tab结束 */
@font-face {
	font-family: 'FontName';
	src: url('FileName.eot');
	src: url('FileName.eot?#iefix') format('embedded-opentype'),
		 url('FileName.woff') format('woff'),
		 url('FileName.ttf') format('truetype'),
		 url('FileName.svg#FontName') format('svg');
	font-style: normal;
	font-weight: normal;
}

3.5 margin和padding属性转化

/* 输入：m，Tab结束 */
margin: ;

/* 输入：m:a，Tab结束 */
margin: auto;

/* 输入：mr，Tab结束 */
margin-right: ;

/* 输入：p，Tab结束 */
padding: ;

/* 输入：pl，Tab结束 */
padding-left: ;