- 博客(39)
- 收藏
- 关注
RSS订阅原创 前端入门系列
前端HTML & CSS 基础入门（1）初识前端HTML & CSS 基础入门（2）段落及文本前端HTML & CSS 基础入门（3）列表及其样式前端HTML & CSS 基础入门（4）边框与背景前端HTML & CSS 基础入门（5）超链接前端HTML & CSS 基础入门（6）表格前端HTML & CSS 基础入门（7）表单...
2019-06-22 16:48:16
269
原创 前端三大框架有哪些异同？
前端三大框架有哪些异同，web前端的框架可谓五花八门，多到让你想象不到，但能沉淀下来的不多，而所谓的前端三大框架，指的时Angular、React、Vue，这三个框架时当下最为流行也时最多人用的框架，我故意这样写意在说明三大框架的出现顺序，而且我永远相信要弄懂一个东西，你首先要了解它的来龙去脉，所以下面先说说几个框架各自的特点：AngularAngular原名angularJS诞生于2009年...
2019-06-21 22:00:10
5994
原创 重学CSS（10）—— 深入理解BFC结界
1.CSS的结界——BFCBFC是block formatting context的缩写，中文名为“块级格式化上下文”。前面也多次提到了这个听起来十分拗口的属性，那么CSS设计这个属性的初衷是什么呢？记住一句话：拥有BFC特性的元素会形成类似“结界”的封闭内部空间，该元素内部的元素以及该元素本身都不会影响外部元素的表现。要理解这句话，还得通过一些例子来证明，在举例证明之前，我们必须得知道一件事...
2019-06-21 22:00:03
211
原创 重学CSS（11）—— overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线——border-boxoverflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。<div style="width: 200px;height: 200px;ov...
2019-06-21 21:59:58
466
原创 重学css（9）——那些年骗过你的float和“清浮动”
1.探究图片环绕文字的传说在深入了解float之前，相信大家都听过一个传说，就是float被设计出来的目的是为了实现文字环绕图片的效果，可能是初学的时候忘了，还是受了“清浮动”的毒，我自己都忘了有没有用float去实现过这个效果。因此下面我们先来实现一下float的设计初衷，文字环绕图片效果。<div style="width: 200px"> <div style=...
2019-06-20 21:59:59
193
原创 重学CSS（8）—— 内联元素的掌管者line-height和vertical-align（下）
1.vertical-align的五类属性抛开inherit这类全局属性不谈，个人把vertical-align分成五类，作者将第一类和第二类总结成线类。（1）跟x字母打交道的线类：baseline/middle（2）基于行框盒子边缘的线类：top/bottom（3）跟父级基线相关的文本类：text-top/text-bottom（4）常用于公式的上标下标类：super/sub（5）具...
2019-06-20 21:59:56
215
原创 前端基本功（三）：javascript中让人脑壳疼的this关键字
javascript 的this关键字this是什么this是javascript中的关键字之一。他是使用对象自动生成的一个内部对象，只能在对象内部使用。它会根据上下文而进行变化，并且会在不同的 JavaScript的模式（是否为严格模式）下表现出差异。this的指向关键this的指向取决于什么地方以什么方式调用，而不是创建时。箭头函数中的 this 的作用域继承自执行上下文，箭头...
2019-06-16 21:59:59
980
原创 前端基本功（二）：JavaScript 的七种数据类型与数据类型检测的4种方法
JavaScript 的数据类型与类型检测一共有七种数据类型，六种简单数据类型，一种复杂数据类型。简单数据类型：String、Number、Boolean、Null、Undefined、Symbol。复杂数据类型：Object是唯一的复杂数据类型。 Array Function 这些引用类型值最终都可以归结为 Object 复杂数据类型。特殊的基本类型：基本包装类型 js为了方...
2019-06-16 21:59:57
988
原创 前端基本功(一)：不能不了解的Promise
promise: 异步编程的解决方案(一)一. promise是什么从这个单词语义上可以得知：这是一个承诺。承诺以一种优雅的方式处理我们的异步操作的回调函数带来的一系列的问题（调用时序、异常捕获等）。目前基于promise实现的API与类库也是很多的，并且广泛被大家使用（fetch、axios、oss sdk等）。曾几何时，我们在传统前端开发技术中，经常使用callback的方式来解...
2019-06-16 21:59:43
201
原创 前端基本功（四）：性能优化之你真的懂回流、重绘与合成层吗？
1. 页面的呈现流程浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，...
2019-06-16 21:59:41
979
原创 重学css（6）内联元素的掌管者line-height和vertical-align
1.字母x与CSS世界的基线要了解内联元素，就不得不提到字母x，正是有了x，内联元素才确定了自己的基线（baseline），有了baseline之后，才有了line-height和vertical-align。因此在学习后面的内容之前，必须要了解一个概念：字母x的下边缘线就是内联元素的基线（baseline）！既然x那么重要，因此CSS还给了它一个特殊的称呼叫x-height。顾名思义，x-...
2019-06-16 21:29:58
207
原创 开发中常用的 25 个JavaScript 单行代码
开发中常用的 25 个JavaScript 单行代码下面为大家介绍我在开发中常用的30个JavaScript单行代码，没有特别的顺序。1.强制布尔值要将变量强制转换为布尔值而不更改其值：const myBoolean = !! myVariable;!!null // false!!undefined // false!!false // false!!ture // ture!...
2019-06-16 21:29:55
257
原创 重学css（5）浅尝盒模型中最友好的border
盒模型四大家族，content，padding，margin，没一个省心的，终于遇到了最友好的border属性。border的友好从名字就可以看出来，设计者设计此属性的初衷就是给元素弄个"边框"。在空间计算上也没那么多的破事儿，是多少，就是多少。和其他三兄弟不同，border连百分比值计算的事儿都省了，这或许跟边框的粗细与元素大小没有必然联系有关，比如一个长宽200的盒子，和一个长宽400的盒子，...
2019-06-16 20:59:58
146
原创 重学css（4）深入理解margin
尺寸中padding负责内边距，一般情况下（抛开上一章的诡异现象）不会给使用者带来太多的麻烦，因此作者称之为温和的padding，而margin则有些激进，虽说负责外边距，但有时候还能做一些"内边距"的事情（负边距），还自带了些特殊属性（如叠压），本文会通过实例深入探究margin负边距的使用以及叠压问题的产生和计算方式1.margin负边距的正确打开方式说到margin，通常我们会想到一层透...
2019-06-15 22:00:05
239
原创 如何才能成为一个高薪的web前端程序员？
我所遇到的前端程序员分两种：第一种一直在问：如何学习前端？第二种总说：前端很简单，就那么一点东西。我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。今天来和大家如何成为优秀web前端开发，以及怎样获得高薪？何为前端工程师？前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！...
2019-06-15 21:59:48
309
原创 重新css（3）温和padding中的诡异CSS现象
盒模型的四大家族，原以为content部分比较复杂，单独写了一章，但在看padding部分的时候又遇到一个非常诡异的CSS现象，经过不断测试，终于得到一个比较接近于“真相”的解释，在测试这个诡异现象之前，先将padding的一些特性简单介绍一下，最后再来解释这个问题。1.padding与块元素的尺寸padding是盒模型的内边距（也称内补间），在CSS中，box-sizing默认的值是cont...
2019-06-15 21:29:58
178
原创 重新css（2）深入理解content
1.什么是替换元素在了解content之前，我们需要掌握CSS中一种常见的元素——替换元素。替换元素是“内容（content）可以被替换”的元素，常见的有“input”、“img”、“iframe”、“video”等。以图片为例 《img src=“1.png” /》我们只需要将src的图片替换掉，元素的内容就会发生改变，因此，内容可替换是替换元素的基本特性之一。除了内容可替换，替换元素还有如下...
2019-06-15 21:09:59
322
原创 重学css（1）如此高深的width,height,你真懂得？
1.元素的内外盒子HTML中只有两种元素，块级元素和内联元素。块级元素拥有“换行”的特性，一般用于结构（骨架），内联元素能够同行显示，一般用于内容展示。需要注意的是，块级元素并不是指“display:block”的元素，同样的，内联元素也不单单是“display:inline"的元素。但是，这两句话反过来说是可以的。那么是不是指，块级元素包含了"display:block/table/list-...
2019-06-15 21:09:54
289
原创 前端js入门知识——JavaScript 表达式
表达式是一个短语，JavaScript解析器可以计算此短语，并返回计算值。最简单的表达式是常量，代码如下:5上面的数字常量就是一个表达式，返回值是5。x = 123上面的代码是一个赋值语句，其实也是一个表达式，返回值是123。表达式可以拆解，等号运算符两侧的x和123都是表达式，都可以返回值，在赋值完成之前，x返回值是undefined。再来看一段代码:var url = "so...
2019-06-04 21:59:58
823
原创 前端js入门知识——JavaScript 声明变量
通过变量可以存储一段数据，通俗的讲，就是将数据存储在变量中。大家知道，数据都是存储在计算机内存中，怎么可能存储在一个变量中。事实上，变量是一个引用内存地址，且名字简短易懂的引用占位符，方便引用修改数据。本文将通过代码实例详细介绍一下JavaScript如何声明一个变量与其注意点。一.变量声明：ES2015之前，只能通过var声明变量，没有其他方式。随着版本发展到ES2015，新增let...
2019-06-04 21:59:55
1452
原创 前端js入门知识——JavaScript 注释
编写代码的时候，可能需要给代码添加一定的说明，以提高代码的可读性。注释内容并不会被当做代码执行，所以需要一定的规范和格式。一.单行注释://注释的内容代码实例如下://网站名称var webName = "兴趣部落";//网站所在地var address = "海岛市南步区";注:此种格式只能够一次注释一行内容。二.多行注释:/*注释内容*/代码实例如下:/*...
2019-06-04 21:59:53
682
原创 前端js入门知识—— JavaScript基础语法
一.变量是弱类型的:JavaScript是一门弱类型语言。强类型变量声明的时候必须在前面显式声明类型，比如int、float、char或者string等。JavaScript变量声明不需要指定类型。变量赋值时会自动判断类型并进行转换，代码实例如下:var webName="兴趣部落";var age=3;使用var即可声明变量并赋值，当然也可以先声明后赋值。代码实例如下：var...
2019-06-04 21:59:47
713
原创 前端js入门知识——JavaScript 放置
理论上，JavaScript脚本可以放置在页面的任何位置。比如放置在head或者body之中，甚至放置在html标签之外都可以正常的运行。一.放置于标签之间:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://w...
2019-06-04 21:59:43
335
原创 前端js入门知识——JavaScript 简单介绍
JavaScript是当前最为流行的编程语言之一。非常适合用于web编程，比如页面HTML元素的操作。一.JavaScript特点:（1）.它是一门脚本语言。（2）.它是一门轻量级的编程语言。（3）.JavaScript代码可直接插入HTML元素之中。（4）.以浏览器作为运行环境。二.将从本教程学到的知识:（1）.JavaScript语法知识。（2）.JavaScript对DOM...
2019-06-04 21:59:39
212
原创 前端五大坑，希望入坑的你都能知道
作为初入职场的我们，在学习与工作中，总是会遇到不同的挫折。虽然有些错误与某一个具体的行为相关，但有些错误却是所有Web开发人员都需要面对的挑战。因此，通过研究，体验和观察，小编总结了Web开发人员常犯的5个错误——以及如何避免这些错误分享给大家。错误一转件所谓“应该能行”的代码错误：无论是Java，还是在服务器上运行的代码，开发人员都需要测试并确认它是否可以正常工作，而不是在部署了之后，就认...
2019-06-03 13:27:21
249
原创 前端之移动端布局实例
移动端布局实例基于rem的布局首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。em单位示例<!DOCTYPE html><html lan...
2019-05-31 22:00:02
1702
原创 前端之PC及移动端页面适配方法
PC及移动端页面适配方法设备屏幕有多种不同的分辨率，页面适配方案有如下几种：1、全适配：流体布局+响应式布局2、移动端适配：流体布局+少量响应式基于rem的布局弹性盒模型流体布局流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置...
2019-05-31 21:59:58
14311
1
原创 前端入门知识——移动端页面布局
移动端app分类1、Native App 原生app手机应用程序使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C2、Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用3、Web App 基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用Viewport 视口视口...
2019-05-31 21:59:51
1458
原创 前端入门知识——HTML5
h5新增标签HTML5新结构标签h5新增的主要语义化标签如下：1、header 页面头部、页眉2、nav 页面导航3、article 一篇文章4、section 文章中的章节5、aside 侧边栏6、footer 页面底部、页脚PC端兼容h5的新标签的方法，在页面中引入以下js文件:h5新增标签示例<!DOCTYPE html><html lang="e...
2019-05-31 21:59:49
640
原创 前端小白如何学习 CSS
很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。 鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。 即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。因此，本文旨在概述CSS的关键基础和资源，以便进一步阅读现代C...
2019-05-31 21:59:45
682
原创 前端入门知识——css浏览器前缀
CSS浏览器前缀浏览器样式前缀为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari比如：div{ -ms-transform: rotate(30deg); -webkit-transform: rotate(3...
2019-05-31 13:02:46
522
原创 前端入门知识——css3（3）
CSS权重CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级，按照等级来计算权重1、!important，加在样式属性值后，权重值为 100002、内联样式，如：style=””，权重值为10003、ID选择器，如：#content，权重值为1004、类，伪类...
2019-05-30 22:02:18
247
原创 前端入门知识——css3（2）
transform变换CSS3 transform变换1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、t...
2019-05-29 22:00:00
708
原创 前端入门知识——css3（1）
圆角，透明度，rgbaCSS3圆角设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px;同时分别设置四个角： border-radius:30px 60px 120px 150px;设置四个圆角相同：border-radius:50%;rgba（新的颜色值表示法）1、盒子透明度表示法：opacity:0.1;filter:alp...
2019-05-29 21:59:58
771
原创 前端入门知识——css（4）
CSS盒子模型CSS盒子模型介绍盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框设置一边的边框，比如顶部边框，可以按...
2019-05-29 21:59:57
520
原创 前端入门知识——css（3）
浮动文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。浮动特性浮动元素有左浮动(float:left)和右浮动(float:right)两种浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来相邻浮动的块元素可以并在一行，超出父级宽度就换...
2019-05-29 21:59:54
496
原创 前端入门知识——css（2）
CSS颜色表示法css颜色值主要有三种表示方法：颜色名表示，比如：red 红色，gold 金色。rgb表示，比如：rgb(255,0,0)，表示红色。16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00。css颜色表示法示例<!DOCTYPE html><html lang="en"><head> <meta ...
2019-05-29 21:59:49
446
原创 前端入门知识——css（1）
CSS基本语法和引入方式CSS介绍为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。css基本语法css的定义方法是：选择器 {...
2019-05-29 21:59:46
277
原创 不懂这些seo技巧，还敢说你是前端？
SEO要点：1.语义化html标签，用合适的标签嵌套合适的内容，不可过分依赖div，对浏览器更友善就能更容易被抓取。2.重要的内容html代码放在前面，放在左边。搜索引擎爬虫是从左往右，从上到下进行抓取的，利用布局来实现重要的代码在上面3.重要内容要写在html架构里面，蜘蛛不会抓取js的内容，4.尽量减少使用iframe，因为蜘蛛不会抓取iframe的内容。5.为图片img加上alt属...
2019-05-29 20:36:48
372
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人