日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

提高新手寫代碼效率的Emmet插件怎么使用

作者:黑巧克力脆皮冰淇淋 更新時間: 2022-07-21 編程語言

? 平常寫代碼的時候通常會要寫很多結構重復甚至相同的html,如果每一個重復的代碼都去c+v,就會非常浪費時間。

? 所有就有了今天要推薦給各位小白新手的插件:Emmet,現在大部分編輯器都內置了emmet插件,例如:hbuilderX、Sublime?Text、Notepad++、VS code等等,省去了安裝的步驟。

? 接下來跟我一起看看怎么使用吧。

? 在你的編輯器新建一個html文件,創建基本的html結構代碼

vscode為例:打出一個!然后按 Tab ;hbuilderX為例:打出html 然后回車。

? 下面介紹常用的結構語法:

?1、> 嵌套

如果想寫一個ul里面是li,每一個li里是span標簽,可以在html里輸入ul>li>span,按下tab就會生成。

?

2、*? 代表重復幾次

如果想寫一個ul里面是li,每一個li里是span標簽,該怎么寫呢?我們在html里輸入ul>li*5>span,按下tab就會生成。

3、() 整體嵌套

如果在div中想寫一個span和p的話,可以在html里輸入div>(span+p),按下tab就會生成。

?4、+ 同級

如果想寫一個div,下面跟著一個span,可以在html里輸入div+span,按下tab就會生成。

?

?5、{} 文本

如果你想在你的div里寫文本,可以在html里輸入div{text},按下tab就會生成。

?6、¥ 遞增

如果你想在你的ul里創建5個li,并且li里面的內容是從某個數字開始遞增的話,可以在html里輸入ul>li*5>{$},按下tab就會生成。

?7、id和類

盒子的id和類名可以直接快捷寫出來,如下

div#(要命名的id) id

.(要命名的類名)box

以上常見的emmet插件的使用方法啦,希望對剛剛接觸html的小白帶來幫助,加油!

?

?

原文鏈接:https://blog.csdn.net/m0_68052629/article/details/125896536

欄目分類
最近更新