[emmet使用方法.docxVIP

安装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 键，就会发现生成了下面的结构：!doctype htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title/headbody/body/html这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构，那么输入指令 html:xt 即可生成如下结构：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtml xml:lang=enhead meta http-equiv=Content-Type content=text/html;charset=UTF-8 titleDocument/title/headbody/body/htmlEmmet 会自动把 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 class=aaa ul li/li /ul/div生成兄弟：+上面是生成下级元素，如果想要生成平级的元素，就需要使用 + 号。例如下面指令：div+p+bq就可以生成如下的 HTML 结构：div/divp/pblockquote/blockquote生成上级元素：^上级 （Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“”，当使用 divulli