html簡化haml補全錄

2021-08-27 22:37:14 字數 1689 閱讀 2149

前段時間寫了乙個html簡化成haml的概述,但寫的不全面,隨著我自己用了將近乙個月的實踐我來把它補充一下。

首先haml和html最大的區別在於haml簡化了html的寫法,省略了結束符,'<'  '>'符號也用%來表示。haml和html各有優劣,html的優點是它能夠很清楚的顯示乙個標籤的開頭和結尾,是整個**頁面顯得很清楚。但不停地寫'<','>'和結尾符號顯得過於麻煩,對於我這種懶人我更喜歡haml這種簡化版的**。

haml的簡化規則如下:

1. !!! 5 代表

2. %e 代表html標籤。

3. %e#id 代表id屬性。

4. %e.class 代表class屬性。

5. %e(attr="***") 代表某乙個特定屬性。

6. %e *** 代表插入標籤的內容。

7. %e %n 代表n是e的子元素。n如果寫在第二行,需要縮排。

在haml中沒有複雜的開始結束符,只用乙個%加標籤名就可以了,但它也有乙個缺點,就是如果使用haml就必須注意格式,因為haml沒有結尾福,所以不能像html那樣隨便寫。例如:

//html ,標籤中包含了乙個標籤

//html ,標籤中包含了乙個標籤

//html ,標籤中包含了乙個標籤

%div %a //haml,標籤中包含了乙個標籤

%div

%a haml,標籤中包含了乙個標籤,注意寫在第二行要縮排

%div

%a //haml,標籤和標籤是並列關係

在我們用程式設計工具寫html,js,css等**有乙個快捷鍵可以整理**,ctrl+alt+win+l,在haml編寫中也不起作用,所以要想用haml編寫程式,就要注意格式。

下面我來介紹也謝haml的用法。

首先就是標籤本某些特定的屬性用%xx表示,如:

//html,div的寬度設為100%

%div //haml,div的寬度設為100%

//如果想多呼叫幾個style,就用;隔開

%div

//若果同時有多條特性,各屬性之間用','隔開

%div

當然了我們通常是採用外部呼叫的,這裡只是簡單介紹一下。

下面來說呼叫函式,html一般都是用標籤來實現的,把函式放在

a paragraph

try it

而haml就省略了這些,直接在標籤中onclick呼叫寫在js檔案中的function。例如:

%button
這也是我喜歡haml的原因之一。

而且在haml中我們可以不用寫hade,body等標籤,直接用div塊來完成整個頁面。

當你需要呼叫較多時用,分隔開如:

%button
haml想要顯示文字內容,直接在標籤後加入文字就可以了,例如:

%h1 這是乙個標題

%button提交 //乙個提交文字的按鈕

用haml給標籤乙個id有兩種方法:

//給div乙個id為name

%div#name

%div

其實任何程式語言之間的變換都是有規律的,只要你掌握了規律很快就能掌握一門程式語言。

html的簡化寫法 haml和emmet的簡單介紹

關於haml和html 下面是乙個html的範例 print date current user.email h current user.bio 你可以看見,這只是標準的html erb的 片斷。對於你來說,這可能不會那麼刺激審美神經。然而,正如grigsby在他的文章中巧妙地解釋到的,不僅僅裡面...

VS code 突然HTML無法補全的問題解決

如果安裝了vs great icons可以看一下所對應的html檔案的圖示,是否為 如果已經是這個類似箭頭的圖示,說明已經被vscode識別為html檔案,那麼應該已經可以實現html補全 如果部分不能補全,可能是1 未安裝外掛程式 2 可能存在外掛程式衝突 如果沒有被vscode識別為html檔案...

awk函式實現將簡化IPV6位址補全

在用awk處理文字時,有些場景需要將簡化的ipv6位址補充成完整的ipv6位址,下邊函式可簡單實現 ipv6位址補全函式 function compipv6 orig address else if length ip field i 1 else if length ip field i 2 el...