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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。