Sublime外掛程式Emmet安裝與使用

2021-07-07 06:35:38 字數 3303 閱讀 4355

開啟sublimetext3,ctrl+`,貼上下面**

import  urllib.request,os;pf='package control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.proxyhandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen(''+pf.replace(' ','%20')).read())
1.初始化**

!+tab, html+tab

2.  新增類、id、文字和屬性

連續輸入元素名和id會自動補全 

連續輸入類和id,比如p.bar#foo,會自動生成: 

html** 

<

pclass="bar"

id="foo"

>

p>

下面來看看如何定義html元素的內容和屬性。你可以通過輸入h1和a[href=#],就可以自動生成如下**:

html** 

<

h1>foo

h1>

<

ahref="#"

>

a>

3.  巢狀

現在你只需要1行**就可以實現標籤的巢狀。 

效果如下圖所示: 

4.  分組

你可以通過巢狀和括號來快速生成一些**塊,比如輸入(.foo>h1)+(.bar>h2),會自動生成如下**: 

html** 

<

divclass="foo"

>

<

h1>

h1>

div>

<

divclass="bar"

>

<

h2>

h2>

div>

5.  隱式標籤

宣告乙個帶類的標籤,只需輸入div.item,就會生成

。 在過去版本中,可以省略掉div,即輸入.item即可生成

。現在如果只輸入.item,則emmet會根據父標籤進行判定。比如在

6.  定義多個元素

要定義多個元素,可以使用*符號。比如,ul>li*3可以生成如下**: 

html** 

<

ul>

<

li>

li>

<

li>

li>

<

li>

li>

ul>

7.  定義多個帶屬性的元素

如果輸入 ul>li.item$*3,將會生成如下**: 

html** 

<

ul>

<

liclass="item1"

>

li>

<

liclass="item2"

>

li>

<

liclass="item3"

>

li>

ul>

二、css縮寫

1.  值

比如要定義元素的寬度,只需輸入w100,即可生成 

css** 

width: 100px;  

除了px,也可以生成其他單位,比如輸入h10p+m5e,結果如下: 

css** 

height: 10%;  

margin: 5em;  

單位別名列表: 

2.  附加屬性

可能你之前已經了解了一些縮寫,比如 @f,可以生成: 

css** 

@font-face   

一些其他的屬性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項,可以通過「+」符號來生成,比如輸入@f+,將生成: 

css** 

@font-face   

3.  模糊匹配

如果有些縮寫你拿不準,emmet會根據你的輸入內容匹配最接近的語法,比如輸入ov:h、ov-h、ovh和oh,生成的**是相同的: 

css** 

overflow: hidden;  

4.  **商字首

如果輸入非w3c標準的css屬性,emmet會自動加上**商字首,比如輸入trs,則會生成: 

css** 

-webkit-transform: ;  

-moz-transform: ;  

-ms-transform: ;  

-o-transform: ;  

transform: ;  

你也可以在任意屬性前加上「-」符號,也可以為該屬性加上字首。比如輸入-super-foo: 

css** 

-webkit-super-foo: ;  

-moz-super-foo: ;  

-ms-super-foo: ;  

-o-super-foo: ;  

super-foo: ;  

如果不希望加上所有字首,可以使用縮寫來指定,比如-wm-trf表示只加上-webkit和-moz字首: 

css** 

-webkit-transform: ;  

-moz-transform: ;  

transform: ;  

字首縮寫如下: 

5.  漸變

輸入lg(left, #fff 50%, #000),會生成如下**: 

css** 

background-image: -webkit-gradient(linear, 0

0, 100% 0, color-stop(0.5, #fff), to(#000));  

background-image: -webkit-linear-gradient(left, #fff 50%, #000);  

background-image: -moz-linear-gradient(left, #fff 50%, #000);  

background-image: -o-linear-gradient(left, #fff 50%, #000);  

background-image: linear-gradient(left, #fff 50%, #000);  

sublime 使用技巧之Emmet外掛程式

生成html骨架 html文件需要包含一些固定的標籤,比如 等,現在你只需要1秒鐘就可以輸入這些標籤。比如輸入 或 html 5 然後按tab鍵 或者ctrl e就會生成如下骨架 lang en charset utf 8 documenttitle head body html 生成各種文件型別的...

sublime3 安裝外掛程式emmet

安裝步驟 先按 ctrl 調出命令列,輸入 import urllib request,os hashlib h 7183a2d3e96f11eeadd761d777e62404 e330c659d4bb41d3bdf022e94cab3cd0 pf package control.sublime ...

解決Sublime3中Emmet外掛程式補全失效的問題

安裝了前端神器sublime之後,要開始寫html,必不可少的一些配置就是安裝 補全外掛程式 emmet,但是我使用了網上的各種方法後都無法使用emmet的縮寫命令進行 的補全,只能單個進行補全,示例如下 div li按下tab後變成了 div li 環境 windows 10 sublime3 網...