HTML CSS 快速編寫必備 emmet外掛程式

2021-07-14 13:46:18 字數 1673 閱讀 2741

emmet的前身是大名鼎鼎的zen coding,如果你從事web前端開發的話,對該外掛程式一定不會陌生。它使用仿css選擇器的語法來生成**,大大提高了html/css**編寫的速度

輸入!或者html:5然後按tab可以快速初始化

lang="en">

charset="utf-8">

documenttitle>

head>

body>

html>

class="a b"

id="c" width="100px" height="100px">somethingdiv>

h1+h2>h3>h4^^h5+h6 => tab

h1>

h4>

h3>

h2>

h5>

h6>

(ul#list$>li*3)*2+ul>li*3^ul>li*3 => tab

id="list1">

1li>

2li>

3li>

ul>

id="list2">

1li>

2li>

3li>

ul>

3li>

2li>

1li>

ul>

3li>

4li>

5li>

ul>

只需要打出屬性名的縮寫,後面跟上值,以name:value => tab快速編寫(縮寫就需要自己記下了,所有屬性都有縮寫)

+可用於編寫多個樣式

m0+p0 => tab

margin:0;

padding:

0;

某些樣式縮寫會自動新增-webkit-|-o-等字首

-webkit-transition: prop

time;

-o-transition: prop

time;

transition: prop

time;

p e r x分別是% em rem ex的單位縮寫

m0+p1p+o2r+bd3e+t4x => tab

margin:0;

padding:

1%;outline:

2rem;

border:

3em;

top:

4ex;

使用-將單個屬性內的多個值分開

m0-1e-3r-4x => tab

margin: 0 1em -3rem -4ex;

顏色的字首為#

bgc#234 => tab

background-color: #234;

emmet:html/css**快速編寫神器

使用emmet加速web前端開發

Emmet工具 Html CSS快速編寫語法

emmet 前身為 zen coding 是乙個能大幅度提高前端開發效率的乙個工具,它使用仿css選擇器的語法來生成 大大提高了html css 編寫的速度。如果你也使用sublime進行前端開發,在sublime中安裝外掛程式即可使用emmet,以下為html css快速編寫語法。html 5 或...

快速理解EM演算法

如果使用基於最大似然估計的模型,模型中存在隱變數,就要用em演算法做引數估計。個人認為,理解em演算法背後的idea,遠比看懂它的數學推導重要。idea會讓你有乙個直觀的感受,從而明白演算法的合理性,數學推導只是將這種合理性用更加嚴謹的語言表達出來而已。打個比方,乙個梨很甜,用數學的語言可以表述為糖...

HTML CSS快速入門(二)

堅持每天撰寫一點部落格,今天發現自己寫的快速入門一文章閱讀的人並不多,遠沒有第一篇文章水文看的人多,估計很多人看多了這一類科普文都覺得費勁,還是不費腦子的東西更吸引眼球。那這樣的話就要去撰寫更有意思,與眾不同的東西出來,關鍵是少寫廢話。html語義化 css基礎 根據內容的結構化,不加以任何css樣...