webstorm的 Emmet 快捷方式

最新推荐文章于 2024-04-19 15:48:21 发布

stones4zd

最新推荐文章于 2024-04-19 15:48:21 发布

阅读量1.1k

点赞数 9

分类专栏： webstorm 文章标签： webstorm

本文链接：https://blog.csdn.net/weixin_42703239/article/details/107822910

版权

webstorm 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在前端开发的过程中，大部分的工作是写 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/

总的来说，个人觉得要多写，才能熟练。熟练了，工作效率自然就提高了。

stones4zd

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
webstorm的 Emmet 快捷方式

在前端开发的过程中，大部分的工作是写 HTM L和 CSS 代码。手动编写代码的时候，效率会特别低下，因为需要敲打很多尖括号，尽管一些软件给开发者提供了一些能快速编写代码方式，但是效率提高不是特别的明显。于是，就有了 Emmet(前身是Zen Coding) 横空出世！它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。目前，很多前端开发工具，包括 Webstorm，HBuilder，Dre
复制链接

扫一扫

专栏目录