開啟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 網...