Emmet前端开发技巧分享.doc

Emmet前端开发技巧分享 Emmet和HTML(emmet在sublime上的效果) 为文本编辑器安装Emmet插件，一旦写好所写之后，按一下tab键就能生成你所请求的代码。以下为几个实例。 输入ulliimg+p 生成 创建初始文档 html:5或!：HTML5文档类型 html:xt：XHTML过渡型文档类型 html:xs：XHTML严格型文档类型 html:4t：HTML4过渡型文档类型 html:4s：HTML4严格型文档类型 子元素：使用运算符生成彼此嵌套的元素 输入 生成 相邻元素+：使用+运算符可以用来生成彼此相邻的元素： 输入生成 返回上一层^：使用^运算符，可以让你的代码返回上一层。当你使用嵌套元素时，想让后面的回到上一层，那么这个方法很适用。 输入生成 乘法*：一次性生成多个相同的元素，还可以通过$符号做递增，通过$@-符号做递减，通过$@3*5从第三个开始命名 输入生成 输入生成 输入生成 输入生成 输入生成 组合：更有效的利用嵌套。在Emmet中可以通过()将一个块组合在一起 输入生成 输入生成 输入生成 快速添加类名、ID、文本和属性： 使用E#ID添加ID名 使用E.class添加类名 使用E[attr]添加属性 使用E{text}添加文本 输入生成 输入生成 输入生成 输入生成 输入生成 省略标签名：在Emmet中可以省略标签名，默认情况下，如.item和div.item起到的作用是一致的 在实际中还有几种情况： ul和 ol中输入指的是li table、tbody、thead和tfoot指的是tr tr中指的是td select和optgroup指的是option 输入生成 输入生成 输入生成 输入生成 输入生成 输入生成 Emmet和CSS (emmet在sublime上的效果) 属性：Emmet定义了所有已知的CSS属性和缩写。所以border-bottom缩写是bdb，border-top缩写是bdt。正如下面的示例font-size缩写是fz： 输入生成 属性值：fz18将输出font-size:18px h10p+m5e 输入生成 单位：CSS经常使用的单位有px、em、rem、%、ex。那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式： px→ 默认 p→ % e→ em r→ rem x→ ex 输入生成 多个单位：CSS中的某些属笥，比如margin，允许多个值。在Emmet中要做到这一点，只需要每个值之间使用破折号(-)。 输入生成 颜色：在Emmet中使用#前缀，后面紧跟颜色值，但不同的字符数将会输出不同的??六进制代码。 ＃1→ ＃111111 ＃E0→ ＃e0e0e0 ＃FC0→ ＃FFCC00 输入生成 !important尽管在CSS中!important并不经常使用，但在Emmet也带有一定的缩写。添加!就可以自动生成：p0! 多属性：可以使用加号+运算符来创建多个属性。 输入生成 输入生成 其他 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)