前端从基础到精通
5G风口,前端岗位的内涵和外延不断扩大,而企业缩减人力成本,前端岗位净增越发激烈,前后端界限融合,大前端当道:多端开发能力,全栈开发能力,部署和运维能力提升。
解甲归田1
种一棵树最好的时间是十年前,其次是现在。
展开
-
一篇文章玩转GitHub-Git版本管理-进阶-GitHub多人协作开发-强烈建议收藏!
1. Git基础1.1 版本管理1.1.1 什么是版本管理版本管理是一种记录文件变化的方式,以便将来查阅特定版本的文件内容。1.1.2 人为维护文档版本的问题文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要复制,不方便多人同时编辑同一个文档,容易产生覆盖![ ]](https://img-blog.csdnimg.cn/20200220155128402....原创 2020-02-20 15:57:56 · 632 阅读 · 0 评论 -
看看大佬是如何用一行代码实现网页变灰的效果的
4月4日清明节,全国人民一起哀悼新冠肺炎牺牲烈士和逝世同胞。清明时节雨纷纷,逝去的同胞,英雄一路走好。网站变灰昨天我们看到很多网站主页和内容都变成了灰色,包括按钮,图片,是如何做到的呢?实现方式html.gray { -webkit-filter: grayscale(.95);}如果将这行代码取消,就会发现网站页面的重新还原回来了。其他的网站,比如CSDN是这么实现的...原创 2020-04-05 01:09:37 · 535 阅读 · 0 评论 -
audio标签实现网页循环播放背景音乐代码实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-02-23 20:05:36 · 1731 阅读 · 0 评论 -
JS检测浏览器是否支持视频、音频格式代码,一步检测浏览器支持视频音频格式
使用audio元素的canPlayType检测浏览器支持的文件格式该方法采用Mine类型和编解码器参数,并返回下列3个字符串值之一:probably/maybe/空字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi...原创 2020-02-23 19:54:44 · 1710 阅读 · 0 评论 -
HTML5之SVG最全知识点整理,附有案例及源码演示,建议收藏! SVG
使用SVGSVG基础使用SVG1.使用SVG1.1 SVG发展历史在 2003 年一月,SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比,使用 SVG 的优势在于:SVG 可被非常多的工具读取和修改(比如记事本)SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。S...原创 2020-02-23 17:56:40 · 712 阅读 · 0 评论 -
jQuery-JQuery事件注册-JQuery事件对象-拷贝对象-多库共存-插件-附带练习案例-建议收藏
jQuery学习目标:能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下:优...原创 2020-02-20 15:36:12 · 280 阅读 · 0 评论 -
jQuery-JQuery属性操作-JQuery文本属性值-JQuery元素操作-JQuery尺寸、位置操作-建议收藏!
jQuery学习目标:能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸、位置1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ;1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a>元素里面的 href ,比如...原创 2020-02-20 15:29:43 · 229 阅读 · 1 评论 -
jQuery-01-基本使用-JQuery选择器-JQuery样式操作-JQuery效果-建议收藏!
jQuery学习目标:能够说出什么是 jQuery能够说出 jQuery 的优点能够简单使用 jQuery能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 jQuery 选择器能够操作 jQuery 样式能够写出常用的 jQuery 动画1.1. jQuery 介绍1.1.1 JavaScript 库 JavaScript库:即 library,是一个封...原创 2020-02-20 15:23:39 · 284 阅读 · 0 评论 -
移动web开发之响应式布局,建议收藏!
移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:小于768的为超小屏幕(手机)768~992之间的为小屏设备(平板)992~1200的中等屏幕(桌面显示器)大于1200的宽屏设备(大桌面显示器)1.2 响应式布局容器响应式需要一个父级做为布局容器,来配合子...原创 2020-02-19 15:47:06 · 252 阅读 · 0 评论 -
移动web开发之rem布局,建议收藏!
移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html { font-size: 12px;...原创 2020-02-19 15:42:13 · 172 阅读 · 0 评论 -
移动web开发之flex布局,建议收藏!
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.2 flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局,还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 f...原创 2020-02-19 15:39:34 · 173 阅读 · 0 评论 -
移动web开发之流式布局-建议收藏!
移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主...原创 2020-02-19 15:36:47 · 222 阅读 · 0 评论 -
HTML5-CSS3之搞懂什么是3D旋转,建议收藏!文章末尾有代码,给女朋友做个旋转画册吧!
一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值二、3D 转换3D 转换知识要点3D 位移:translate3d(x, y, z)3D ...原创 2020-02-19 15:24:05 · 429 阅读 · 0 评论 -
建议收藏!HTML5-CSS3-动画详解-附有案例奔跑的熊大[附带代码]
一、rotate2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤:给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}二、三角代码演示二、设置元素旋转中心点(transform-orig...原创 2020-02-19 15:16:14 · 1356 阅读 · 0 评论 -
HTML5-CSS3-新增标签-多媒体、表单属性、input标签、属性选择器、结构伪类选择器、伪元素选择器、2D旋转
HTML5一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些...原创 2020-02-19 15:07:28 · 305 阅读 · 0 评论 -
CSS高级技巧:元素的显示与隐藏-用户界面样式-溢出的文字省略号显示-精灵技术-滑动门核心技术
CSS高级技巧目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!1.1 display 显示(重点)...原创 2020-02-19 00:03:08 · 646 阅读 · 0 评论 -
CSS布局三种机制之定位
定位(position)目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中:普通流(标准流)浮动让盒子从...原创 2020-02-18 23:40:38 · 408 阅读 · 0 评论 -
案例-学成在线CSS练习
1. 学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。启超老师:取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~1.1 前期准备素材学成在线PSD源文件开发...原创 2020-02-18 23:28:19 · 964 阅读 · 5 评论 -
CSS必学三大技巧之浮动(float)
浮动(float)目标记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具1.1 CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标...原创 2020-02-18 23:11:17 · 378 阅读 · 0 评论 -
CSS-盒子模型-内外边距
盒子模型(CSS重点)css学习三大重点: css 盒子模型 、 浮动 、 定位目标:css 盒子模型理解:能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用:能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模...原创 2020-02-18 22:44:26 · 1160 阅读 · 0 评论 -
CSS-复合选择器-CSS背景-CSS三大特性
重点:复合选择器后代选择器并集选择器标签显示模式CSS背景背景位置CSS三大特性优先级1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足...原创 2020-02-18 22:16:28 · 400 阅读 · 0 评论 -
CSS字体样式属性调试工具
CSS字体样式属性调试工具目标应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常用的emment语法能够使用开发人员工具代码调试1.font字体1.1 font-size:大小作用:font-size属性用于设置字号p { font-size:20px; }单位:可以使用相对长度单位,也可以使用绝对长度...原创 2020-02-18 21:11:22 · 190 阅读 · 0 评论 -
CSS选择器-使用方法及规范
前端基础.CSS基础选择器CSS选择器(重点)学习目标:理解能说出选择器的作用id选择器和类选择器的区别应用能够使用基础选择器给页面元素添加样式1. CSS选择器作用(重点)如上图所以,要把里面的小黄人分为2组,最快的方法怎办?很多, 比如 一只眼睛的一组,剩下的一组选择器的作用 找到特定的HTML页面元素启超老师一句话说出他们: ※※※※**CS...原创 2020-02-18 20:47:09 · 762 阅读 · 2 评论 -
CSS引用的三种方法
前端基础.CSS初识CSS层叠样式表学习目标理解css的目的作用css的三种引入方式应用css三种引用方式的书写通过样式规则给标签添加简单的样式1.HTML的局限性说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义,比如<h1>表明这是一个大标题,用<p>表明这是一个段落,用<img>表明这儿有一个图片, 用&l...原创 2020-02-18 20:39:25 · 729 阅读 · 0 评论 -
前端基础-列表和表单-前端入门必看
前端基础-列表和表单-前端入门必看1. 列表标签(重点)学习目标理解无序列表的应用场景自定义列表的应用场景应用无序列表语法自定义列表语法问?前面我们知道表格一般用于数据展示的,但是网页中还是有很多跟表格类似的布局,如下图~~ 我们用什么做呢?答:答案是列表, 那什么是列表? 表格是用来显示数据的,那么列表就是用来布局的。 因为非常整齐和自由概念:...原创 2020-02-18 20:25:20 · 493 阅读 · 0 评论 -
前端基础-表格-前端入门必看
前端基础-表格-前端入门必看HTML 第二天目标能够利用表格、列表和表单完成注册页面的综合案例能出说表格用来做什么的能说出列表用来做什么的能说出表单用来做什么的为了让我们页面显示的更加整齐,我们需要学习三个表(表格、表单、列表)表格 table(会使用)目标:理解:能说出表格用来做什么的表格的基本结构组成应用:能够熟练写出n行n列的表格能简单的合并单元格...原创 2020-02-18 20:16:34 · 659 阅读 · 0 评论 -
HTML常用标签-前端入门必学
HTML常用标签-前端入门必看学习目标理解:相对路径三种形式应用排版标签文本格式化标签图像标签链接相对路径,绝对路径的使用1. HTML常用标签首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。...原创 2020-02-18 20:00:54 · 190 阅读 · 0 评论 -
HTML基础-认识HTML-入门必看
前端基础.认识HTML学习目标理解HTML的概念HTML标签的分类HTML标签的关系HTML标签的语义化应用HTML骨架格式sublime基本使用1. HTML 初识HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。HTML 不是一种编程语言,而是一种标记语言 (markup language...原创 2020-02-18 19:40:11 · 284 阅读 · 0 评论