# 【Day8】系統性管理開發 part1 ## HTML縮寫模組---Emmet 按tab即可展開，節省打大於、小於的時間，也能避免自己忘記打結束標籤的情況--->更快速產生HTML結構 - 接「.」後可形成class ![](https://hackmd.io/_uploads/BJmF5xuq3.png) ![](https://hackmd.io/_uploads/S1jY5gucn.png) - 「+」可串接多個標籤 ![](https://hackmd.io/_uploads/S1nbog_52.png) - 「>」形成層級關係 ![](https://hackmd.io/_uploads/HkIRoe_53.png) 補充: 因div是最常見的，可省略，如下圖 ![](https://hackmd.io/_uploads/Sy1rhxuch.png) - 「{ }」填內文 ![](https://hackmd.io/_uploads/SytDTeucn.png) - 「*」應用範例 1. 兩張卡片 ![](https://hackmd.io/_uploads/BJWRnlu9h.png) 2. 清單 ![](https://hackmd.io/_uploads/rJ2paxu93.png) - 「$」形成有序編號 ![](https://hackmd.io/_uploads/S1gxNAgdqn.png) - 「[ ]」內填image屬性 ![](https://hackmd.io/_uploads/BkopReO5h.png) ![](https://hackmd.io/_uploads/BkfRAlOq3.png) - 「( )」表群組 ![](https://hackmd.io/_uploads/r1gJNYji3.png) ![](https://hackmd.io/_uploads/HJS6xbuch.png) ## HTML樣板語言---jade(別稱:Pug) 優點： 1. 透過縮排看見嚴謹的層級關係，一目了然 2. 不用放結束標籤 3. 呈現的樣子不會那麼混亂 首先到Settings設置前處理器![](https://hackmd.io/_uploads/rJW4OM_9h.png) - 由「( )」增加屬性(標籤後緊跟著小括弧，沒有空格) ![](https://hackmd.io/_uploads/HJzTqWu9n.png) 點右上角向下箭頭按鈕可預覽編譯成html呈現的樣子 ![](https://hackmd.io/_uploads/rkq1o-u92.png) ![](https://hackmd.io/_uploads/H1ggoWOq3.png) - 利用tab鍵形成層級關係 - 標籤後空一格再填內文 ![](https://hackmd.io/_uploads/B1lg6bdqn.png) 編譯成HTML ![](https://hackmd.io/_uploads/HJWGT-d52.png) - 文字行數過多，若欲將某段空下來 方法：Enter--->tab--->加入「|」符號 - 原始 ![](https://hackmd.io/_uploads/H1Xv0-Oqh.png) - 更改後 ![](https://hackmd.io/_uploads/BkY_0ZO5n.png) - 在jade中同樣可使用Emmet縮寫模組 ## CSS樣板語言---sass 改善了CSS的三大缺點 1. 每一條樣式後都要加冒號 2. 需要加大括弧包住所有的樣式表 3. 當要表示某元素裡的東西時，需要重複打父元素的名稱，且一列一列打出來無法一目了然，若有上百行、上千行列下來，就會顯得混亂，無法看清誰屬於誰 首先到Settings設置前處理器 ![](https://hackmd.io/_uploads/BkbL_M_92.png) - 不用打「{ }」，也不用打「;」 ![](https://hackmd.io/_uploads/S1-qqMdch.png) 編譯成CSS ![](https://hackmd.io/_uploads/SJuAcz_c3.png) ![](https://hackmd.io/_uploads/S1RA9Guq2.png) - 若要表示某元素裡的子元素，就在父元素裡打「&」--->空白--->子元素的標籤或名稱 ![](https://hackmd.io/_uploads/SJav6Mu53.png) ![](https://hackmd.io/_uploads/Hy8u6Muq3.png) - 變數功能 加「$」以儲存變數 優點：可直接在前幾行快速預覽各變數，往後要更改特定內容只需更改前幾行--->更有系統性地管理特殊內容之顏色、尺寸等 ![](https://hackmd.io/_uploads/ByMI1md9n.png) :::warning 內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d :::