emmet使用方法.docx

安装emmet：packages安装下面方法适用于 sublime text 3。1、安装 Package Ctrol： 使用 ctrl + 打开控制台，输入以下代码：import urllib.request,os; pf = Package Control.sublime-package; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler() ); open(os.path.join(ipp, pf), wb).write(urllib.request.urlopen( / + pf.replace( ,%20).read()2、在 Package ctrol 中选择 Install package；3、搜索 emmet 并安装。使用 Emmet 生成 HTML 的语法详解生成 HTML 文档初始结构生成带有 id 、class 的 HTML 标签生成后代：生成兄弟：+生成上级元素：重复生成多份：*生成分组：()生成自定义属性：attr对生成内容编号：$生成文本内容：不要有空格Powered by TOC在上篇文章前端开发神器 Emmet 介绍中，我简单的介绍了一下 Emmet ，并且用了一句指令迅速生成了一大片 HTML 代码。本文，就会介绍 Emmet 的 HTML 语法，看完之后，你就会看懂并且写出那句代码了。现在，打开你的 ST2 然后新建一个 HTML 文档，跟着文章，即时输入对应的指令然后亲自尝试一下！生成 HTML 文档初始结构HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（当然是英文符号），然后摁下 TAB 键，就会发现生成了下面的结构： Document这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构，那么输入指令 html:xt 即可生成如下结构： DocumentEmmet 会自动把 doctype 给你补全了，怎么样，这样的功能会不会让你动心？简单总结一下常用的 HTML 结构指令：html:5 或者 ! 生成 HTML5 结构html:xt 生成 HTML4 过渡型html:4s 生成 HTML4 严格型生成带有 id 、class 的 HTML 标签Emmet 的语法有点类似 CSS 的语法，生成 id 为 aaa 的 div 标签，我们只需要编写下面指令：#aaaEmmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签，我们需要编写下面指令：span.bbb然后就生成了对应的结构。同理，如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签，我们可以这样写：ul#ccc.ddd很简单吧？比你用手写 id 、class 方便多了吧生成后代：大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表，而且被 class 为 aaa 的 div 包裹，那么可以使用下面指令：div.aaaulli可以生成如下的结构： 生成兄弟：+上面是生成下级元素，如果想要生成平级的元素，就需要使用 + 号。例如下面指令：div+p+bq就可以生成如下的 HTML 结构：生成上级元素：上级 （Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“”，当使用 divulli 的指令之后，再继续写下去，那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签，那么我需要先用 “” 提升一下层次。例如：divullispan就会生成如下结构： 如果我想相对与 div 生成一个平级元素，那么就再上升一个层次，多用一个“”符号：divullispan重复生成多份：*特别是一个无序列表，ul 下面的 li 肯定不只是一份，通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字：ulli*5这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构，方法类似。生成分组：()用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系，例如：div(headerulli*2a)+footerp这样很明显就可以看出层次关系和并列关系，生成如下结构： 此外，分组还可以很方便的结合上面说的 “*” 符号生成重复结构：(divdl(dt+dd)*3)+footerp生成结构： 生成自定义属性：attra 标签中往往需要附带 href 属性和 title 属性，如果我们想生成一个 href 为 “” ，title 为“我爱水煮鱼”的 a 标签，可以这样写：ahref= title=我爱水煮鱼其他标签和属性都类似。对生成内容编号：$例如无序列表，我想为五个个 li 增加一个 class 属性值 item1 ，然后依次递增从 1-5，那么就需要使用 $ 符号：ulli.item$*5这样就生成了如下结构： $ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个 $：ulli.item$*5输出： 只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会会了，我们也可以在 $ 后面增加 - 来实现倒序排列：ulli.item$-*5生成如下结构： 同样，我们也可以使用 N 指定开始的序号：ulli.item$3*5这样就会从 3 开始排序，生成如下代码： 配合上面倒序输出，可以这样写：ulli.item$-3*5生成的就是以 3 为底倒序： 生成文本内容：上面讲解了如何生成 HTML 标签，那里面的内容呢？当然也可以生成了：ahref=点击这里到 我爱水煮鱼这样就生成了一个到我爱水煮鱼的超链接了。在生成内容的时候，特别要注意前后的符号关系，虽然 aClick me 和 aClick me 生成的结构是相同的，但是加上其他的内容就不一定了，例如：clickhereclick+bhere -clickhere这样就生成了完全不同的结构，注意这些小细节哦。不要有空格在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句：(header ul.nav li*5) + footer而去掉空格之后，就可以正常执行生成结构了。HTML 语法部分说完了，现在回头看看第一篇文字，你是否已经看懂了那一串指令？下一篇将会讲解快速编写 CSS 的技巧。Emmet在css中的应用：首先，Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性，我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示：你不妨在编写 CSS 的时候，留意一下 ST2 提供了哪些属性的缩写方法，这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能，请往下看。简写属性和属性值如果你想生成 width:100px; 你只需要输入 w100 就可以了，因为 Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。默认的属性值单位是 px ，你可以在值的后面紧跟字符生成单位，可以是任意字符。例如，w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位，如果你紧跟属性值后面的字符是 p ，那么将会生成 width:100%; 这样的语句，其中 p 表示百分比单位。与此类似的还有：e em;x ex。例如 margin 这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为 Emmet 的指令中是不允许空格的。例如使用 m10-20 这条命令可以生成 margin: 10px 20px; 这样一条语句。如果你想生成负值，多加一条横杠即可。需要注意的是，如果你对每个属性都指定了单位，那么不需要使用横杠分割。例如使用 m10ff20ff 这条命令可以生成 margin: 10ff 20ff; 这条语句，如果你在 20ff 前面加了横杠的话，20ff 就会变成负值了。如果你想一次生成多条语句，可以使用 + 连接两条语句，例如使用h10p+m5e可以生成 height: 10%;margin: 5em; 这两条语句。颜色值也是可以快速生成的，例如c#3color: #333;，更复杂一点的，使用bd5#0s可以生成border: 5px #000 solid;这样一句。下面是规则：#1 #111111#e0 #e0e0e0#fc0 #ffcc00生成 !important 这条语句也当然很简单，只需要一个 ! 就可以了。增加额外的选项使用 f 即可生成 CSS3 中的 font-face 的代码结构：font-face font-family:;src:url();但是这个结构太简单，不包含一些其他的 font-face 的属性，诸如 background-image、 border-radius、 font、font-face、 text-outline、 text-shadow 等属性，我们可以在生成的时候输入 + 生成增强的结构，例如我们可以输入 f+ 命令，即可输出选项增强版的 font-face 结构：font-face font-family: FontName; src: url(FileName.eot); src: url(FileName.eot?#iefix) format(embedded-opentype), url(FileName.woff) format(woff), url(FileName.ttf) format(truetype), url(FileName.svg#FontName) format(svg); font-style: normal; font-weight: normal;增加实验性前缀（Vendor Prefixes）CSS3 等现在还没有出正式的 W3C 规范，但是很多浏览器已经实现了对应的功能，仅作为测试只用，所以在属性前面加上自己独特的实验性前缀，不同的浏览器只会识别带有自己规定前缀的样式。然而为了实现兼容性，我们不得不编写大量的冗余代码，而且要加上对应的前缀。使用 Emmet 可以快速生成带有前缀的 CSS3 属性。ST2 已经内置了一些常见的需要实验性前缀的 CSS3 属性，例如输入 trf 会弹出提示，然后敲击回车键即可生成。而 Emmet 增强了这个功能。在任意字符前面加上一条横杠（-），即可生成该属性的带前缀代码，例如输入 -foo-css，会生成：-webkit-foo-css: ;-moz-foo-css: ;-ms-foo-css: ;-o-foo-css: ;foo-css: ;虽然 foo-css 并不是什么属性，但是照样可以生成。此外，你还可以详细的控制具体生成哪几个浏览器前缀或者先后顺序，使用-wm-trf即可生成：-webkit-transform: ;-moz-transform: ;transform: ;可想而知，w 就是 webkit 前缀的缩写，m 是 moz 前缀缩写，s 是 ms 前缀缩写，o 就是 opera 浏览器前缀的缩写。如果使用-osmw-abc即可生成：-o-abc: ;-ms-abc: ;-moz-abc: ;-webkit-abc: ;abc: ;生成渐变背景CSS3 中新增加了一条属性linear-gradient使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂，而且需要添加实验性前缀，无疑需要生成大量代码。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用lg(left, #fff 50%, #000)可以直接生成：background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000);background-image: -webkit-linear-gradient(left, #fff 50%, #000);background-image: -moz-linear-gradient(left, #fff 50%, #000);background-image: -o-linear-gradient(left, #fff 50%, #000);background-image: linear-gradient(left, #fff 50%, #000);直接帮你生成好了浏览器前缀。Emmet 的还有一些其他的强大功能，将在后面继续讲解介绍，尽请关注。Emmet高级功能介绍：生成 Lorem IpsumLorem Ipsum表示一段随机看不懂的文字。Lorem Ipsum的文字让人看不懂，这样才能忽略内容的含义而专注内容的排版，作为测试数据填充用的。使用 Emmet 生成Lorem Ipsum文本非常简单，只需要使用lorem这一条命令即可，敲击 Tab 键之后，就会生成如下一段文字：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.Emmet 的 lorem 命令不仅仅只有输出这么一段文字这样一个简单的功能，它既然作为测试数据，可以加上参数指定要输出的字符数量。例如，我们如果想输出一个十个单词的 h1 标题，我们就可以使用如下命令h1lorem10。但是这项功能对于使用中文的网页测试来说，好像没有多大用处，毕竟中文和英语单词的排版是不同的。跳转编辑区域写代码一般要用到两只手，有时候需要跳转到别的代码段等，你可以使用键盘方向键也可以使用鼠标。但是这都有缺陷，使用键盘方向键移动太慢了，而且需要按住 shift 键和方向键选中代码；使用鼠标的话，手就必须离开键盘，来回也会浪费一些时间。而 Emmet 提供了一个很实用的功能，就是整块的跳转。为了方便理解，先看一下官方的 Demo 动画。这个功能，使用Shift+Ctrl+.和Shift+Ctrl+,分别向下或者向上移动，选取的是一整块，先从标签开始，再是整个属性，再是属性值。这样，比键盘的方向键移动高效多了。增加图片的尺寸大小有时候，我们需要给 标签增加对应的 width、height 属性来表示图片的大小或者给通过 background-image 属性引用的背景图片一个尺寸大小。通常的做法是看一下图片的尺寸，然后加上，而现在，你只需要将光标移动到代码段，摁下Ctrl+U即可让 Emmet 自动读取图片的尺寸添加上。前提条件是图片比较存在并且正确引用进来了。如果是针对 标签的，会在后面加上 width、height 属性，如果是 background 引入的，会在下面加上 width、height 的 CSS 属性。可以看一下官方的 Demo。但是这里有个问题，官方的 Demo 中，实现这个功能的快捷键是Shift+Ctrl+U但实际使用中，这个快捷键不起作用。关于 Emmet 的 Mac、Win 下的快捷键，以这个页面上的为准：/sergeche/emmet-sublime#available-actions。更新 CSS 的属性值我们在写 CSS 的时候，有时候为了 hack 写很多带有前缀的属性。例如：-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);如果我们突然想修改一下旋转的角度值，那么我们就需要依次修改或者按住 Ctrl 多个选中进行修改。使用 Emmet 的话，就方便多了，我们只需要修改其中一个，然后摁下Shift+Ctrl+R键即可更新其他的相关属性值。将图片资源转换成 data url 形式data url 图片具有很多优点，在某些情况下比较实用，但是将图片转换成 data url 格式就比较麻烦了，得使用一些工具。而在 Emmet 中，将光标移动到 background: url() 中的图片位置的地方，按下Ctrl+即可将图片编码成 data url 格式。当然，前提条件是图片资源引用正确。除此之外，Emmet 还有一些其他的诸如快速跳转、计算等等常用功能，在这里只是介绍了几个更常用的功能，有兴趣的朋友可以打开Emmet Action 的官方文档看一下 Demo，这里不再赘述。Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：Zen coding下的编码演示去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。一、快速编写HTML代码1. 初始化HTML文档需要包含一些固定的标签，比如、等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： html:5 或!：用于HTML5文档类型 html:xt：用于XHTML过渡文档类型 html:4s：用于HTML4严格文档类型2. 轻松添加类、id、文本和属性连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：连续输入类和id，比如p.bar#foo，会自动生成：Html代码1. 下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1foo和ahref=#，就可以自动生成如下代码：Html代码1. foo2. 3. 嵌套现在你只需要1行代码就可以实现标签的嵌套。 ：子元素符号，表示嵌套的元素 +：同级标签符号 ：可以使该符号前的标签提升一行效果如下图所示：4. 分组你可以通过嵌套和括号来快速生成一些代码块，比如输入(.fooh1)+(.barh2)，会自动生成如下代码：Html代码1. 2. 3. 4. 5. 6. 5. 隐式标签声明一个带类的标签，只需输入div.item，就会生成。在过去版本中，可以省略掉div，即输入.item即可生成。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在中输入.item，就会生成。下面是所有的隐式标签名称： li：用于ul和ol中 tr：用于table、tbody、thead和tfoot中 td：用于tr中 option：用于select和optgroup中6. 定义多个元素要定义多个元素，可以使用*符号。比如，ulli*3可以生成如下代码：Html代码1. 2. 3. 4. 5. 7. 定义多个带属性的元素如果输入 ulli.item$*3，将会生成如下代码：Html代码1. 2. 3. 4. 5. 二、CSS缩写1. 值比如要定义元素的宽度，只需输入w100，即可生成Css代码1. width:100px;除了px，也可以生成其他单位，比如输入h10p+m5e，结果如下：Css代码1. height:10%;2. margin:5em;单位别名列表： p 表示% e 表示 em x 表示 ex2. 附加属性可能你之前已经了解了一些缩写，比如 f，可以生成：Css代码1. font-face2. font-family:;3. src:url();4. 一些其他的属性，比如background-image、border-radius、font、font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入f+，将生成：Css代码1. font-face2. font-family:FontName;3. src:url(FileName.eot);4. src:url(FileName.eot?#iefix)format(embedded-opentype),5. url(FileName.woff)format(woff),6. url(FileName.ttf)format(truetype),7. url(FileName.svg#FontName)format(svg);8. font-style:normal;9. font-weight:normal;10. 3. 模糊匹配如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：Css代码1. overflow:hidden;4. 供应商前缀如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：Css代码1. -webkit-transform:;2. -moz-transform:;3. -ms-transform:;4. -o-transform:;5. tr