Emmet 基本操作
Emmet在sublime有專門插件,安裝參考,而且VScode和Atom都有內(nèi)置工具。
就是一個(gè)字,快。兩個(gè)字,效率。
dom生成
下面就是見證奇跡的時(shí)刻。
1 輸入你想要的標(biāo)簽:
h2
然后按tab
:
<h2></h2>
2 像css的格式輸入對(duì)應(yīng)的id,class類或者內(nèi)容{},輸入:
p#app.main{Hello World}
按tab
:
<p id="app" class="main">Hello World</p>
3 像css的格式,輸入屬性[]:
a[href="http://www.lxweimin.com/p/c1e3b96c1293"]{前端經(jīng)驗(yàn)收集器}
按tab
:
<a href="http://www.lxweimin.com/p/c1e3b96c1293">前端經(jīng)驗(yàn)收集器</a>
4 母控件用>
指向子控件,并行控件用+
, div
可以省略:
.wrapper>h1{hello}+.content
按tab
:
<div class="wrapper">
<h1>hello</h1>
<div class="content"></div>
</div>
5 多個(gè)并列控件同時(shí)生成(注意:加入括號(hào)保證優(yōu)先級(jí)),輸入:
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 嚴(yán)格文檔類型