95后码农——webstorm的Emmet快捷方式_ws如何实现emmet-程序员宅基地

技术标签: css  小技巧  前端  html  

最近才毕业,在工作中还是习惯用webstorm来写前端的代码,想要加快自己的代码效率,必不可少的就是熟记快捷方式了。之前老师也讲过,现在想加强一下记忆,也是整理一下。

Emmet简介

它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

目前,很多前端开发工具,包括 Webstorm,HBuilder,Dreamweaver ,VSCode 等都已经集成了 Emmet。

没有集成 Emmet 的编辑器都提供了安装插件,如 Sublime Text、Eclipse/Aptana、Notepad++等。

关于webstorm的 Emmet 快捷键,网上有,但是没有一个总的集合。

基于我自己的使用 Webstorm 的经验,特写此文,总结一下 Emmet 的快捷方式,也给新手做一个使用指南。

Emmet 在 webstorm 中,通过简写代码+ tab键就可以生成对应的完整代码。

一、标签写法

1、快速生成H5的网页结构
! + tab    <!--需要注意的是这里的感叹号一定要是英文状态下的-->
html:5 + tab

在这里插入图片描述
这里值得一提的是,这里面生成的代码要比自己用软件新建生成的更好

2、meta写法
 meta:utf + tab
 <!--以下是运行后生成的代码-->
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

但对于很多移动端开发需求来说,viewport是必不可少的,所以在这里引申出了另外的写法

meta:vp + tab
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3、CSS文件的引入
link + tab
<link rel="stylesheet" href="">
link:css + tab
<link rel="stylesheet" href="style.css">
4、类名(.),id名(#)
div.box
<div class="box"></div>
 
div#header
<div id="header"></div>
 
div.box#header
<div class="box" id="header"></div>
 
div.box.top#header
<div class="box top" id="header"></div>

类名里面有个特殊情况,当你只用==.==书写的时候,不写标签名的话,他会默认是div

. + tab
<div class=""></div>
5、属性( [ ] )
div[title]
<div title=""></div>
 
div[title]
<div title=""></div>
 
button[type=submit][name=login]
<button type="submit" name="login"></button>
 
button[type=submit name=login]
<button type="submit" name="login"></button>
6、子节点(>),兄弟节点(+),上级节点(^)
div.box>p
<div class="box">
    <p></p>
</div>
 
 
div.box+p
<div class="box"></div>
<p></p>
 
div.box>p+div.small^div.next
<div class="box">
    <p></p>
    <div class="small"></div>
</div>
<div class="next"></div>
7、自增符($)、内容( { } )、重复符( * )
ul.list>li*3
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
</ul>
 
ul.list>li{这个是列表}*3
<ul class="list">
    <li>这个是列表</li>
    <li>这个是列表</li>
    <li>这个是列表</li>
</ul>
 
ul.list>li.item${这个是列表 $ }*3
<ul class="list">
    <li class="item1">这个是列表 1</li>
    <li class="item2">这个是列表 2</li>
    <li class="item3">这个是列表 3</li>
</ul>
 
ul.list>li{ 内容 $$$}*3
<ul class="list">
    <li> 内容 001</li>
    <li> 内容 002</li>
    <li> 内容 003</li>
</ul>

二、写样式

最快捷的书写方式:记住样式的首字母

tac + tab
text-align: center;
bgc + tab
background-color: #fff;

如果是需要使用带数值的参数的话,直接在后面加入数值即可

w100/*当然,最好的写上单位。比如px或者%*/
width: 100px;

h100
height: 100px;

三、无意义填充

lorem10
-----------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, exercitationem?

四、建议

其他还有更多的使用技巧可以在官网查看大家可以参考 Emmet 官网:https://docs.emmet.io/cheat-sheet/
大家只要加强练习,自然而然就熟练了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/PrinceMe1/article/details/118696171

智能推荐

流行的node-forge JavaScript库中存在漏洞_漏洞扫描 node-forge@^0.10.0-程序员宅基地

文章浏览阅读1.3k次。流行的node-forge JavaScript库的一个遗留函数中存在一个安全漏洞(CVE-2020-7720),攻击者可利用该漏洞对应用程序执行原型污染攻击。超过350万个存储库使用的node-forge实现了各种加密实用程序,TLS协议和用于开发web应用程序的工具。原型污染是一种严重的漏洞,攻击者可通过在运行时修改应用程序的代码利用该漏洞篡改应用程序的行为。这通常通过恶意输入来执行,取决于脆弱的组件,可导致一系列攻击,包括拒绝服务甚或远程执行代码。该漏洞存在于node-forge中的util._漏洞扫描 node-forge@^0.10.0

Spring Boot 2.0系列文章(三):Spring Boot 2.0 配置改变_mapping between endpoint ids and the path that sho-程序员宅基地

文章浏览阅读3.8k次。前提好久没更新文章了,本来打算在毕业之前不更新了,这里,对不住了,我又更新了。����之前翻译了两篇 Spring Boot 2.0 的文章,Spring Boot 2.0系列文章(一):Spring Boot 2.0 迁移指南 和 Spring Boot 2.0系列文章(二):Spring Boot 2.0 新特性详解今天就继续详细探究 Spring Boot 2.0 里面..._mapping between endpoint ids and the path that should expose them

Java数据结构与算法(排序)——排序算法总结分析_java数据相关度排序-程序员宅基地

文章浏览阅读203次。一、排序算法的稳定性_java数据相关度排序

Webpack笔记(三)_webpack 兼容 chrome 60-程序员宅基地

文章浏览阅读194次。四.webpack生产环境的基本配置4.1提取css成单独文件安装插件mini-css-extract-plugin//局部module: { rules: [ { test: /\.css$/, use: [ // 创建 style 标签,将样式放入 // 'style-loader', // 这个 loader 取代 style-loader。作用:提取 js 中的 css 成单独文件 Mi..._webpack 兼容 chrome 60

《编译原理》实验二-递归下降语法分析器的构建-实验报告_递归下降 请在本页面最下方上传实验所有源代码及实验报告(这里的源代码是指已经完-程序员宅基地

文章浏览阅读9.1k次,点赞23次,收藏80次。《编译原理》实验二-递归下降语法分析器的构建-实验报告一、实验要求二、实验方案三、预估问题1、预估问题2、理论基础四、内容和步骤1、针对4.8习题输入和输出的设计及代码2、针对现场给定语法的设计和处理3、实验具体步骤五、实验结果1、代码2、截图六、实验结论1、实验结论2、分析和总结3、对预估问题的结论一、实验要求  运用递归下降法,针对给定的上下文无关文法,给出实验方案。预估实验中可能出现的问题。二、实验方案1、构造LL(1)分析表  分析给定文法,消除左递归及提取左因子,以使文法符合LL(1)文_递归下降 请在本页面最下方上传实验所有源代码及实验报告(这里的源代码是指已经完

灰色预测GM(1,1)模型及MATLAB实现_matlab gm(1,1)-程序员宅基地

文章浏览阅读1.5w次,点赞35次,收藏218次。因为做毕设开始接触的灰色预测,发表的第一篇小论文也是基于GM(1,1)灰色预测模型的,这一篇主要想详细记录一下灰色理论的基础知识以及分享一下我在毕设中用到的MATLAB代码。如有问题欢迎指正交流(#.#)灰色预测方法是一种用来对灰色系统进行预测的方法,灰色系统是指信息不完全的一种系统,是一种广泛用于研究少数据、贫信息问题的方法。GM(1,1)预测模型的基本原理是:对某一数据序列使用累加的方法生成一组变化趋势明显的新序列,对新的数据序列建立模型并进行预测,然后利用累减的方法逆向计算,使其恢复为原始序列,以此_matlab gm(1,1)

随便推点

第四章 数组和指针-程序员宅基地

文章浏览阅读88次。1.列出使用数组而不是vector的缺点ANS:与vector类型相比,数组具有如下特点:数组的长度是固定的,而且数组不提供获取其容量大小的size操作,也不提供自动添加元素的push_back操作。因此,程序员无法再程序运行时知道一个给定数组的长度,而且如果需要更改数组的长度,程序员只能创建一个更大的新数组,然后把原数组的所有元素复制到新数组的存储空间中去。与使用vector类型的...

matlab编程之如何绘图_matlab画图-程序员宅基地

文章浏览阅读2.8k次。1、绘制一个直线x=[-5:15:100]y=2*x+4plot(y)2、绘制一条抛物线x=[-100:15:100]y=x.*x+4.*x-10plot(y)3、一个坐标轴里面绘制两个图形x=[-100:15:100]y=x.*x+4.*x-10z=4*x+536plot(x,y,x,z)如果一个图形在一个坐标轴里面呢??x=[-100:15:100]y=x.*x+4.*x-10z=4*x+536subplot(1,2,1)pl.._matlab画图

Xcode 6 上模拟器键盘弹出后找不到中文输入法的问题_swift 键盘弹出没有小地球-程序员宅基地

文章浏览阅读423次。今天在使用IOS模拟器的时候需要输入中文,却发现模拟器键盘不能切换输入法。后来找到了解决方法,给大家分享下:先在模拟器中找到设置,即Settings->General->Keyboard->Keyboards->Add New Keyboard...到了这里大家应该就都明白了,在列表中选择自己需要的输入法,我选择的中文输入法是Chinese-Simplified(PinYin)即简_swift 键盘弹出没有小地球

idea配置ssh远程连接服务器(效率)_idea remote ssh-程序员宅基地

文章浏览阅读5.8k次,点赞4次,收藏10次。1.浏览远程主机 tools -> deployment ->browse remote host2. 与远程主机建立连接3. 效果展示点击idea 编辑器 右边栏remote host4.开启ssh5.效果展示6. 完成以上步骤之后,发布项目将变得非常简单6.1 上传jar到服务器,只需要将打好的jar拖到右边 remote host 对应主机下的文件即可6.2 点击idea 编辑器 下边栏 Terminal ,找到对应主机连接,执行相应.._idea remote ssh

二阶矩阵特征值与特征向量的计算matlab程序(可指定计算精度)_求二次型的特征值的matlab算法-程序员宅基地

文章浏览阅读2.4k次。先前由于项目需要,自己实现了二阶矩阵特征值与特征向量的求取代码,其实很简单,主要部分就是求解一个二次方程的根,现在分享给大家作为参考(因为组长说求平方根可能比较费资源,为方便硬件实现,甚至连平方根求取的代码都是自己写的\笑哭):function [V,lamda]=myEig(A,err);% 求特征值与特征向量的程序% err为指定的计算误差a11=A(1,1);a12=A(1,2);a21=A(2,1);a22=A(2,2);delta=(a11-a22)^2+4*a12*a21;_求二次型的特征值的matlab算法

js生成java uuid_JS生成UUID-程序员宅基地

文章浏览阅读361次。一、UUID是什么UUID就是Universal Unique IDentifier的缩写,它是一个128位,16字节的值,并确保在时间和空间上唯一。它是把硬件地址、时间以及随机数结合在一起,它保证对在同一时空中的所有机器都是唯一的。通常平台会提供生成UUID的API。UUID按照开放软件基金会 (OSF)制定的标准计算,用到了以太网卡地址、纳秒级时间、芯片ID码和许多可能的数字。由以下几部分的组..._js 调用java uuid

推荐文章

热门文章

相关标签