Sublime Text与Emmet插件开发技巧教程.pdfVIP

Emmet前端开发技巧分享 Emmet和HTML(emmet在sublime上的效果) 为文本编辑器安装Emmet插件，一旦写好所写之后，按一下tab键就能生成你所请求的代码。以下为 几个实例。 1. 输入：ulliimg+p 生成： 2. 创建初始文档 1 html:5或!：HTML5文档类型 2 html:xt：XHTML过渡型文档类型 3 html:xs：XHTML严格型文档类型 4 html:4t：HTML4过渡型文档类型 5 html:4s：HTML4严格型文档类型 3. 子元素：使用运算符生成彼此嵌套的元素 输入 生成 4. 相邻元素+：使用+运算符可以用来生成彼此相邻的元素： 输入 生成 5. 返回上一层^：使用^运算符，可以让你的代码返回上一层。当你使用嵌套元素时，想让后面的回到 上一层，那么这个方法很适用。 输入 生成 6. 乘法*：一次性生成多个相同的元素，还可以通过$符号做递增，通过$@符号做递减，通过$@3*5从 第三个开始命名 输入 生成 输入 生成 输入 生成 输入 生成 输入 生成 7. 组合：更有效的利用嵌套。在Emmet 中可以通过()将一个块组合在一起 输入 生成 输入 生成 输入 生成 8. 快速添加类名、ID、文本和属性： 1 使用E#ID添加ID名 2 使用E.class添加类名 3 使用E[attr]添加属性 4 使用E{text}添加文本 输入 生成 输入 生成 输入 生成 输入 生成 输入 生成 9. 省略标签名：在Emmet 中可以省略标签名，默认情况下，如.item和div.item起到的作用是一致的 在实际中还有几种情况： 1 ul和 ol中输入指的是li 2 table、tbody、thead和tfoot指的是tr 3 tr中指的是td 4 select和optgroup指的是option 输入 生成 输入 生成 输入 生成 输入 生成 输入 生成 输入 生成 10. Emmet和CSS(emmet在sublime上的效果) 1) 属性：Emmet定义了所有已知的CSS属性和缩写。 所以border-bottom缩写是bdb，border-top缩写是bdt。正如下面的示例font-size缩写是f ： 输入 生成 2) 属性值：fz