分享

更多

   

VSCode编辑器使用技巧:快捷输入HTML代码

2019-05-28  instl

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些。

1.输入html:5,然后按tab键或enter键,效果如下:

<!-- 输入html或者html:5生成页面模板 --><!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.输入标签名自动补齐

<!-- 输入标签名 h1 按tab键或Enter键自动补齐 --><h1>HTML快捷输入练习</h1><!-- {}可输入标签内的文本 如输入:h2{填充文本} --><h2>填充文本</h2>

4.随机文本的输入

<!-- Lorem自动输入一段随机文本(默认30个单词),Lorem10 输入10个单词,Lorem*5 输入5遍随机文本 -->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 的结果-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.<!-- Lorem10*10 的结果-->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="结束"></div><!-- div[alt=到底了]{结束} 添加属性及包裹文本 --><div alt="到底了">结束</div>

6.使用">"输入嵌套标签,"+" 输入并列的兄弟标签,"^"上级元素

<!-- div>div#imgs{put some imgs here} 标签的嵌套--><div><div id="imgs">put some imgs here</div></div><!-- div#left{I am left}+div#right{I am right} 并列标签 --><div id="left">I am left</div><div id="right">I am right</div><!-- 看网上资料说^上级元素,没懂是什么意思,试了几个体会一下 --><!-- div#div1>p^div#div2 把div1提出成一行和div2同级 --><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.使用"{}"对标签分组及使用""生成多个相同的标签**

<!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括号分组标签 *生成多个标签--><div id="list1"><ul><li></li><li></li></ul></div><div id="list1"><ul><li></li><li></li></ul></div>

8.自增符号$

<!-- $ 自增符号 --><!-- 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,其功能还有很多,待以后慢慢学习。

自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的朋友。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    来自: instl > 《VSCode》

    猜你喜欢

    0条评论

    发表

    类似文章 更多
    喜欢该文的人也喜欢 更多