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

2018/09/20 3,620 0 軟體應用 , 網站技術

「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

留言區 / Comments

萌芽論壇