Pug
// 註解
div.bgYellow.green div
span.blue span
a(href="https://www.google.com/?hl=zh-tw" target="_blank") google
| 繼續div內文
| 說明 | pug | 範例 |
|---|---|---|
| HTML註解 | // |
//註解 <!-- 註解 --> |
| pug註解 | //- |
//-註解 |
| 元素 | 標籤 內容 |
div 內文 |
| 子元素 | 縮排 + 標籤 內容 |
縮排 + div 內文 |
| 延續符號 | | 延續內文 |
| 延續內文 |
| CSS類別 | 標籤.class |
span.ClassName |
| DIV的CSS類別 | .class |
.ClassName |
| CSS ID | 標籤#ID |
div#IDName |
| 屬性 | 標籤(屬性名1="屬性值1" 屬性名2="屬性值2") |
a(href="xxx" target="_blank") LINK |
// 註解: 註解在HTML中會出現//- 註解: 註解在HTML中不會出現- 子元素需縮排
- div太常使用，所以可以省略
- EX:
.ClassName=div.ClassName - EX:
#ClassName=div#ClassName
- EX:
-
註解
// -
標籤 內容
h1 標題
標題.class[.class]
h1.className1 標題
h1.className1.className2 標題
- 子元素
|: 延續符號
div div內文
span span1內文
span span2內文
| 繼續div內文
div
h3 標題
p 內文
- 屬性
(屬性1="值1", 屬性2="值2")- 要用等號
- 值一定要用單引號或雙引號
- 多個屬性可以用空格或逗號隔開
a(href="連結") 超連結
img(src="網址")