Sublime Text Html外掛
阿新 • • 發佈:2018-12-26
View In Browser外掛安裝
- 安裝View In Browser外掛
快捷鍵 Ctrl+Shift+P 輸入 Install Package並且回車,輸入View In Browser 回車
設定快捷鍵
Preferences->Key Bindings-User 輸入:[{ “keys”: [“ctrl+alt+f”], “command”: “open_in_browser” },]
當為html的時候就可以 ctrl+alt+f 在瀏覽器中進行查看了
CTRL + ALT + F - Firefox
CTRL + ALT + C - Chrome
CTRL + ALT + I - Internet Explorer
CTRL + ALT + S - Safari
如何快速的建立html檔案
安裝外掛Emmet
快捷鍵 Ctrl+Shift+P 輸入 Install Package並且回車,輸入 Emmet 回車,一般情況下Tab鍵是有衝突的,Ctrl+E 觸發生效
Emmet常用操作方式
html:5 或! :用於HTML5文件型別
html:xt : 用於XHTML過渡文件型別
html:4s : 用於HTML4嚴格文件型別
//輕鬆新增類、Id、文字和屬性
連續輸入元素名稱和ID,Emmet會自動為你補全,比如輸入 p#foo ; p.bar#foo
<p class="bar" id="foo"/></p >
//如何定義HTML元素的內容和屬性。你可以通過輸入h1{foo}和a[href=#],就可以自動生成如下程式碼:
<h1>foo</h1>
<a href="#"></a>
//巢狀
>:子元素符號,表示巢狀的元素;+:同級標籤符號;^:可以使該符號前的標籤提示一行
p>spn
<p><span></span></p>
//分組
(.foo>h1)+(.bar>h2) : 會自動生成如下程式碼
<div class="foo">
<h1></h1 >
</div>
<div class="bar">
<h2></h2>
</div>
//隱式標籤
在過去版本中,可以省略掉div,即輸入.item即可生成<div class="item"></div>。現在如果只輸入.item,則Emmet會根據父標籤進行判定。比如在<ul>中輸入.item,就會生成<li class="item"></li>。
//定義多個元素
要定義多個元素,可以使用*符號。比如,ul>li*3可以生成如下程式碼:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
//定義多個帶屬性的元素
如果輸入 ul>li.item$*3,將會生成如下程式碼:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>