其他分享
首页 > 其他分享> > Emmet快速语法—助力HTML/CSS快到起飞

Emmet快速语法—助力HTML/CSS快到起飞

作者：互联网

Emmet快速语法—助力HTML/CSS快到起飞

1.概述

在前端开发的过程中， HTML、CSS 代码中大量重复的标签、属性、括号等，让人头疼。

这里推荐一个Emmet语法规则，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，或者你想要的代码块。简单来说用这个快速语法能快速写HTML/CSS快到起飞，减少重复操作。

Emmet是一款插件，能装就能用现在基本写前端的都在用,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Hbuilder、Atom、Dreamweaver等等编辑器都可以使用。

例子：

比如以前写这段，怎么也要一分钟吧！

<div>
	<ul>
		<li>你好，我是Lisa</li>
		<li>你好，我是Lisa</li>
		<li>你好，我是Lisa</li>
		<li>你好，我是Lisa</li>
	</ul>
	<ul>
		<li>你好，我是Lisa</li>
		<li>你好，我是Lisa</li>
		<li>你好，我是Lisa</li>
		<li>你好，我是Lisa</li>
	</ul>
</div>

现在只需要10秒以内就可以搞定。

div>ul*3>li{你好，我是Lisa}*3+Tab键

还有复杂一点的,比如这个

<div class="box">
	<p id="title">
		<ul>
			<li class="child1">我是第1个</li>
			<li class="child2">我是第2个</li>
			<li class="child3">我是第3个</li>
			<li class="child4">我是第4个</li>
		</ul>
		<div class="box2"></div>
	</p>
</div>

只需要输入div.box>p#title>ul>li.child${我是第$个}*4^div.box2+Tab键。

2.语法讲解

1.HTML的初始结构

直接 "!"+Tab ,防止徒手写出错。

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

2.id(#),class(.)

id指令：# ； class指令：.；

div#title

<div id="title"></div>

div.title

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

困死了，明天再写

标签：HTML,Lisa,div,Emmet,CSS,你好
来源： https://www.cnblogs.com/liubage01/p/15506473.html