2022年SublimeText与Emmet插件开发技巧教程 .pdf

Emmet 前端开发技巧分享Emmet 和 HTML(emmet在 sublime 上的效果 )为文本编辑器安装Emmet 插件， 一旦写好所写之后，按一下 tab 键就能生成你所请求的代码。以下为几个实例。1.输入： ulliimg+p生成：2.创建初始文档1html:5 或 !：HTML5 文档类型2html:xt ：XHTML过渡型文档类型3html:xs ：XHTML严格型文档类型4html:4t ：HTML4 过渡型文档类型5html:4s ：HTML4 严格型文档类型3.子元素：使用 运算符生成彼此嵌套的元素输入生成4.相邻元素 +：使用 +运算符可以用来生成彼此相邻的元素：输入生成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 5.返回上一层 ：使用 运算符，可以让你的代码返回上一层。当你使用嵌套元素时，想让后面的回到上一层，那么这个方法很适用。输入生成6.乘法 * ：一次性生成多个相同的元素，还可以通过$符号做递增，通过$-符号做递减，通过$3*5 从第三个开始命名输入生成输入生成输入生成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 8 页 - - - - - - - - - 输入生成输入生成7.组合：更有效的利用嵌套。在Emmet 中可以通过 ()将一个块组合在一起输入生成输入生成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 输入生成8.快速添加类名、ID 、文本和属性：1使用 E#ID 添加 ID 名2使用 E.class添加类名3使用 Eattr添加属性4使用 Etext 添加文本输入生成输入生成输入生成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 8 页 - - - - - - - - - 输入生成输入生成9.省略标签名： 在 Emmet 中可以省略标签名，默认情况下，如.item 和 div.item 起到的作用是一致的在实际中还有几种情况：1ul 和 ol 中输入指的是li2table 、tbody 、thead和 tfoot指的是 tr3tr中指的是 td4select和 optgroup指的是 option输入生成输入生成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 8 页 - - - - - - - - - 输入生成输入生成输入生成输入生成10. Emmet 和 CSS (emmet 在 sublime 上的效果 )1) 属性： Emmet 定义了所有已知的CSS 属性和缩写。所以 border-bottom 缩写是 bdb，border-top 缩写是 bdt。正如下面的示例font-size 缩写是 fz：输入生成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 8 页 - - - - - - - - - 2) 属性值： fz18 将输出 font-size:18pxh10p+m5e输入生成3) 单位： CSS 经常使用的单位有px、em、rem、%、ex。那么这些单位在Emmet 中都是可以使用的。在Emmet 中每一个单位都有其缩写形式：1px 默认2p %3e em4r rem5x ex输入生成4) 多个单位： CSS 中的某些属笥，比如margin，允许多个值。在Emmet 中要做到这一点，只需要每个值之间使用破折号(-)。输入生成5) 颜色： 在 Emmet 中使用 #前缀，后面紧跟颜色值，但不同的字符数将会输出不同的十六进制代码。1 111111E0 e0e0e0FC0 FFCC00输入生成!important尽管在 CSS 中!important 并不经常使用，但在Emmet 也带有一定的缩写。添加!就可以自动生成： p0!名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 6) 多属性： 可以使用加号 +运算符来创建多个属性。输入生成输入生成11. 其他(1).模糊匹配如果有些缩写你拿不准，Emmet 会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和 oh，生成的代码是相同的：(2).供应商前缀：如果输入非W3C 标准的 CSS 属性， Emmet 会自动加上供应商前缀，比如 trs-super-foo-w-super-foo-wm-super-foo 。w 表示 -webkit-m 表示-moz-s 表示-ms-o 表示-o-(3).渐变：lg(left, #fff 50%, #000)名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -