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>