ememt的详细使用方法和如何快速使用方法

emmet简介

随着时代的发展，到达了21世纪的今天，Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，而且作为一款插件能够大部分的代码编辑器，文章后面列出了支持的代码编辑器类型。现代的代码以高效和快速的业绩为代表，各大网络公司也是费劲全力提升编程的效率，你是否也在为效率而感到担忧那。

由此而由zen coding的后代emmet诞生了，emmet极大的提高的html结构框架的搭建和css的代码编程效率，下面让我们一起来学习这个可以极大提高html结构框架搭建和css的代码编程的插件----emmet。

快速编写html代码

每个命令的结束都需要按下tab键来生成代码框架和css样式属性。每个命令输完后按下Tab键即可快速得到代码

新建一个有emmet插件文件，输入“！”或 “html：5”就可以生成基本框架。

基本语法

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

命令：nav>ul>li

nav>ul>li 按下tab<nav><ul><li></li></ul></nav>

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

命令：div+p+bq 得到代码如下：

div+p+bq 按下tab<div></div><p></p><blockquote></blockquote>

3、生成上级元素：^ 表示^{后面的元素与}前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

命令：div+div>p>span+em^bq 得到代码如下：

div+div>p>span+em^bq  按下tab<div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>

命令：div+div>p>span+em^^input 得到代码如下：

div+div>p>span+em^^input<div></div><div><p><span></span><em></em></p></div><input type="text">

4.生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在

中输入.item，就会生成<li class=“item”》《/li》

命令：.item得到代码如下：

.item   按下tab<div class="item"></div>

可以生成多个class值

命令：.item.war 得到打码如下

.item.war 按下tab<div claass="item war"></div>

5、生成ID：#

命令：#container 得到代码如下：

<div id="container"></div>

6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

命令：(.foo>h1)+(.bar>h2) 得到代码如下：

<div class="foo"><h1></h1>
</div>
<div class="bar"><h2></h2>
</div>

7、重复生成多份：* *号后面是想重复生成的份数

命令：ul>li*5 得到代码如下：

<ul><li></li><li></li><li></li><li></li><li></li>
</ul>

8、对生成内容依次编号：$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

命令：ul>li.item$*5 得到代码如下：

<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li>
</ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
命令：ul>li.item$@-*5 得到代码如下：

<ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li>
</ul>

同样，我们也可以使用 @N 指定开始的序号

命令：ul>li.item$@3*5 得到代码如下：

<ul><li class="item3"></li><li class="item4"></li><li class="item5"></li><li class="item6"></li><li class="item7"></li>
</ul>

三、emmet在HTML与CSS中的应用

emmet除了能快速编辑出上面的代码以外，还有一些其他代码也可快速编辑，具体的、全面的快速编辑方式，还请浏览emmet官方文档（有详细说明哦！）

下面只列出一些常用的快速编辑方式

命令：link


<link rel="stylesheet" href="" />

命令：script:src

<script src=""></script>

命令：img


<img src="" alt="" />

命令：inp

<input type="text" name="" id="" />

命令：input:p


<input type="password" name="" id="">

命令：btn 结果：

<button></button>

命令：btn：s 结果：<button type="submit"></button>

命令：btn：r 结果：<button type="reset"></button>

CSS中缩写

单位：

p 表示%
e 表示 em
r表示 rem
宽度：

命令：w100 结果：width:100px; 默认单位px

命令：w100p 结果：width:100%;

高度：

命令：h100r 结果：height: 100rem;

颜色：

命令：c#3 结果： color: #333;

命令：c#e0 结果： color: #e0e0e0;

命令：c#fc0 结果： color: #ffcc00;

CSS3前缀：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
命令：-wmso-transform

结果：

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

属性模糊匹配：

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

所以在平时使用的时候可留意emmet的提示

命令：h10p+m5e 结果：height: 10%;margin: 5em;

到此结束

emmet的详细使用方法相关推荐

pythongui界面实例带注释_python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例...
PyQt5状态栏控件QStatusBar简介 MainWindow对象在底部保留有一个水平条,作为状态栏(QstatusBar),用于显示永久或临时的状态信息 QStatusBar类中的常用方法方法 ...
python表格控件_python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例...
PyQt5表格控件QTableView简介在通常情况下,一个应用需要和一批数据进行交互,然后以表格的形式输出这些信息,这时就需要用到QTableView类了,在QTableView中可以使用自定义的 ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
linux怎么离线安装gcc文件夹,CentOS下离线安装gcc环境，图文详细，方法全面
CentOS下离线安装gcc环境,图文详细,方法全面下载方式1:如果有网的虚拟机还没有安装,可以直接 yum install --downloadonly --downloaddir=/root/ ...
[转]NUnit详细使用方法
本文转自:http://www.cnblogs.com/confach/archive/2005/06/20/177817.html 原文如下: ---------- NUnit2.0详细使用方法注 ...
qpython3可视图形界面_python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法...
QWidget基本介绍基础窗口控件QWidget类是所有用户界面对象的基类,所有的窗口或者控件都直接或者间接的继承自QWidget类. 窗口坐标系统 PyQt使用统一的坐标系统来定位窗口控件的位置和 ...
tortoise清理本地分支_TortoiseGit操作本地仓库的详细使用方法
TortoiseGit 操作本地仓库的详细使用方法 Git 的使用越来越广泛, 不过默认使用命令行进行操作, 这就对那些习惯使用图形化界面的人造成了一定的困难, TortoiseGit 是 Git 在 ...
CCS6.2超详细使用方法
CCS6.2超详细使用方法本文介绍了如何安装CCS6.2.一步一步的建立工程.以及建立工程以后编译.调试.如何方便快捷有效率的使用CCS6.2. 一. 简介本篇介绍CCS6.2的安装与使用操 ...
计算机可移动磁盘无法显示图片,手机插电脑不显示可移动磁盘的详细解决方法...
有时候因为某些原因,我们需要将手机上的文件转移到电脑上,但是在操作的过程中,却遇到了手机插电脑不显示可移动磁盘的情况,不知道如何处理很是苦恼.所以针对这一问题,今天本文为大家整理的就是关于手机插电脑不 ...

emmet的详细使用方法

ememt的详细使用方法和如何快速使用方法

emmet简介

快速编写html代码

基本语法

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

3、生成上级元素：^ 表示^{后面的元素与}前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

4.生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在

5、生成ID：#

6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

7、重复生成多份：* *号后面是想重复生成的份数

8、对生成内容依次编号：$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

到此结束

emmet的详细使用方法相关推荐

最新文章

热门文章

emmet的详细使用方法

ememt的详细使用方法和如何快速使用方法

emmet简介

快速编写html代码

基本语法

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

3、生成上级元素：^ 表示后面的元素与前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

4.生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在

5、生成ID：#

6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

7、重复生成多份：* *号后面是想重复生成的份数

8、对生成内容依次编号：$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

到此结束

emmet的详细使用方法相关推荐

最新文章

热门文章

3、生成上级元素：^ 表示^{后面的元素与}前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级