昨天僅僅是基本的一些功能，就感覺到腦袋很卡，需要大量練習才能讓腦袋生出網站結構的速度加快，以下分享幾個可以練習切版的網站。

1. Practices Website Templates
2. templatemo

Emmet常用縮寫 - HTML類

1. Tag產出完整標籤

   a 
   // 按Tab產出
   <a href=""></a>
   
   br
   // 按Tab產出
   <br />
   ...
   // 用法相同，不依依列舉
   

2. Tag加上：(冒號)銜接常用屬性

   • a系列

     a:___
     // 按Tab產出
     <a href="___"></a>
     //底線可填入link(網址), mail(信箱)
     

   • link系列

     link:___
     // 按Tab產出
     <link rel="______" href="___" />
     

     底線可填入：

     代碼（縮寫）	說明

     css | 樣式表
     print | 印刷樣式(media="print")
     favicon | 網頁標題縮圖
     touch | 手機版的快捷圖示
     import(im) | 引入其他檔案

   • input系列

     input:___
     // 按Tab產出
     <input type="___" name="" id="" />
     

     底線可填入：

     代碼（縮寫）	說明

     hidden(h) | 隱藏欄位
     text(t) | 文字欄位
     search | 搜尋
     email | 信箱
     url | 網址
     password(p) | 密碼
     datetime | 日期時間
     datetime-local | 用戶的本地日期時間
     month | 月
     week | 週
     time | 時間
     tel | 電話
     number | 數字
     color | 顏色
     checkbox(c) | 複選
     radio(r) | 單選
     range | 數值範圍
     file(f) | 上傳檔案
     submit(s) | 表單提交
     image(i) | 圖片按鈕
     button(b) | 按鈕
     reset | 重置表單

     • input的許多屬性需看瀏覽器的支援度

3. Tag名稱縮寫

   inp
   // 按Tab產出
   <input type="text" name="" id="">
   btn
   // 按Tab產出
   <button></button>