Brackets 擴充功能「Emmet」:快速編寫網頁的神器!打個「!」再按下「Tab」鍵就可生成 HTML5 基本架構?!

2018/09/20 791 軟體應用 , 網站技術

「Brackets」 Adobe Systems 開發的一個以 HTML、CSS 及 JavaScript 編寫的 HTML 編輯器。
這次要介紹的是非常知名的擴充功能「Emmet」,這個擴充並不只支援 Brackets,Sublime Text、Notepad++ 和 Dreamweaver 等多種程式編輯軟體都支援該擴充,主要的功能就是加速網頁編寫,可以在非常短時間內生成出大量原始碼,舉例來說,只要打一個「!」,接著按鍵盤上的「Tab」鍵就可生成 HTML5 基本架構

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

真的非常方便!除此之外還支援縮寫快速生成 HTML 的功能,下方圖文將詳細敘述安裝與應用:

▲以上兩種方式皆可開啟「擴充功能管理員」。

▲搜尋「Emmet」,並安裝它。

▲安裝後馬上就可以打上「!」,接著按鍵盤上的「Tab」鍵測試是否可以自動生成 HTML5 架構。

▲成功自動產生 HTML5 架構原始碼。

▲這邊示範用縮寫「#Blocklist>ol.list>li*3>a[#go$]{第$項}」快速生成一大段原始碼。

▲按下鍵盤「Tab」鍵馬上生成以下原始碼:

<div id="Blocklist">
<ol class="list">
<li><a href="#go1">第1項</a></li>
<li><a href="#go2">第2項</a></li>
<li><a href="#go3">第3項</a></li>
</ol>
</div>

是不是非常方便呢?可以從縮寫中觀察到其規則,就可以用在更多用途囉!
「Emmet」還有許多功能,可以至官方文檔尋找更多知識:https://docs.emmet.io/abbreviations/

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB