|
VSCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這記錄一些。 1.輸入html:5，然后按tab鍵或enter鍵，效果如下： <!-- 輸入html或者h(yuǎn)tml:5生成頁(yè)面模板 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body></body></html>
2.輸入link:css引入css樣式文件，輸入script:src引入js <!-- 輸入link:css引入樣式 --><link rel="stylesheet" href=""><!-- 輸入script:src引入js --><script src=""></script>
3.輸入標(biāo)簽名自動(dòng)補(bǔ)齊 <!-- 輸入標(biāo)簽名 h1 按tab鍵或Enter鍵自動(dòng)補(bǔ)齊 --><h1>HTML快捷輸入練習(xí)</h1><!-- {}可輸入標(biāo)簽內(nèi)的文本 如輸入：h2{填充文本} --><h2>填充文本</h2>
4.隨機(jī)文本的輸入 <!-- Lorem自動(dòng)輸入一段隨機(jī)文本(默認(rèn)30個(gè)單詞)，Lorem10 輸入10個(gè)單詞，Lorem*5 輸入5遍隨機(jī)文本 -->Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis?<!-- Lorem10 的結(jié)果-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.<!-- Lorem10*10 的結(jié)果-->Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.
Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.
Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.
5.使用"#"輸入id，"."輸入class，"[]"輸入屬性 <!-- div#main.content 輸入id、class --><div id="main" class="content"></div><div id="foot" class="foot" data="結(jié)束"></div><!-- div[alt=到底了]{結(jié)束} 添加屬性及包裹文本 --><div alt="到底了">結(jié)束</div>
6.使用">"輸入嵌套標(biāo)簽，"+" 輸入并列的兄弟標(biāo)簽，"^"上級(jí)元素 <!-- div>div#imgs{put some imgs here} 標(biāo)簽的嵌套--><div><div id="imgs">put some imgs here</div></div><!-- div#left{I am left}+div#right{I am right} 并列標(biāo)簽 --><div id="left">I am left</div><div id="right">I am right</div><!-- 看網(wǎng)上資料說(shuō)^上級(jí)元素,沒懂是什么意思，試了幾個(gè)體會(huì)一下 --><!-- div#div1>p^div#div2 把div1提出成一行和div2同級(jí) --><div id="div1"><p></p></div><div id="div2"></div><!-- div>div#div1>p^div#div2 --><div><div id="div1"><p></p></div><div id="div2"></div></div><!-- div>p>img^div>ul>li --><div><p><img src="" alt=""></p><div><ul><li></li></ul></div></div><!-- div>div>div^div --><div><div><div></div></div><div></div></div><!-- div>div^div --><div><div></div></div><div></div>
*7.使用"{}"對(duì)標(biāo)簽分組及使用""生成多個(gè)相同的標(biāo)簽** <!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括號(hào)分組標(biāo)簽 *生成多個(gè)標(biāo)簽--><div id="list1"><ul><li></li><li></li></ul></div><div id="list1"><ul><li></li><li></li></ul></div>
8.自增符號(hào)$ <!-- $ 自增符號(hào) --><!-- ul>li*3>img[src=./imgs/$.jpg][alt={img $}] --><ul><li><img src="./imgs/1.jpg" alt="img 1"></li><li><img src="./imgs/2.jpg" alt="img 2"></li><li><img src="./imgs/3.jpg" alt="img 3"></li></ul><!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] --><ul><li><img src="./imgs/001.jpg" alt="img 001"></li><li><img src="./imgs/002.jpg" alt="img 002"></li><li><img src="./imgs/003.jpg" alt="img 003"></li></ul><!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt={img $$@4}] --><ul><li><img src="./imgs/04.jpg" alt="img 04"></li><li><img src="./imgs/05.jpg" alt="img 05"></li><li><img src="./imgs/06.jpg" alt="img 06"></li></ul>
這些快捷操作需要Emmet插件，本文是在VSCode下編寫的，其他編輯器如Atom、Sublime Text都支持Emmet，其功能還有很多，待以后慢慢學(xué)習(xí)。 自己是從事了五年的前端工程師，不少人私下問(wèn)我，2019年前端該怎么學(xué)，方法有沒有？ 沒錯(cuò)，年初我花了一個(gè)多月的時(shí)間整理出來(lái)的學(xué)習(xí)資料，希望能幫助那些想學(xué)習(xí)前端，卻又不知道怎么開始學(xué)習(xí)的朋友。
|
