「懶人必學(xué)小技巧」利用VSCode編寫html和css時(shí)，一些便捷方法
時(shí)間：2023-07-06 00:03:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-06 00:03:02 來源：網(wǎng)站運(yùn)營(yíng)
「懶人必學(xué)小技巧」利用VSCode編寫html和css時(shí)，一些便捷方法：
閱讀目錄
- 一、HTML編寫介紹
- 二、CSS編寫介紹
- 、快速格式化
- 四、小編用的插件
一、HTML編寫介紹
1.1快速在vscode中新建html文件，利用!（英文狀態(tài)下哦?。?/b>
具體操作：
- 新建一個(gè)html的文件，現(xiàn)在是空白狀態(tài) （如下圖）
第一步：建HTML文件2.鍵入“!”(英文狀態(tài)下 奧!)
第二?：鍵入“!”3.按下Tab鍵即可生成！
x效果圖：
第三步：按下tab鍵就完成啦/*效果代碼*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body></html>
1.2 kuai su 快速輸入標(biāo)簽
輸入標(biāo)簽名，并按下Tab鍵（空格鍵即可）即可完成。
一
二
1.3 輸入多個(gè)相同的標(biāo)簽，要復(fù)制粘貼么？
答案是： 當(dāng)然不需要啊
我們鍵入“所需標(biāo)簽名”+“ * ”+“所需的標(biāo)簽個(gè)數(shù)”即可。
/*eg：div 代碼如下：*//* div*3，鍵入后就會(huì)生成下面的啦 */ <div></div> <div></div> <div></div>
1.4 快速輸入父子關(guān)系和兄弟關(guān)系的標(biāo)簽，一個(gè)一個(gè)鍵入？
通常我們初學(xué)時(shí)，需要一個(gè)一個(gè)代碼進(jìn)行鍵入。效率很低，也容易出錯(cuò)。
接下來，我們就這個(gè)方法快速輸入吧！
- 父子關(guān)系格式： “父親標(biāo)簽名”+“ > ”+"兒子標(biāo)簽名"
當(dāng)然我們也可以在子代 標(biāo)簽名后乘以數(shù)字（ul>li*3）,能得到三個(gè)<li></li>
/*父子關(guān)系*//* ul>li*3 */ <ul> <li></li> <li></li> <li></li> </ul>- 兄弟關(guān)系格式： “哥哥標(biāo)簽名”+“ + ” + " 弟弟標(biāo)簽名"
/* 兄弟標(biāo)簽 *//*鍵入 h3+p */ <h2></h2> <p></p>
1.5 快速寫入類選擇器/id選擇器
.demo--- <div class="demo"></div>
#gary--- div id="gary"></div>
注意： 以上是自動(dòng)生成“div”的（默認(rèn)是div）， 如果想要寫其他的。例如：h3.one 則生成<h3 class="one"></h3>
/* .demo */ <div class="demo"></div>/* #gary */ div id="gary"></div>
1.6 div或其他 的類名/id名排序 利用自增符號(hào)
格式： 例如：div
.div$*3，則生成
<div class="gary1"></div>
<div class="gary2"></div>
<div class="gary3"></div>
其他的：p.one$*3
<p class="one1"></p>
<p class="one2"></p>
<p class="one3"></p>
1.7 多標(biāo)簽內(nèi)默認(rèn)文字
div{我是你們的課代表}*3
效果：<div>我是你們的課代表</div>
<div>我是你們的課代表</div>
<div>我是你們的課代表</div>
其他的：h3{我是你們的課代表}*3
效果在這奧：
<h3>我是你們的課代表</h3>
<h3>我是你們的課代表</h3>
<h3>我是你們的課代表</h3>
1.8盡量持續(xù)更新奧！
二er、CSS編寫介紹
- 快速鍵入css樣式代碼（簡(jiǎn)單的舉例哦?。?/b>
- background-image（鍵盤在VSCode鍵入“bri”）
- width：100px； 鍵盤鍵入“w100”即可；
- 以此類推奧！
、快如格式化
快捷鍵：Shift+Alt+f
同時(shí)呢，pink老師告訴我們：
亦可以設(shè)置 保存頁面時(shí)自動(dòng)格式化代碼：
步驟：
文件---首選項(xiàng)----設(shè)置
搜索：emmet.include；
在setting.json 下的“用戶”中添加以下語句：
"editor.formatOnType":true, "editor.formatOnSave":true設(shè)置一次，終身可用哈（前提是不卸載不做此改動(dòng)）
四、小編常用插件
- Auto Rename Tag
- Beautify（?美化）
- Chinese (Simplified) Language Pack for Visual Studio Code（使vscode中文化，推薦使用）
- CSS Peek
- Night Owl（主題）
- Live Server（實(shí)時(shí)畫面，推薦使用）
- open in browser（打開瀏覽器）
在線咨詢
