关闭

VSCode中快捷输入HTML代码

时间: 2019-02-24阅读: 1346标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

Js禁用html表单enter提交

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

在html中做嵌套页面_客户端实现html页面的嵌套

如何在客户端利用html、或js将一个html页面嵌套在另一个页面中,这篇文章主要讲解以下几种方式:IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法

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

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

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

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

html5和html的区别

html5是对html的第五次重大修改。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准!html5继承了html所有的语法,同时html5也会增加一些新的特性

如何用 Python 解析 HTML

用一些简单的脚本,可以很容易地清理文档和其它大量的 HTML 文件。但是首先你需要解析它们。我决定为自己创建一个项目来解决这个问题。 一种方法是搜索未使用的现有图像文件。

KeyPress 和KeyDown 、KeUp之间的区别

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

什么是XHTML?

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

HTML的Doctype

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

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

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

点击更多...

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