如何提高写前端的效率?干货,快进!

我们在写前端的时候,面对重复代码的时候,很多时候就会复制粘贴,实际上可以通过技巧来提高写前端的效率。接下来将介绍几个常用的提高效率的技巧

目录

    • 注释
    • 乘法
    • 后代
    • 兄弟
    • 上级
    • 分组
    • 自增
    • ID和类
    • 自定义属性
    • 文本
    • 隐式标签

注释

输入以下代码

Ctrl+/

另外,取消注释也是Ctrl+/

乘法

*
输入以下代码

(div>ul>li)*5

在这里插入图片描述

后代

>
输入以下代码

nav>ul>li

在这里插入图片描述

兄弟

+
输入以下代码

div+p+bq

在这里插入图片描述

上级

^
输入以下代码

div+div>p>span+em^bq

在这里插入图片描述
输入以下代码

div+div>p>span+em^^bq

在这里插入图片描述

分组

()
输入以下代码

(div>dl>(dt+dd)*3)+footer>p

在这里插入图片描述

自增

$
输入以下代码

ul>li.item$*5

在这里插入图片描述
倒序的

 ul>li.item$@-*5

在这里插入图片描述
编号为3位数字

ul>li.item$$$*10

在这里插入图片描述
自增从5开始,输出10条

ul>li.item$@5*10

在这里插入图片描述

ID和类

#和.

#header

在这里插入图片描述

.title

在这里插入图片描述

form#search.wide

在这里插入图片描述

自定义属性

[]

p[title="Hello world"]

在这里插入图片描述
多个属性的情况

 td[rowspan=2 colspan=3 title]

在这里插入图片描述

文本

{}

a{Hello world}

在这里插入图片描述

p{段落内容}

再按 Tab键(下同)
例如:
在这里插入图片描述

隐式标签

.class

在这里插入图片描述

em>.class

在这里插入图片描述

ul>.class

在这里插入图片描述

table>.row>.col

在这里插入图片描述
还有很多,所有未知的缩写都会转换成标签————》详细戳https://docs.emmet.io/cheat-sheet/

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注!
欢迎关注微信公众号:宝藏女孩的成长日记
如有转载,请注明出处(如不注明,盗者必究)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/568789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带你一起学习工程经济学!与生活相关的一些实用的公式。研究经济学的理由就是【为了避免被经济学家欺骗】

目录一、框架二、设备及工器具购置费的计算2.1国产设备2.2进口设备2.3用实例来理解这些公式三、预备费的计算3.1基本预备费3.2价差预备费3.3用实例来理解这些公式四、建设期利息4.1各年应计利息4.2用实例来理解公式研究经济学的理由就是【为了避免被经济学家欺骗】——琼罗宾逊…

实操代码带你理解CSS中的常用选择器(你值得掌握!)

在CSS中,我们要给一个元素定义样式,首先得把这个元素选出来,我在网上看了很多文章,再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家,哈哈哈一起学习一起进步! https://blog.csdn.net/ha…

手把手教你如何下载大厂页面的字体——开发

在个人学习的商城开发中,有些网上比较好看的字体想要下载该怎么办呢?接下来详细介绍一下 拿小米商城举例:https://www.mi.com/ 这个搜素框中的搜索符号其实是一种字体,那么如何来下载这种字体呢? 步骤: 右键…

一篇文章带你实操代码理解盒子模型

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录一、盒子模型的几个关键词二、盒子有尺寸,…

CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝对定位和相对定位子绝父相绝对定位相对定位…

CSS中z-index属性的简单理解

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 总之就是一句话:拥有更高堆叠顺序的元素总是会…

python中pip已经安装好第三方库,但在pycharm中import时还是标红

已经pip安装好第三方库了,但是在pycharm中import还是标红,像下图: 我记得上次重装系统,出现这种情况的时候,我重启一下pycharm就行了(但是感觉pycharm一开一关很费时间) 还有一个解决办法&…

软工学子带你一起学习工程经济学!献上与工作相关的实用公式(值得一进)

研究经济学的理由就是【为了避免被经济学家欺骗】——琼罗宾逊 以前看见过一句话:大学生的钱是最好赚的。为什么?因为大学生要面子、没有经历过赚钱的心酸以及思想单纯容易被骗。最近一件事情让我感触很深,前几天室友将学校的水果店给投诉了…

Enterprise Architect(EA)画UML之用例图,敲详细讲解+实战举例

目录具体步骤前提准备实战画用例图实战加一绘制“机票预订系统”用例图补充补充一:如何调整整体字体补充二:如何修改边框字体补充三:在关闭Enterprise Architect之后如何打开?在《UML面向对象分析、建模与设计》中学到了用例图&am…

带你一起学习实用计算机英语!(IT行业、四六级党记起来)《软件工程专业英语》第二单元的重点词汇+名词缩写+重难句+软件需求规格说明

英语是全球IT行业的行业语言,英语技能是IT行业最基本的技能之一。因此熟练掌握相关英语技能对于发展职业生涯具有积极的作用。 《软件工程专业英语》适用于高等院校软件工程、计算机科学及其相关专业、软件学院、各类职业信息技术学院和专业培训机构等。 当我拿到《…

商城左侧菜单栏网页模板

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 哈哈哈直接上代码趴! 商城左侧菜单栏网页模板…

IntelliJ IDEA 如何导出安卓(Android)apk文件 详细教程

做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们需要将自己的程序打包成Android安装包文件–APK(AndroidPackage),其后缀名为".apk"。将APK文件直接上传到Android模拟器或Android…

IntelliJ IDEA 如何用 真机 测试安卓(Android)App 实战移动端

目录前言真机测试步骤实战移动端测试前言 https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 用…

一篇文章带你快速入门JavaScript(实操代码)

目录一、前提简介1.1什么是JavaScript1.2JavaScript和Java语言的区别1.3Html、Css和Javascript1.4Javascript作用二、实操代码2.1Javascript写在本html内2.2Javascript可以写在单独的文件中(外联方式)2.3实战:点击一个盒子,让另外…

心情再差,也还是要拿起我的 JavaScript 实战重点代码

昨天与国家奖学金失之交臂,伤心的哭了一晚上,生活也还是要继续,抹完了眼泪今天继续干我的JavaScript! 目录一、JavaScript的几个常用函数实战下载框制作二、如何获取一个或者多个元素2.1根据ID查找2.2根据class查找2.3根据标签查找…

如何删除github远程仓库?三部搞定!

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 让这个可爱的宝藏女孩在努力的道路上与你一起同行! 如有转载,请注明出处(如不注明,盗者必究&#xf…

js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验

等到下次需要用的时候,可以回来找模板用哈哈哈哈! 刚碰jQuery,今天是个好日子,明天继续学jQuery,明天也是个好日子。 https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注! 欢迎关注…

【资讯】2017年最好的25大发明,你最钟爱哪个?

引言《时代周刊》每年都会评出一份有趣的发明榜单,悉数一年间世界范围内的重大发明。今年的榜单出来后,「得到」作者马徐骏抢先进行了解读。带你一起看看,2017年有哪些发明正在悄然改变我们的生活。1. 阿迪达斯的4D跑鞋——Futurecraft这款鞋…

js实战代码系列—带你玩jQuery带你飞

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录前言引入库一个简单的自定义动画模板弹…

软工学子与你一起了解资金时间价值 之 复利(利滚利)+ 贷款的基本常识 + 现金流量图 ——《工程经济学》

研究经济学的理由就是【为了避免被经济学家欺骗】——琼罗宾逊 前段时间学校在整治校园贷的事情,这让我想到高利贷,刚好最近在《工程经济学》中讲到复利的知识,花时间用通俗易懂的话来讲解一下 先来看看重点概况 一、现金流量图:…