html缩写：

1.  初始化

HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：

  • html:5 或!：用于HTML5文档类型
  • html:xt：用于XHTML过渡文档类型
  • html:4s：用于HTML4严格文档类型

2.  轻松添加类、id、文本和属性

连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：

连续输入类和id，比如p.bar#foo，会自动生成：(如果有代码自动联想，先esc去掉联想，再tab)

<p class="bar" id="foo"></p>

3.  嵌套

现在你只需要1行代码就可以实现标签的嵌套。

  • >：子元素符号，表示嵌套的元素
  • +：同级标签符号

效果如下图所示：

可以生成多个子元素，比如ul>li*3 生成：

<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

5.  隐式标签

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。

在过去版本中，可以省略掉div，即输入.item即可生成<div
class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li
class="item"></li>。

下面是所有的隐式标签名称：

    • li：用于ul和ol中
    • tr：用于table、tbody、thead和tfoot中
    • td：用于tr中
    • option：用于select和optgroup中

Emmet：HTML/CSS代码快速编写的更多相关文章

  1. 转载： Emmet：HTML/CSS代码快速编写神器

    Emmet:HTML/CSS代码快速编写神器 因为文章严禁转载,那本着做一个遵纪守法的好公民,我就不转载了,把链接放下面,方便查阅. http://www.iteye.com/news/27580

  2. Emmet：HTML/CSS代码快速编写神器

    本文来源:http://www.iteye.com/news/27580    ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...

  3. Emmet：HTML/CSS代码快速编写神器(转)

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  4. Sublime Text 3插件之Emmet：HTML/CSS代码快速编写神器

    一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...

  5. Emmet for Dreamweaver：HTML/CSS代码快速编写神器

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  6. Emmet：HTML/CSS代码快速编写神器教程

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  7. （webstorm的css编写插件）Emmet：HTML/CSS代码快速编写神器

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  8. Emmet：HTML/CSS代码快速编写神器--20150422

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  9. sublime text3---Emmet：HTML/CSS代码快速编写神器

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

随机推荐

  1. vue学习笔记1：el 与 data

    一.vue介绍 vue是目前三大主流框架之一(React.Angular.Vue) vue特点: 易用 灵活 高效 vue官网:官网链接 二,知识点 vue实例选项: el 注:不能 让el直接管理h ...

  2. 20191014Java课堂记录

    1. Java字段初始化的规律 首先执行类成员定义时指定的默认值或类的初始化块,到底执行哪一个要看哪一个“排在前面”. 其次执行类的构造函数. 类的初始化块不接收任何的参数,而且只要一创建类的对象,它 ...

  3. 从0开发3D引擎：目录

    介绍 大家好,本系列带你踏上Web 3D编程之旅- 本系列是实战类型,从0开始带领读者写出"良好架构.良好扩展性.优秀的性能.最小功能集合(MVP)" 的3D引擎. 本系列的素材来 ...

  4. Hibernate定制Tuplizer

    Hibernate定制Tuplizer,使用@Tuplizer注解 本文转自http://www.521100.net/hibernate-tuplizer.html 首先,第一步在Hinbernat ...

  5. UVA A Spy in the Metro

    点击打开题目 题目大意: 在一个有n个站台的地铁线路里,给你列车通向每相邻两个车站所花费的时间,从0时刻开始,从1号站出发,要在T这个时间点上,到达n号站,给你m1辆从1开到n的列车及其出发时间,和m ...

  6. Client API Object Model - Execution Context

    1. executionContext. executionContext定义代码在其中执行的上下文. 并且适用在再form或者grid中的event handler. 比如formContext 或 ...

  7. from .cv2 import * ImportError: DLL load failed: 找不到指定的模块。 >>>

    from .cv2 import * ImportError: DLL load failed: 找不到指定的模块. >>> 昨天看项目的时候遇到这个问题,折腾到深夜,网上的各种方法 ...

  8. socket 原理

    socket 原理 什么是socket 我们知道进程通信的方法有管道.命名管道.信号.消息队列.共享内存.信号量,这些方法都要求通信的两个进程位于同一个主机.但是如果通信双方不在同一个主机又该如何进行 ...

  9. PKU-3580 SuperMemo(Splay模板题)

    SuperMemo 题目链接 Your friend, Jackson is invited to a TV show called SuperMemo in which the participan ...

  10. Typora常用快捷键

    目录 无序列表:输入-之后输入空格 有序列表:输入数字+"."之后输入空格 任务列表:-[空格]空格 文字 标题:ctrl+数字 表格:ctrl+t 生成目录:按回车 选中一整行: ...