Emmet,寫HTML簡單又快速

更新於 發佈於 閱讀時間約 2 分鐘

用Emmet這個套件,可以用標籤與快速鍵,建立一個完整的HTML。可以有效率的寫程式。

在VS Code、Sublime Text 還有線上網站 codepen 、JS Bin、JS Fiddle 都可以使用。

1. >:建立裡面的子層。

例:ul>li>p

2. +:建立連著的兄弟層。

例:div+h1+h2

3. *:建立重複的標籤。

例:ul>li*3

4. ^:建立與上一層連著的兄弟層。

例1:div+div>p>span+em^bq

例2:div+div>p>span+em^^bq

5. {}:標籤內的文字。

例:ul>li*3{清單}

6. []:輸入屬性。

例:a[href=”#”]

7. .:建立class命名;#:建立id命名。

例1:.box

例2:#name

8. $:建立編號。

例1:ul>li*3{編號:$}

例2:h$[title=item$]*2

例3:ul>li.item$$$*2

9. $@-:編號降冪。

例1:ul>li*3{編號:$@-}

例2:ul>li.item$@3*3

10. ():grouping。

例1:div>(header>ul>li*2>a)+footer>p

例2:(div>dl>(dt+dd)*3)+footer>p

留言
avatar-img
留言分享你的想法!
avatar-img
吉娜走路的沙龍
0會員
2內容數
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
如果想要更快速的打出特殊符號,該怎麼做? 不管是頁面切換或重複動作,都會中斷打字行為,除了很擾人之外,有會打壞我們工作的節奏。因此,分享各種小方法來有效提升打字的效率!
Thumbnail
如果想要更快速的打出特殊符號,該怎麼做? 不管是頁面切換或重複動作,都會中斷打字行為,除了很擾人之外,有會打壞我們工作的節奏。因此,分享各種小方法來有效提升打字的效率!
Thumbnail
Padlet
Thumbnail
Padlet
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News