【01】emmet系列之基础介绍

　　【02】emmet系列之HTML语法

　　【03】emmet系列之CSS语法

　　【04】emmet系列之编辑器

　　【05】emmet系列之各种缩写

初始化 ：快速编写HTML代码

HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：

  • html:5 或!：用于HTML5文档类型
  • html:xt：用于XHTML过渡文档类型
  • html:4s：用于HTML4严格文档类型
 

子元素嵌套 “>”

 
  1. div>ul>li
输出：
  1. <div>
  2. <ul>
  3. <li></li>
  4. </ul>
  5. </div>
 

兄弟元素 “+”

  1. div+p+bq
输出：
  1. <div></div>
  2. <p></p>
  3. <blockquote></blockquote>
 

向上一级:“^”

 
  1. div+div>p>span+em
输出：
  2. <div></div>
  3. <div>
  4. <p><span></span><em></em></p>
  5. </div>
 
用了"^"后
  1. div+div>p>span+em^bq
输出：
  1. <div></div>
  2. <div>
  3. <p><span></span><em></em></p>
  4. <blockquote></blockquote>
  5. </div>
 
多用几个"^"
 
  1. div+div>p>span+em^^^bq
输出：
  1. <div></div>
  2. <div>
  3. <p><span></span><em></em></p>
  4. </div>
  5. <blockquote></blockquote>
 
 

乘法：“*”

 
*运算符可以定义多少次元素应该被输出：
  1. ul>li*5
 
输出：
  2. <ul>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. </ul>
 

分组：“（）”

 
  1. div>(header>ul>li*2>a)+footer>p
输出：
  1. <div>
  2. <header>
  3. <ul>
  4. <li><a href=""></a></li>
  5. <li><a href=""></a></li>
  6. </ul>
  7. </header>
  8. <footer>
  9. <p></p>
  10. </footer>
  11. </div>
 
或是
  1. (div>dl>(dt+dd)*3)+footer>p
输出：
  1. <div>
  2. <dl>
  3. <dt></dt>
  4. <dd></dd>
  5. <dt></dt>
  6. <dd></dd>
  7. <dt></dt>
  8. <dd></dd>
  9. </dl>
  10. </div>
  11. <footer>
  12. <p></p>
  13. </footer>
 

结合CSS的HTML

 

ID和Class

 
  1. div#header+div.page+div#footer.class1.class2.class3
输出：
  1. <div id="header"></div>
  2. <div class="page"></div>
  3. <div id="footer"class="class1 class2 class3"></div>
 
 

 隐式标签 

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。

在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

下面是所有的隐式标签名称：

  • li：用于ul和ol中
  • tr：用于table、tbody、thead和tfoot中
  • td：用于tr中
  • option：用于select和optgroup中
 
属性：
  1. td[title="Hello world!" colspan=3]
输出
  1. <td title="Hello world!" colspan="3"></td>
 

项目编号$

  1. ul>li.item$*5
输出：
  1. <ul>
  2. <li class="item1"></li>
  3. <li class="item2"></li>
  4. <li class="item3"></li>
  5. <li class="item4"></li>
  6. <li class="item5"></li>
  7. </ul>
 
 
或是
  1. ul>li.item$$$*5
输出：
  1. <ul>
  2. <li class="item001"></li>
  3. <li class="item002"></li>
  4. <li class="item003"></li>
  5. <li class="item004"></li>
  6. <li class="item005"></li>
  7. </ul>
 
 

改编号的基础和方向

 
  1. ul>li.item$@-*5
输出:
  1. <ul>
  2. <li class="item5"></li>
  3. <li class="item4"></li>
  4. <li class="item3"></li>
  5. <li class="item2"></li>
  6. <li class="item1"></li>
  7. </ul>
 
item3到item7
  1. ul>li.item$@3*5
输出：
  1. <ul>
  2. <li class="item3"></li>
  3. <li class="item4"></li>
  4. <li class="item5"></li>
  5. <li class="item6"></li>
  6. <li class="item7"></li>
  7. </ul>
 
item7到item3
  1. ul>li.item$@-3*5
输出：
  1. <ul>
  2. <li class="item7"></li>
  3. <li class="item6"></li>
  4. <li class="item5"></li>
  5. <li class="item4"></li>
  6. <li class="item3"></li>
  7. </ul>
 
 

文本：“{}”

 
  1. a{Click me}
输出：
  1. <a href="">Click me</a>
 
  1. <!-- a{click}+b{here}-->
  2. <a href="">click</a><b>here</b>
  4. <!-- a>{click}+b{here}-->
  5. <a href="">click<b>here</b></a>
 
更加复杂的
  1. p>{Click}+a{here}+{ to continue}
  2. ...produces
  4. <p>Click<a href="">here</a> to continue</p>
 
 
  1. p{Click}+a{here}+{ to continue}
输出：
  1. <p>Click</p>
  2. <a href="">here</a> to continue

 

注意：当{}作为单独的一个操作符使用时，a{click}和a>{click}将生成相同的标签，但当使用了多个，或用了其它操作符时将会生成不同的标签：

  1. <!-- a{click}+b{here}-->
  2. <a href="">click</a><b>here</b>
  4. <!-- a>{click}+b{here}-->
  5. <a href="">click<b>here</b></a>
 

生成Lorem ipsum文本 

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，比如lorem10，将生成： 
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Libero delectus.
如果要生成标题呢，只需减少单词的数量，比如：lorem4将生成下面的标题：
  1. Lorem ipsum dolor sit.
 

无效的写法：

当你熟悉了emmet的缩写语法，你可能需要使用一些格式（比如加空格），使您的缩写更具可读性。 例如：
 
  1. (header > ul.nav > li*5)+ footer
But it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.（但是这不会有用，因为空格是表示emmet停止解析的一个停止标志）
 
按Tab键生成HTML/CSS代码时需要光标停靠在Emmet代码的后面，不能有空格，Emmet代码之前也不能有空格，不然只会生成一个tab制表符。如果光标在Emmet代码内部任意位置，按Tab键只会生成光标前面的代码，而后面的Emmet代码还是原样，跟随在生成的HTML/CSS代码后面。
 

技巧篇

1、扩展缩写（Wrap with Abbreviation）Demo

一个非常强大的功能，在当前HTML代码的基础上添加缩写，将向外扩展代码，比如这段代码，光标在p标签上或者外部：

  1. <div id="page">
  2. <p>Hello world</p>
  3. </div>
 

再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

  1. .wrapper>h1{Title}+.content
 

将得到：

  1. <div id="page">
  2. <div class="wrapper">
  3. <h1>Title</h1>
  4. <div class="content">
  5. <p>Hello world</p>
  6. </div>
  7. </div>
  8. </div>
 
    2、把文本转换成HTML标签

当客户给我们提供了一个文本文档，把标题复制过来，比如：

  1. 首页
  2. 公司简介
  3. 公司动态
  4. 关于我们
  5. 联系我们
 

转换成导航，选择文本，再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

  1. nav>ul.nav>li.nav-item$*>a
 

将得到：

  1. <nav>
  2. <ul class="nav">
  3. <li class="nav-item1"><a href="">首页</a></li>
  4. <li class="nav-item2"><a href="">公司简介</a></li>
  5. <li class="nav-item3"><a href="">公司动态</a></li>
  6. <li class="nav-item4"><a href="">关于我们</a></li>
  7. <li class="nav-item5"><a href="">联系我们</a></li>
  8. </ul>
  9. </nav>
 

注意，导航中有5个菜单，这里不需要在li标签后面使用*5，只需使用单独的操作符*就可以。

3、删除文本中的列表标记

word文档中的文本很多都是列表块，比如：

  1. 1.首页
  2. 2.公司简介
  3. 3.公司动态
  4. 4.关于我们
  5. 5.联系我们
 

在编写HTML代码又不需要，Emmet让我们可以删除文本中的标记，在上一功能的缩写的基础代码的后面添加|t就可以删除文本中的标记:

  1. nav>ul.nav>li.nav-item$*>a|t
 

最终得到的HTML代码与上面的效果是一样的，你可以试试！

4、控制文本的输出位置

默认情况下，用Emmet把文本转换为HTML代码时，使用$#操作符Emmet可以将文本输出到多个元素中，而$#平上Emmet缩写语法中的一部分，所以得将$#放在属性值[]或文本{}操作符中。

以上面的导航文本为例，在Enter Wrap Abbreviation中输入：

  1. ul>li[title=$#]*>{$#}+img[alt=$#]
 

将得到：

  1. <ul>
  2. <li title="首页">首页<img src="" alt="首页"></li>
  3. <li title="公司简介">公司简介<img src="" alt="公司简介"></li>
  4. <li title="公司动态">公司动态<img src="" alt="公司动态"></li>
  5. <li title="关于我们">关于我们<img src="" alt="关于我们"></li>
  6. <li title="联系我们">联系我们<img src="" alt="联系我们"></li>
  7. </ul>
 

5、分解与添加标签（Split/Join Tag）Demo

光标在标签上时，按ctrl+j，可以将标签：

  1. <div></div>
 

转换为

  1. <div />
 

标签，反之亦然。当div中有内容时，使用这一功能一样会转换成上一标签，其中的内容也将删除，所以使用的时候我们也需要注意。

6、选择匹配标签（Match Tag Pair）Demo

在我们编写HTML代码时，需要选择开始标签到闭合标签中的代码，一般我们就用鼠标框选，虽然不是太麻烦，但Emmet为我们提供了更加方便、快捷的功能，扩大与缩少选择。

在鼠标光标处按快捷键ctrl+d，将会选择光标所在标签范围内的所有内容，多次运行将扩大选择。有扩大就有缩小，快捷键：crtl+shift+d，多次运行将缩小选择范围。

7、转到匹配的标签（Go to Matching Pair）Demo

在开始标签与闭合标签中跳转，快捷键：ctrl+t。在编写大型HTML文件时，总是找不到匹配的闭合标签，Emmet提供的这一功能就可以方便的为我们在开始与闭合标签中轻松地跳转。

8、跳转到文本编辑点（Go to Edit Point）Demo

这个功能适合在标记之间、空属性和空的文章标签中进行上下跳转，比如title、a、li、href、src等等需要输入内容的标题中。上一个，下一个编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。

9、添加与删除注释（Toggle Comment）Demo

之前在添加注释时都是一个符号一个的敲出来的，真有点辛苦，也很烦。Emmet提供的注释开关功能太棒了，只需使用ctrl+/快捷键就可以添加与删除注释，不过其注释的范围是以行为单位，在HTML和CSS代码中都可以使用。

10、移除标签（Remove Tag）Demo

在一些大型的HTML代码中，有时标签嵌套的太多，通过Emmet移除标签这一功能，快速的移除多余的匹配的开始标签与闭合标签，快捷键：ctrl+k。

11、更新图片大小（Update Image Size）Demo

很多时候在编写HTML代码中的img标题与CSS样式中的background-image时，需要知道图片的宽度与高度，总是在电脑中找到图片查看其尺寸，浪费时间又很不爽。而Emmet为我们提供这一功能，只需将光标移动到img或background-image标签上，按下ctrl+shift+u，Emmet会自动读取图片的尺寸并添加。

前提是引用的图片地址正确且存在，而且路径中不能有中文，必需是英文字符，不然把键盘敲烂也不会有反应。

12、数字递增/递减（Increment/Decrement Number）Demo

数字递增/递减，可以以0.1、1和10三个值进行递增/递减，快捷键分别是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。

13、数学计算表达式（Evaluate Math Expression）Demo

有了Emmet在HTML和CSS文件中都可以进行简单的数字运算，神奇了，输入4*8再按ctrl+shift+y，Emmet能给出最终的结果。

14、将图片编译成data:URL模式（Encode/Decode Image to data:URL）Demo

data:URL模式，是利用base64编码把图片数据翻译成标准ASCII字符，在本地直接绘制图片，不是从服务器加载，减小HTTP请求，从而提高网页的加载速度。

将图片转换成data:URL模式，Emmet为我们提供的最简便、快速的方法，将光标放在img或background-image标签的图片上，按ctrl+shift+b快捷键，完美的转换。

 

【02】emmet系列之HTML语法的更多相关文章

  1. 【03】emmet系列之CSS语法

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写   单位: 有几个常用值别 ...

  2. 【05】emmet系列之各种缩写

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 各种缩写   缩写:! & ...

  3. 【04】emmet系列之编辑器

     [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 前端开发人员,常用的是s ...

  4. 【01】emmet系列之基础介绍

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 相关网址 官网:http: ...

  5. emmet 系列（1）基础语法

    emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...

  6. openresty开发系列15--lua基础语法4表table和运算符

    openresty开发系列15--lua基础语法4表table和运算符 lua中的表table 一)table (表)Table 类型实现了一种抽象的"关联数组".即可用作数组,也 ...

  7. openresty开发系列14--lua基础语法3函数

    openresty开发系列14--lua基础语法3函数 一)function (函数) 有名函数: optional_function_scope function function_name( ar ...

  8. openresty开发系列13--lua基础语法2常用数据类型介绍

    openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...

  9. Emmet 生成 HTML 的语法

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

随机推荐

  1. Qt事件系统之三：键盘事件

    QKeyEvent类用来描述一个键盘事件.当键盘按键被按下或者被释放时,键盘事件便会被发送给拥有键盘输人焦点的部件. QKeyEvent的key()函数可以获取具体的按键,对于Qt中给定的所有按键,可 ...

  2. [SDOI2016]墙上的句子

    题目描述 考古学家发现了一堵写有未知语言的白色墙壁,上面有一个n行m列的格子,其中有些格子内被填入了某个A至Z的大写字母,还有些格子是空白的. 一直横着或竖着的连续若干个字母会形成一个单词,且每一行的 ...

  3. Activity状态图、生命周期图（超详细），onSaveInstanceState只保存、恢复基本ui数据，持久数据不在这里保存。

    1.Activity状态图 2.Activity生命周期简图 启动Activity: onCreate()—>onStart()—>onResume(),Activity进入running ...

  4. Vue自定义过滤器格式化数字三位加一逗号

    <template> <div class="index-compont"> <div class="totalCount"> ...

  5. 187 Repeated DNA Sequences 重复的DNA序列

    所有DNA由一系列缩写为A,C,G和 T 的核苷酸组成,例如:“ACGAATTCCG”.在研究DNA时,识别DNA中的重复序列有时非常有用.编写一个函数来查找DNA分子中所有出现超多一次的10个字母长 ...

  6. Webform 内置对象 Response对象、Request对象，QueryString

    Request对象:获取请求Request["key"]来获取传递过来的值 QueryString:地址栏数据传递 ?key=value&key=value注意事项:不需要 ...

  7. 微信轻松接入QQ客服

    一直以来,大家都苦恼怎么实现微信公众帐号可以接入客服,也因此很多第三方接口平台也开发客服系统CRM系统,不过不是操作复杂就是成本太高.今天分享一个低成本又简便的方法,让你的公众帐号接入QQ客服.下面介 ...

  8. spring 配置 shiro rememberMe

    1.shiro 提供记住我的功能,当将form表单中name="rememberMe" 的value设为true或者登陆的token中.token.setRememberMe(tr ...

  9. 一台机器运行多个JBoss多实例

    JBossXMLJVMTomcat应用服务器  我们经常会遇到这种情况,有时候希望在同一台机器上部署若干个JBoss实例,上面运行不同的应用程序,这样的话无论由于什么原因需要对某个JBoss实例进行关 ...

  10. SQL——时间戳

    mysql 低版本,date.datetime.timestamp 无法精确到毫秒 可以舍弃时间类型字段,用 bigint 来代替,如果用字符串类型代替,还是比较担心排序的时候只是根据第一个字母进行排 ...