使用emmet语法，通过缩写提高html/css的编写速度

生成html结构语法

生成html文档结构

比如对于一个空的html
!+tab 就能生成html文档结构

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body></body>
</html>

生成标签

不输入标签名，默认是div

生成单个标签
标签名+tab
只需要输入div+tab就可以

<div></div>

生成多个标签
标签名*num+tab
div*3+tab

    <div></div><div></div><div></div>

父子级关系标签

使用>符号，例如ul>li*3+tab

<ul><li></li><li></li><li></li>
</ul>

兄弟关系的标签

使用+号比如 div+p+tab

<div></div>
<p></p>

生成带有类名或者id的

直接使用 .和#即可
.demo+tab #first+tab

<div class="demo"></div>
<div id="first"></div>

p.demo#first

<p class="demo" id="first"></p>

生成带内容的

使用{}括起来
p{1}*2

    <p>1</p><p>1</p>

生成有顺序的

使用自增符号$,$从1开始

p.h$*3

    <p class="h1"></p><p class="h2"></p><p class="h3"></p>

p#h$*2

    <p id="h1"></p><p id="h2"></p>

p{$}*2

    <p>1</p><p>2</p>

emmet生成CSS样式

写各类属性的时候大多可以使用首字母缩写即可打出完整属性名
比如输入w+table就可以打出width

w100+tab > width: 100px;
ti2em+tab > text-indent: 2em;

前端程序员偷懒工具：emmet语法相关推荐

快速开发插件emmet，前端程序员炫技必备！
同学们肯定看到过有前端程序员在开发的时候输入一小行代码然后立马就出现一大串写好的代码,感觉很高大上的感觉.今天小千就来教大家如何实现这个效果. 平时我们在做开发的时候最费时间的工作就是写 HTML.C ...
前端程序员发展必备工具
前言:整理了关于前端程序员所需要的资源,一起奋斗努力前端开发主要包括三大方面: 页面布局实现:基本的布局和美化(html,css) 数据逻辑操作渲染:js和前端框架组件或者模块化相连:moudle ...
前端程序员常用的9大构建工具
构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk).构建包括编译.连接跟把代码打包成可用的或可执行的形式. 在小型项目中,开发者往往手动调用构建过程,这 ...
年薪30W前端程序员，需要吃透的前端书籍推荐
随着互联网时代的发展,web进入2.0时代,前端开发的岗位逐渐独立出来,大量的前端程序员工资和技术水平飙升.前端框架层出不穷,新技术不断更新,作为前端的程序员也是倍感吃力.但为了高薪,每一个前端开发者 ...
web前端程序员职位介绍
web前端程序员职位介绍: 1.1年以上React实际项目开发经验. 2.熟悉webpack配置. 3.熟悉ES6语法. 4.熟悉TypeScript编程语言. 5.熟悉antd ui框架. 计算机相 ...
推荐一个Web前端程序员必须要吃透的书籍！
随着互联网时代的发展,Web进入2.0时代,前端开发的岗位逐渐独立出来,大量的前端程序员工资和技术水平飙升.前端框架层出不穷,新技术不断更新,作为前端的程序员也是倍感吃力.但为了高薪,每一个前端开发者 ...
初中级前端程序员面试中小型公司会问哪些问题?
初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同,有的面试过程很轻松,有的面试官是个架构师level 挺高不会问八股文,给出了几个现实中的场景,然后转换成代码的逻辑去让实现. ...
前端程序员的职业发展规划与路线——ChatGPT的回答
文章目录一.前端程序员的职业规划是? 回答1: 作为一个前端开发程序员,您的职业发展路线可能如下: 回答2:作为前端开发程序员,您的职业发展路线可能如下: 回答3: 你的职业发展路线可能是这样的: ...
超级好用的开发工具，程序员实用工具整理
其实本来打算写的是web开发工具合集,但写着写着觉得不太过瘾,所以索性把所有用得到的工具都列出来了. 如果能在一开始就把这些工具利用起来,相信可以大大提高工作效率,所以起码对新手来说是比较有益的.而且 ...

前端程序员偷懒工具：emmet语法