[转载]emmet, 让你的 html 飞起来

[转载]emmet, 让你的 html 飞起来_第1张图片
image.png

emmet 是什么
首先是官网上的介绍。

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Emmet 是一个可用在许多流行文本编辑器上的极大简化 HTML 和 CSS 工作流程的插件。

前身是 Zen coding,他使用仿 css 选择器的语法来生成代码,极大提高了编写 HTML/CSS 的效率,之后改名为 emmet,但是随之而来的改变不仅限于名字,还增加了许多新的特性。

emmet 怎么用

新建一个html文档, 输入html:5, 按下tab键, 神奇的事情发生了

html:5
// tab



    
    
    
    Document


    


添加类、id、文本和属性
emmet 的一个强大特性,使用类 CSS 选择器的方式,

. 是生成类名,
# 是生成 id,
{} 中生成文本内容,
[] 中可以设置属性, 可以嵌套使用。
p

p.bar

p.bar1.bar2

p#foo

input[type=radio] p.bar#foo{123}

123

嵌套和分组
emmet 又一个强大的特性,也是让你写 html 速度起飞的关键因素。嵌套语法:

>:子元素符号,表示嵌套的元素
+:同级标签符号^:可以使该符号前的标签提升一行
其中 ^ 用的不多,容易让人逻辑混乱,这个时候就需要良好的分组来实现。
p>span

p+span

p>h1^span

(p>h1)+span

![Uploading image_390545.png . . .]

重复添加相同元素

ul>li*5

加上分组的应用,可以处理更复杂的 html 结构

(div.warp>p.bar+span#foo)*2

列表按序计数

ul>li.item$*3

如果想要两位数的序号,添加两个$即可,依此类推 ul>li{item$$}*3
  • item01
  • item02
  • item03

参考资料
emmet 官网
Emmet:HTML/CSS 代码快速编写神器
sublime text 2 中 Emmet8 个常用的技巧

你可能感兴趣的:([转载]emmet, 让你的 html 飞起来)