Emmet前端开发技巧分享.doc

Emmet 前端开发技巧分享 Emmet 和 HTML(emmet 在 sublime 上的效果) 为文本编辑器安装 Emmet 插件, 一旦写好所写之后, 按一下 tab 键就能生成你所请求的代码。以下为几个实例。输入 ul>li>img+p 生成创建初始文档 html:5 或!: HTML5 文档类型 html:xt : XHTML 过渡型文档类型 html:xs : XHTML 严格型文档类型 html:4t : HTML4 过渡型文档类型 html:4s : HTML4 严格型文档类型子元素:使用> 运算符生成彼此嵌套的元素输入生成相邻元素+ :使用+ 运算符可以用来生成彼此相邻的元素: 输入生成返回上一层^ :使用^ 运算符,可以让你的代码返回上一层。当你使用> 嵌套元素时,想让后面的回到上一层,那么这个方法很适用。输入生成乘法*: 一次性生成多个相同的元素, 还可以通过$ 符号做递增, 通过$@- 符号做递减, 通过$***@3*5 从第三个开始命名输入生成输入生成输入生成输入生成输入生成组合:更有效的利用嵌套。在 Emmet 中可以通过() 将一个块组合在一起输入生成输入生成输入生成快速添加类名、 ID 、文本和属性: 使用 E#ID 添加 ID名使用 添加类名使用 E[attr] 添加属性使用 E{text} 添加文本输入生成输入生成输入生成输入生成输入生成省略标签名:在 Emmet 中可以省略标签名,默认情况下, 和 起到的作用是一致的在实际中还有几种情况: 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 中都是可以使用的。在 Emme t 中每一个单位都有其缩写形式: px→默认 p→%e→ em r→ rem x→ ex 输入生成多个单位: CSS 中的某些属笥,比如 margin ,允许多个值。在 Emm