Fork me on GitHub
魔芋铃
Menu

【02】emmet系列之HTML语法

 

　　【01】emmet系列之基础介绍

 

　　【02】emmet系列之HTML语法

 

　　【03】emmet系列之CSS语法

 

　　【04】emmet系列之编辑器

 

　　【05】emmet系列之各种缩写

 

初始化 ：快速编写HTML代码 


HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： 
123.gif
  • 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>
 
3333.gif
 
或是
  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快捷键，完美的转换。

 

 

posted @ 2015-11-05 15:44  魔芋铃  阅读(947)  评论(2)  编辑  收藏  举报