VSCode中快捷输入HTML代码

时间: 2019-02-24阅读: 835标签: html

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,其功能还有很多,待以后慢慢学习。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2118

基于 HTML5 Canvas 的交互式地铁线路图

地图稍微内容有点多,要全部展示,字显得有点小了,但是没关系,可以按照需求放大缩小,字体和绘制的内容并不会失真,毕竟都是用矢量绘制的~

html鼠标自定义右键菜单:css+js实现自定义html右键菜单

我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

HTML的Doctype

<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂(兼容)模式呈现。

Js禁用html表单enter提交

很多时候我们开发的前端页面要考虑到用户在进行输入操作的时候回车只是为了跳到下一个输入项,而不是保存提交注册,为此需要禁用enter,从而就可以使用tab来行使enter的功能。所以就的使用js来控制html。

js 调用向html追加内容

position 是相对于 element 元素的位置,并且只能是以下的字符串之一:1. beforeBegin: 插入到标签开始前,2. afterBegin:插入到标签开始标记之后

什么是XHTML?

XHTML代表可扩展超文本标记语言(eXtensible HyperText Markup Language),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。XHTML是基于可扩展标记语言(XML),由万维网联盟(W3C)开发

你可能从未听说过的15种HTML元素方法!

我们来讨论HTML和DOM之间的区别。显然,一个普通<table>元素就是HTML。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML,不过它与JavaScript无关。

KeyPress 和KeyDown 、KeUp之间的区别

input 框在输入查询内容之后,按回车键居然有两种不同的表现形式(input 框没有绑定键盘事件),谷歌和火狐功能正常,但IE在按了回车键以后居然自动调用方法。

HTML发展历程

HTML是超文本标记语言的缩写,不同于C或JAVA等编程语言,HTML由标签组成。通过标签可以在网页中插入文字、图片、链接、音频、视频等元素,进而描述网页。和Windows一样,随着技术的发展,HTML经历了多次版本更新

css/html 空格,html空格符的显示、标示方式【html空格代码】

css/html 空格,html空格符的显示、标示方式。在html里面空格的话,你直接敲打出来的空格是不可以的,这篇文章将通过html和css中设置显示空格的实现总结

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广