注冊用戶即可下載全站資源 關注Java幫幫微信公眾號
 

sublime Emmet的用法及相關語法

11
發表時間:2018-11-21 17:51

日本韩国三级aⅴ在线观看本節來講一下Emmet插件的用法及相關語法。

日本韩国三级aⅴ在线观看Emmet插件極大的提高了編程員的編程速度,下面我們來講講它的具體語法:

一、生成 HTML 文檔初始結構

日本韩国三级aⅴ在线观看HTML 文檔的初始結構,就是包括 doctype、html、head、body 以及 meta 等內容。你只需要輸入一個 “!” 就可以生成一個 HTML5 的標準文檔初始結構,你沒有看錯,輸入一個感嘆號(當然是英文符號),然后摁下 ctrl+E 鍵,就會發現生成了下面的結構:

日本韩国三级aⅴ在线观看這就是一個 HTML5 的標準結構,也是默認的 HTML 結構。如果你想生成 HTML4 的過渡型結構,那么輸入指令 html:xt,然后ctrl+E, 即可生成如下結構:

Emmet 會自動把 doctype 給你補全了,怎么樣,這樣的功能會不會讓你動心?簡單總結一下常用的 HTML 結構指令:

html:5 或者 ! 生成 HTML5 結構

日本韩国三级aⅴ在线观看html:xt 生成 HTML4 過渡型

日本韩国三级aⅴ在线观看html:4s 生成 HTML4 嚴格型

二、生成帶有 id 、class 的 HTML 標簽

Emmet 的語法有點類似 CSS 的語法,生成 id 為 aaa 的 div 標簽,我們只需要編寫下面指令:

#aaa

Emmet 默認的標簽為 div ,如果我們不給出標簽名稱的話,默認就生成 div 標簽。如果編寫一個 class 為 bbb 的 span 標簽,我們需要編寫下面指令:

span.bbb

然后就生成了對應的結構。同理,如果想要編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標簽,我們可以這樣寫:

ul#ccc.ddd

日本韩国三级aⅴ在线观看很簡單吧?比你用手寫 id 、class 方便多了吧

三、生成后代:>

大于號表示后面要生成的內容是當前標簽的后代。例如我要生成一個無序列表,而且被 class 為 aaa 的 div 包裹,那么可以使用下面指令:

div.aaa>ul>li

可以生成如下的結構:

四、生成兄弟:+

上面是生成下級元素,如果想要生成平級的元素,就需要使用 + 號。例如下面指令:

div+p+bq

就可以生成如下的 HTML 結構:

五、生成上級元素:^

上級 (Climb-up)元素是什么意思呢?前面咱們說過了生成下級元素的符號“>”,當使用 div>ul>li 的指令之后,再繼續寫下去,那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽,那么我需要先用 “^” 提升一下層次。例如:

div>ul>li^span

就會生成如下結構:

日本韩国三级aⅴ在线观看如果我想相對與 div 生成一個平級元素,那么就再上升一個層次,多用一個“^”符號:

div>ul>li^^span

六、重復生成多份:

日本韩国三级aⅴ在线观看特別是一個無序列表,ul 下面的 li 肯定不只是一份,通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字:

ul>li*5

這樣就直接生成五個項目的無序列表了。如果想要生成多份其他結構,方法類似。

七、生成分組:()、

日本韩国三级aⅴ在线观看用括號進行分組,這樣可以更加明確要生成的結構,特別是層次關系,例如:

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

日本韩国三级aⅴ在线观看這樣很明顯就可以看出層次關系和并列關系,生成如下結構:

八、此外,分組還可以很方便的結合上面說的 “*” 符號生成重復結構:

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

生成結構:

九、生成自定義屬性:[attr]

日本韩国三级aⅴ在线观看a 標簽中往往需要附帶 href 屬性和 title 屬性,如果我們想生成一個 href 為 “http://polkscan.com/ ,title 為“Java幫幫 官網”的 a 標簽,可以這樣寫:

a[href="http://polkscan.com/" title="Java幫幫 官網"]

日本韩国三级aⅴ在线观看其他標簽和屬性都類似。

十、對生成內容編號:$

例如無序列表,我想為五個個 li 增加一個 class 屬性值 item1 ,然后依次遞增從 1-5,那么就需要使用 $ 符號:

ul>li.item$*5

這樣就生成了如下結構:

日本韩国三级aⅴ在线观看$ 就表示一位數字,只出現一個的話,就從1開始。如果出現多個,就從0開始。如果我想生成三位數的序號,那么要寫三個 $:

ul>li.item$$$*5

輸出:

只能這樣單調的生成序號?對于強大的 Emmet 來說,肯定不會會了,我們也可以在 $ 后面增加 @- 來實現倒序排列:

ul>li.item$@-*5

生成如下結構:

日本韩国三级aⅴ在线观看同樣,我們也可以使用 @N 指定開始的序號:

ul>li.item$@3*5

日本韩国三级aⅴ在线观看這樣就會從 3 開始排序,生成如下代碼:

日本韩国三级aⅴ在线观看配合上面倒序輸出,可以這樣寫:

ul>li.item$@-3*5

生成的就是以 3 為底倒序:

十一、生成文本內容:{}

上面講解了如何生成 HTML 標簽,那里面的內容呢?當然也可以生成了:

日本韩国三级aⅴ在线观看a[href="http://polkscan.com/"]{點擊這里到 Java幫幫 的官網}

這樣就生成了一個到我博客的超鏈接了。在生成內容的時候,特別要注意前后的符號關系,雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的,但是加上其他的內容就不一定了,例如:

日本韩国三级aⅴ在线观看這樣就生成了完全不同的結構,注意這些小細節哦。

不要有空格

在寫指令的時候,你可能為了代碼的可讀性,使用一些空格什么的排版一下。這就會導致代碼無法使用。例如下面這句:

(header > ul.nav > li*5)+ footer

而去掉空格之后,就可以正常執行生成結構了。


支付寶贊助-Java幫幫社區
微信贊助-Java幫幫社區
Java幫幫公眾號生態

Java幫幫公眾號生態

總有一款適合你

Java幫幫-微信公眾號

Java幫幫-微信公眾號

將分享做到極致

Python幫幫-公眾號

Python幫幫-公眾號

人工智能,爬蟲,學習教程

大數據驛站-微信公眾號

大數據驛站-微信公眾號

一起在數據中成長

九點編程-公眾號

九點編程-公眾號

深夜九點學編程

程序員生活志-公眾號

程序員生活志-公眾號

互聯網,職場,程序員那些事兒

Java幫幫學習群生態

Java幫幫學習群生態

總有一款能幫到你

Java學習群

Java學習群

與大牛一起交流

大數據學習群

大數據學習群

在數據中成長

九點編程學習群

九點編程學習群

深夜九點學編程

python學習群

python學習群

人工智能,爬蟲

測試學習群

測試學習群

感受測試的魅力

Java幫幫生態承諾

Java幫幫生態承諾

一直堅守,不負重望

初心
勤儉
誠信
正義
分享
合作品牌 非盈利生態-優質內容分享傳播者
關于我們
友鏈申請
友鏈交換:加幫主QQ2524138991 留言即可 24小時內答復  
全站內容非商業用途,內容來源于網友,并遵循 許可,如有異議請聯系客服。
會員登錄
獲取驗證碼
登錄
登錄
我的資料
留言
回到頂部