【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. 《windows核心编程系列》二十一谈谈基址重定位和模块绑定

    每个DLL和可执行文件都有一个首选基地址.它表示该模块被映射到进程地址空间时最佳的内存地址.在构建可执行文件时,默认情况下链接器会将它的首选基地址设为0x400000.对于DLL来说,链接器会将它的首 ...

  2. Lomsat gelral cf-600e

    http://codeforces.com/contest/600/problem/E 暴力启发式合并就行了 提示:set的swap的复杂度是常数,这方面可以放心 我先打了一个很naive的算法 #i ...

  3. ACM_跳坑小能手（暴力）

    跳坑小能手 Time Limit: 2000/1000ms (Java/Others) Problem Description: GDUFE-GAME现场有一个游戏场地人头窜动,围观参与游戏的学生在场 ...

  4. 209 Minimum Size Subarray Sum 大于给定和最短子数组

    给定一个含有 n 个正整数的数组和一个正整数 s , 找到一个最小的连续子数组的长度,使得这个子数组的数字和 ≥  s .如果不存在符合条件的子数组,返回 0.举个例子,给定数组 [2,3,1,2,4 ...

  5. MyEclipse开启Jquery智能提示

    myeclipse 增加javascript提示和jquery提示等不用安装插件自带功能 (对着需要提示的项目右键,点击properties) 不行的话就得安装插件: http://www.spket ...

  6. 关于表单清空的细节(reset函数或者class="reset"属性)

    在需要清空的表单的情况下, 如果是在页面中 那么就添加属性 class="reset"  也即是 <button class="reset" value= ...

  7. joomla建站-双语CMS系统开发的实现

    首先,请确保你的网站安装了你所需的双语语言,详细安装过程见:https://www.cnblogs.com/surfer/p/9619345.html 第一步:设置内容管理 可以按照个人需求进行语言编 ...

  8. Python3 动手自己写谷歌翻译

    本篇为实现谷歌翻译的功能,在编写的时候以为只是一个接口的问题. 没想到的是每次翻译都会触发一次JS的执行,在请求参数中生成一个tk. 文中tk的实现是复用的网上大神的代码生成tk. 好了,不说了直接看 ...

  9. Android学习笔记（七） 布局基础

    一.概念 控件布局方法,就是指控制控件在Activity当中的位置.大小.颜色以及其他控件样式属性的方法.有两种方法可以控制布局: 在布局文件(xxx.xml)中完成控件的布局. 在JAVA代码中完成 ...

  10. [安卓开发板]迅为IMX6 四核Android开发板

    工业级核心板-Android开发板 10层高速PCB设计,充分保证电磁兼容 处理器:开发板默认是四核商业扩展级芯片,可根据用户需求更换单核.双核.工业级.汽车级处理器,批量更省成本. 扩展引脚:320 ...