六角學院｜Sublime Text 3

HTML

html:5  →  html5 文件模式
link:css →  插入CSS檔案
div       → <div></div>
.box     →  <div class="box"></div>
div*2   → <div></div> <div></div>
div>p   → <div><p></p></div>
div+p   → <div></div> <p></p>

HTML 補充

div{hello}        → <div>hello</div>
div[alt=hello]   → <div alt="hello"></div>
div>lorem       → <div>Lorem ipsum dolor……...</div>
div>lorem1      → <div>Lorem</div>

Goto-CSS-Declaration：即時追蹤CSS程式碼位置

尋找HTML中的標籤元素對應於CSS當中的位置:command+control+right.

HTML-CSS-JS Prettify：自動縮排網頁程式碼

command+shift+H

part1

-html:5→html5
-link:css→插入css檔案
-div→<div></div>
-.box→<div class="box"></div>
-div*2→<div></div><div></div>
-div>p→<div><p></P></div>
-div+p→<div></div><p></p>

實際應用：

架構「！＋tab」/「html:5＋tab」
載入css「link:css＋tab」
h1標籤「h1＋tab」
div class header之標籤「.header＋tab」
p*2「＋tab」=<p></p>
                         <p></p>
.header標籤＊4「＋tab」＝<div class="header"></div>
                                               <div class="header"></div>
                                               <div class="header"></div>
                                               <div class="header"></div>
p.header標籤＊4「＋tab」＝<p class="header"></p>
                                                <p class="header"></p>
                                                <p class="header"></p>
                                                <p class="header"></p>
h1.header標籤＊4「＋tab」＝<h1 class="header"></h1 >
                                                  <h1  class="header"></h1 >
                                                  <h1  class="header"></h1 >
                                                  <h1  class="header"></h1 >
.header>.logo（logo包在header裡面）「＋tab」＝<div class="header">
                                                                                           <div class="logo"></div>
                                                                                     </div>
.header+.content+.footer（＋意即在同一層）「＋tab」=
              <div class="header"></div>
              <div class="content"></div>
              <div class="footer"></div>
  

part2

-div{hello}→<div>hello</div>→加文字
-div[alt=hello]→<div alt="hello"></div>
-div lorem→<div>Lorem ipsum dolor...</div>→假字產生器
-div lorem1→<div>Lorem</div>
-(.box>h1)*3→<div class="box"><h1></h1></div>*3
-p.box$*2→<p class="box1"></p><p class="box2"></p>

實作

.wrap>.header+.content+.footer「＋tab」=<div class="wrap">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
</div>

h1.logo>a「＋tab」=<h1 class="logo"><a href=""></a></h1>
ul.menu>li*3>a「＋tab」=<ul class="menu">
                                             <li><a href=""></a></li>
                                             <li><a href=""></a></li>
                                             <li><a href=""></a></li>
                                             </ul>
.banner>a>.img「＋tab」=<div class="banner"><a href=""><img src="" alt=""></a></div>
p>lorem=<p>........................</P>
p>lorem3=<p>_ _ _</P>
ul>li*3>a[href=#]{選單內容$}「＋tab」＝<ul>
                                                        <li><a href="#">選單內容1</a></li>       
                                                        <li><a href="#">選單內容2</a></li>    
                                                        <li><a href="#">選單內容3</a></li>    
                                                        <ul>