Home » Web

Emmet 教學 - 顯示文字

學到現在,我們雖然能產生各種元素,但像 h1 或 a 之類的都需要在展開 HTML 後才額外補上內文,那如果想要在寫的過程中也一併產生的話呢?

文字 Text: {}

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中補上想要的內容來產生
emmet_tutorial_series_text_expansions_01

基本上 {Text} 也能把它當是一個元素,只是它是純文字而已
emmet_tutorial_series_text_expansions_02

不過若是接在 HTML 元素後的話,有些小細節可能要注意一下。例如當我們使用 a{Click Me} 跟 a>{Click Me} 時,輸出的 HTML 是一樣的
emmet_tutorial_series_text_expansions_03

但若是之後若有接其它元素的話,結果可是差很多的喔。例如 a{Click}+span{ Me} 跟 a>{Click}+span{ Me}
emmet_tutorial_series_text_expansions_04

主要是因為使用了子階層 > 的關係,span 也變成是 a 的子元素了。再來看另一個例子:div>{Click}+a{ here}+{ to continue} 跟 div{Click}+a{ here}+{ to continue}
emmet_tutorial_series_text_expansions_05

因為 {Text} 也是個元素,所以若不是在子階層中的話,就會變成在元素外的文字了。請各位同學在使用 Emmet 時要小心這差異。

最後我們來補充一個類似佔位用的文字功能。如果我們想要產生一些落落長的文字來讓區塊看起來很豐富的話,可以透過使用 lorem 這個關鍵字來產生一大串的英文詞句內容
emmet_tutorial_series_text_expansions_06

使用 lorem 會輸出有 30 個單字的文字內容,如果想要自訂單字數的話,只要在 lroem 後接個想要的數字就可以了
emmet_tutorial_series_text_expansions_07

Lorem ipsum 主要是常出現在排版設計用,要了解的話請參考一下維基百科

發表迴響