Web 前端利器Emmet 的HTML用法总结

tutsplus 那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里。

Emmet 简介

Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。

安装Emmet 插件

Emmet只是文本编辑器一个插件,要想让他发挥应用的功能,就得将其安装到你喜欢的文本编辑器中。到目前为止,很多流行的文本编辑器都支持Emmet插件,也就是说很多流行的文本编辑器(如Sublime Text、Notepad++、Adobe Dreamweaver)都可以安装这款插件。

在这里主要介绍一下Sublime Text中安装Emmet 插件的方法,首先确保你已经安装Sublime Text。Jeff 用的是Sublime Text3,方法有两种:

1、直接下载该压缩包,解压后放到“程序包”内(sb中 点击 preferens-浏览程序包 后打开的文件夹)。然后重启Sublime Text 即可。 2、先安装 Package Control,然后搜索找到Emmet 插件安装。

Emmet:HTML用法

Emmet使用定义的缩写来生成元素。他的语法和CSS的选择器非常类似:

ul>li>img+p

一旦你写好缩写之后,按一下tab键(我使用的是Sublime Text编辑器)就能生成你所请求的代码。上面的例子将会产生下面的代码:

<ul> <li> <img src="" alt=""> <p></p> </li> </ul>

早前在《前端开发必备!Emmet使用手册》一文中详列了Emmet生成HTML代码的一些代码示例。接下来,让我们来深入一点了解Emmet语法,来看看如何通过一些更复杂的缩写创建HTML标签。

创建初始文档

任何一个HTML文件,都具有一些默认的文档结构。使用Emmet来创建需要的时间不到一秒。只要输入!html:5,然后点击tab键,你就会看到一个HTML5的doctype默认标签。

  • html:5!:HTML5文档类型
  • html:xt:XHTML过渡型文档类型
  • html:xs:XHTML严格型文档类型
  • html:4t:HTML4过渡型文档类型
  • html:4s:HTML4严格型文档类型

子元素>

使用>运算符可以用来生成彼此嵌套的元素:

section>div>p

上面的代码会生成下面的代码:

<section> <div> <p></p> </div> </section>

相邻元素+

使用+运算符可以用来生成彼此相邻的元素:

section+div+p

上面代码会生成下面的代码:

<section></section> <div></div> <p></p>

返回上一层^

使用^运算符,可以让你的代码返回上一层。当你使用>嵌套元素时,想让后面的回到上一层,那么这个方法很适用。

section>div>p>a^p

这个缩写将两个段落元素都放置在div内,但只有第一个段落里会包含一个链接。

<section> <div> <p><a href=""></a></p> <p></p> </div> </section>

其实这个就相当于:

section>div>(p>a)+p

乘法*

如果你想一次性生成多个相同的元素,比如列表中的li,那么就可以使用乘法运算符*:

ul>li*5

上面代码会生成5个li

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

除了能一次性生成多个相同的标签之外,我们还可以通过$符号做递增;通过$@-符号做递减;通过$@3*5这样的方式从第三个开始命名:

组合

为了更有效的利用嵌套,我们常会制作一些代码片段。在Emmet中你可以通过()将一个块组合在一起,来看一个简单的示例:

ul>(li>a)*3

上面的代码就会生成3个li,而且每个li中套了一个a:

<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>

在我们一个页面中,常会包括页头、主体和页脚三个部分,我们很多时候就可以通过对全们进行一个组合,快速生成有效的代码:

快速添加类名、ID、文本和属性

在Emmet中,还有一个功效,能快速帮助你添加类名、ID、文本和属性。

  • 使用E#ID添加ID名
  • 使用E.class添加类名
  • 使用E[attr]添加属性
  • 使用E{text}添加文本

省略标签名

在Emmet中可以省略标签名,默认情况下,如.itemdiv.item起到的作用是一致的<div></div>。在实际中还有几种情况:

  • ul和 ol中输入指的是li
  • tabletbodytheadtfoot指的是tr
  • tr中指的是td
  • selectoptgroup指的是option

本文转载自http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html 略有修改,感谢原作者。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

day07_01_XML学习笔记

8630
来自专栏Windows Community

Extensions in UWP Community Toolkit - Overview

概述 UWP Community Toolkit  中有一个 Extensions 的集合,它们可以帮助开发者实现很多基础功能,省去自己造轮子的过程,本篇我们先...

400120
来自专栏owent

Vim常用命令

之前有搜集过一些常用的命令脚本,其中有vim的部分。但是vim内置的很多功能那些个命令显然是不够的,而且那些记录的很多也不常用,于是想到专门开一个页面记录vim...

9420
来自专栏salesforce零基础学习

salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇

上一篇介绍了Aura Framework中 Component类的部分方法,本篇将要介绍Event常用的方法。

10010
来自专栏听雨堂

Log4Net与Log2Console配合时中文问题的解决

二者搭配,非常好用,但必须要用log4net.Layout.XmlLayoutSchemaLog4j才能有效果:区分不同的级别,把不同的属性列都显示出来… ...

27070
来自专栏Danny的专栏

机房收费系统——将MSHFlexGrid控件中的数据导出到Excel

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

13920
来自专栏Young Dreamer

html5之histroy浅析

history是HTML5的新特性,我们可以使用它操作这个历史记录堆栈。 (1)history提供了对浏览器历史纪录堆栈的读取,同时实现在访问记录中的前进和后退...

21970
来自专栏CRPER折腾记

React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件

根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio

18910
来自专栏ytkah

excel同时冻结首行和首列怎么操作

  之前ytkah只知道excel可以冻结首行或首列,但还不清楚如何同时冻结excel首行和首列,后面看到小C的报表,问了他才明白怎么操作。   首先,我们先把...

60950
来自专栏强仔仔

利用js实现输入框动态提示信息

为了提高和用户的交互性,现在的输入框往往都采用输入信息自动提示的功能,类似于百度输入框中的提示功能。 设计思路是:在输入框input的组件下面放置一个div,这...

76660

扫码关注云+社区

领取腾讯云代金券