在前端开发的过程中,大部分的工作是写 HTM L和 CSS 代码。手动编写代码的时候,效率会特别低下,因为需要敲打很多尖括号,尽管一些软件给开发者提供了一些能快速编写代码方式,但是效率提高不是特别的明显。
于是,就有了 Emmet(前身是Zen Coding) 横空出世!
它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。
目前,很多前端开发工具,包括 Webstorm,HBuilder,Dreamweaver ,VSCode 等都已经集成了 Emmet。
没有集成 Emmet 的编辑器都提供了安装插件,如 Sublime Text、Eclipse/Aptana、Notepad++等。
关于webstorm的 Emmet 快捷键,网上有,但是没有一个总的集合。
基于我自己的使用 Webstorm 的经验,特写此文,总结一下 Emmet 的快捷方式,也给新手做一个使用指南。
Emmet 在 webstorm 中,通过简写代码+ tab键就可以生成对应的完整代码。
更多简写方式,可以参考 Emmet 官网:https://docs.emmet.io/cheat-sheet/
一、写标签
1.快速生成 HTML5 网页结构
! + tab
html:5 + tab
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
个人觉得这种方式生成的HTML5框架,比 webstorm 自带的HTML5框架来的更实在。
2. 生成meta
编码设置
meta:utf + tab
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
viewport 是移动端开发必备代码。
meta:vp + tab
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 生成link
引入 CSS 文件。
link
<link rel="stylesheet" href="">
link:css
<link rel="stylesheet" href="style.css">
引入网站小图标。
link:favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
4. id(#),class(.)
div.box
<div class="box"></div>
div#header
<div id="header"></div>
div.box#header
<div class="box" id="header"></div>
div.box.top#header
<div class="box top" id="header"></div>
5. 属性( [ ] )
div[title]
<div title=""></div>
div[title]
<div title=""></div>
button[type=submit][name=login]
<button type="submit" name="login"></button>
button[type=submit name=login]
<button type="submit" name="login"></button>
6. 子节点(>),兄弟节点(+),上级节点(^)
div.box>p
<div class="box">
<p></p>
</div>
div.box+p
<div class="box"></div>
<p></p>
div.box>p+div.small^div.next
<div class="box">
<p></p>
<div class="small"></div>
</div>
<div class="next"></div>
7. 重复( * )、内容( { } )、自增符( $ )
ul.list>li*3
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
ul.list>li{这个是列表}*3
<ul class="list">
<li>这个是列表</li>
<li>这个是列表</li>
<li>这个是列表</li>
</ul>
ul.list>li.item${这个是列表 $ }*3
<ul class="list">
<li class="item1">这个是列表 1</li>
<li class="item2">这个是列表 2</li>
<li class="item3">这个是列表 3</li>
</ul>
ul.list>li{ 内容 $$$}*3
<ul class="list">
<li> 内容 001</li>
<li> 内容 002</li>
<li> 内容 003</li>
</ul>
插入无意义的文字:lorem 其后加上数字就会生成对应数量的无意义的文字,补全文本,方便排版
lorem10
-----------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, exercitationem?
8. 一些特殊情况
(1)类型较多的标签
比如,a,input,其他依次类推。
以下也可以用 标签[属性=值] 的方式去写
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
input
<input type="text">
input:button
<input type="button" value="">
input:submit
<input type="submit" value="">
input:range
<input type="range" name="" id="">
input:radio
<input type="radio" name="" id="">
(2)如果不写标签名,默认就是 div
.box
<div class="box"></div>
(3)自带的子标签是可以省略的
table>.a>.b*2
<table>
<tr class="a">
<td class="b"></td>
<td class="b"></td>
</tr>
</table>
ul>.item*2
<ul>
<li class="item"></li>
<li class="item"></li>
</ul>
二、写样式
写样式主要秉承的原则,简写就是单词的首字母。
tdn
text-decoration: none;
ovh
overflow: hidden;
如果有数值,直接在后面写就是。
h100px
height: 100px;
非数值的值,就用冒号(:)连接首字母。
bg:n
background: none;
更多的样式简写,大家可以参考 Emmet 官网:https://docs.emmet.io/cheat-sheet/
总的来说,个人觉得要多写,才能熟练。熟练了,工作效率自然就提高了。