Emmet 基本操作

Emmet 基本操作

Emmet在sublime有专门插件,安装参考,而且VScode和Atom都有内置工具。

就是一个字,快。两个字,效率。

dom生成

下面就是见证奇迹的时刻。

1 输入你想要的标签:

h2

然后按tab:

<h2></h2>

2 像css的格式输入对应的id,class类或者内容{},输入:

p#app.main{Hello World}

tab:

<p id="app" class="main">Hello World</p>

3 像css的格式,输入属性[]:

 a[href="http://www.jianshu.com/p/c1e3b96c1293"]{前端经验收集器}

tab:

<a href="http://www.jianshu.com/p/c1e3b96c1293">前端经验收集器</a>

4 母控件用>指向子控件,并行控件用+div可以省略:

.wrapper>h1{hello}+.content

tab:

<div class="wrapper">
     <h1>hello</h1>
    <div class="content"></div>
</div>

5 多个并列控件同时生成(注意:加入括号保证优先级),输入:

ul>(li>a)*4

tab:

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

html 初始化

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

参考

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 164,046评论 24 696
  • 春天的雨 春天的雨,老是下个没完。做事的人,天天对天恨恨的骂。就像等车的人,左等不来,右等不来,望着车子恨恨的看。...
    欧阳景98阅读 108评论 0 2
  • 前世以重逢终结 今生以重逢开始 我把心脏捧给你 鲜血跌进了土里 血凝固成茧 被灰尘裹瞎了双眼 前世的痴傻 换得今生...
    梅凉阅读 517评论 20 22
  • 梁总回上海之后,给我们带来良好的消息,一个五千万的项目准备与我们合作。真是令人振奋不已!不过,我在QQ签名上发现,...
    JamesMow阅读 141评论 0 0
  • 2016.03.28 每天你的身边都有人见证着你的努力 第45次全国计算机等级考试在西华师范大学华凤校区实验中心举...
    羅Jackie羅阅读 199评论 0 0