網頁設計, 網頁資源

《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出

梅干2014/07/14
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
  之前有同學問到Sublime Text,能不能像Dreamweaver一樣,內建就有基本的網頁範本,當開啟新檔時,立即就可建立一個空的網頁樣版來,確實這是Dreamweaver好用的地方,於是梅干就去請教了好友男丁,看有沒有相關的替代方案,沒想到只要安裝Emmet後,就可快速的產生HTML的網頁架構出來,除此之外還可自行建立,自已常用的網頁標籤語法,且只要輸入短碼,再按Tab鍵立即就可將常用的html給輸出,甚至連php可以,真是超方便的,因此有在用Sublime Text的朋友,也一塊來看看吧!

Step1
首先,Sublime Text要先安裝好Emmet的外掛,接著再選擇 Preferences / Package Settings / Emmet / Settings-User選項。
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
Step2
接著就會開啟設定文件,且裡面空盪盪什麼也沒有。
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
Step3
再輸入下方的語法,在下方的語法可看到html,這表示要在html的模式下才能使用,接著在下方會看到aa與後方的html標籤語法,這代表當在html的模式下,輸入aa時就會產生aa方所設定的html 標籤語,同時需注意到,當html的標籤語法,也有用到「"」時,需在前面加「\」,當輸入完畢後,再將它儲存起來。
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
Step4
馬上來測試一下,由於剛所設定需在html的模式下才能使用,所以在新文件的右下角,點一下將它設定為HTML。
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
Step5
設定好後,在文件任意處,輸入剛所建立好的短碼「aa」。
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
Step6
接著再按Tab鍵,立即就會將剛的aa替換成,剛所設定的html標籤啦!是不是超方便的呀!
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
Step7
以下這些就是梅干所建立的常用標籤語法,而這邊可看到文件中出現紫色的字有,\、\n、\t這各代表什麼意呢?
1.\ :區隔"
2.\n :斷行
3.\t :向後空一格
梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
Step8
比方輸入梅干剛所建立的html5,再按tab鍵立即就會產生出HTML5的網頁結構的語法啦!是不是超方便的呀!!也趕快動手作一下吧!梅問題-《Sublime Text》自訂Emmet常用的網頁標籤語法並快速輸出
UAG軍規iPhone防摔殼