前端
garrulousabyss
Github: https://github.com/Gogogoforit
展开
-
《前端学习》系列三之BOOTSTRAP(1)
P1 网页布局方式1. 固定宽度布局:为网页设置一个固定的宽度,通常以px为长度单位,常见于PC端网页2. 流式布局:为网页设置一个相对的宽度,通常以百分比作为长度单位。3. 栅格化布局:长王爷宽度认为的划分为均等的长度,然后排版布局时,则以这些均等的长度作为度量单位。通常利用百分比作为长度单位来划分均等的长度。3. 响应式布局:通过检测设备信息,决定网页布局方式。即用户如果采用不...原创 2019-07-31 16:44:49 · 101 阅读 · 0 评论 -
前端CSS练习项目记录(从12到15)
十二. 完成建筑材料js/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet&原创 2018-09-11 04:22:56 · 947 阅读 · 0 评论 -
前端CSS练习项目记录(从9到11)
九. banner区域的结构 + 十. 完成商机市场js/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel=&原创 2018-09-11 01:56:26 · 287 阅读 · 0 评论 -
《高级js第一章》学习笔记(从5到7)
五. 如何寻找上级作用域 六. 关于内存释放,和作用域销毁的研究 七. 作用域练习题原创 2018-09-18 00:37:42 · 132 阅读 · 0 评论 -
JavaScript新版本《ES6》学习笔记(从4到6)
四. 使用babel编译-babel常用的执行命令 五. let的基础语法(不存在变量提升、不允许重复声明) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&am原创 2018-09-18 01:18:27 · 247 阅读 · 0 评论 -
JavaScript新版本《ES6》学习笔记(从1到3)
一. ES6的发展野史1. ES6(ECMAScript6) 基本信息(1)什么是ES6这部分可以参考《ECMAScript 6 入门》(2)使用Babel编译ES6安装babel-cli(命令行转码)配置 .babelrc文件(转码规则和插件)执行命令进行转码 2. ES6基础语法:(1)块级作用域 (2)不存在变量提升(3)暂时性死区:typeo...原创 2018-09-17 19:00:58 · 220 阅读 · 0 评论 -
框架《React》库的学习笔记(从9到)
九. refs和事件处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>refs和事件处理</title></head><body>原创 2018-09-17 18:21:22 · 149 阅读 · 0 评论 -
《高级js第一章》学习笔记(从1到4)
一. 预解释 二. 作用域链 三. 全局变量的细节问题 四. 预解释是一种毫无节操的机制 ...原创 2018-09-17 06:22:26 · 136 阅读 · 0 评论 -
前端CSS练习项目记录(从5到8)
五. 精灵图完成三角 js/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styles原创 2018-09-10 05:37:33 · 290 阅读 · 0 评论 -
JavaScript新版本《ES6》学习笔记(从7到9)
七. let基础语法——块级作用域及其作用 八. 使用const设置常量 九. JS创建变量的六种方式 ...原创 2018-09-19 04:24:18 · 272 阅读 · 0 评论 -
JavaScript新版本《ES6》学习笔记(从10到)
十. ES6解构赋值——数组的解构赋值 example1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head>&am原创 2018-09-19 04:25:10 · 243 阅读 · 0 评论 -
《高级js第一章》学习笔记(从11到13)
十一. 单例模式 十二. 工厂模式 十三. 构造函数模式基础原创 2018-09-24 05:31:04 · 155 阅读 · 0 评论 -
《前端学习》系列一之HTML+CSS(1)
P1 - HTML5-CSS3阶段任务说明第1-2天: html5 新增标签和属性第3-5天: CSS3新增的样式第6天: 案例回顾: H5+C3知识点比较零散独立原创 2019-07-15 07:14:46 · 138 阅读 · 0 评论 -
什么是异步
说说你的理解,什么是异步。由于各个语言处理异步的机制有差异,我们这里只说 JS 中的异步。怎么样的代码是异步代码?我们先不深入异步概念,先从「表象」来看看怎么样的代码是异步代码:异步代码的书写顺序与执行顺序不同。(这并不是异步的定义。另外「书写顺序与执行顺序不同的代码」不一定是异步代码)console.log(1)setTimeout(function(){ conso...转载 2018-12-22 08:53:27 · 18099 阅读 · 4 评论 -
JSON 是什么?
(本文精髓在最后一节)JSON 绝对不是对象,请问JSON 是什么? "null" 是 JSON 吗?"1" 是 JSON 吗? JSON 与 JS 对象的区别是什么?JSON 是什么?如果你在 Google 搜索 JSON,那么一眼就会看到 JSON 的官网 http://json.org。官网会明明白白的告诉你,JSON 是一种数据格式。什么是格式?你可以理解为语法。J...转载 2018-12-22 08:48:32 · 964 阅读 · 0 评论 -
JS 中的闭包是什么?
大名鼎鼎的闭包!这一题终于来了,面试必问。请用自己的话简述什么是「闭包」。 「闭包」的作用是什么。---------------------------------------首先来简述什么是闭包 假设上面三行代码在一个立即执行函数中(为简明起见,我就不写立即执行函数了,影响读者理解)。评论里没看完就说我写得有问题的,请看清楚哦:上面三行代码在一个立即执行函数中...转载 2018-12-22 08:31:00 · 138 阅读 · 0 评论 -
什么是立即执行函数?有什么作用?
这是 JS 中的一个常见概念,面试时经常会被问到,请「用自己的语言」简述立即执行函数是什么 立即执行函数有什么用途 -------------------------------------------回答:1. 立即执行函数是什么立即执行函数就是声明一个匿名函数 马上调用这个匿名函数 上面是一个典型的立即执行函数。 首先声明一个匿名函数 fu...转载 2018-12-22 08:27:05 · 4040 阅读 · 0 评论 -
为什么 className 不要以 ad 开头?
A 公司新来的实习生小谷,发现页面里面一个 div 死活都显示不了。页面的内容是 <div id="ad_holder">你好</div>,然后用 Chrome 打开,怎么也显示不出来:再经历了几轮排查后,小谷发现,关掉 Adblock Plus 插件后,元素就奇迹般的重现了!如下图:这是为什么呢? 其实是因为 Adblock、Adblock P...转载 2018-12-22 08:19:32 · 173 阅读 · 0 评论 -
button.disabled 和 button.getAttribute('disabled') 有什么区别?
「node.getAttribute('someAttribute')」获取的是「attribute」,而「node.someAttribute」获取的是元素的「property」,二者并不相同。 参考 properties-and-attributes-in-html在大多数情况下「property」和「attribute」是同步的,如场景1。场景1:<input id...转载 2018-12-22 08:13:38 · 568 阅读 · 0 评论 -
《高级js第一章》学习笔记(从17到)
十七. 原型链模式扩展——批量设置公共属性 十八.原创 2018-10-07 04:28:34 · 175 阅读 · 0 评论 -
《高级js第一章》学习笔记(从14到16)
十四. 构造函数模式扩展 十五. 原型链模式基础 十六. 原型链模式扩展——this和原型扩展 ...原创 2018-10-03 04:15:40 · 159 阅读 · 0 评论 -
《高级js第一章》学习笔记(从8到10)
八. this关键字 九. 综合练习题(1) 十. 综合练习题(2)原创 2018-09-20 04:44:31 · 147 阅读 · 0 评论 -
前端CSS练习项目记录(从16到18)
十六. 完成建材咨询js/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet&原创 2018-09-14 15:39:28 · 1222 阅读 · 0 评论 -
框架《React》库的学习笔记(从5到8)
五. 模块与组件的理解六. react组件的基本定义和使用 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script sr原创 2018-09-14 15:26:33 · 158 阅读 · 0 评论 -
框架《React》库的学习笔记(从1到4)
一. react库的简介 二. react的基本使用 在前端领域里,类似bootcdn这样的网站是用得很多的。下面举一个程序的例子 这里需要解释一下各部分含义react.js: React的核心库react-dom.js: 提供操作DOM的react扩展库babel.min.js: 解析JSX语法代码转为纯JS语法代码的库 三. j...原创 2018-09-14 15:21:22 · 181 阅读 · 0 评论 -
前端CSS练习项目记录(从1到4)
一. 梅兰商贸整站项目搭建 二. CSS初始化 整个项目的目录结构 js/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title原创 2018-09-10 03:09:51 · 1474 阅读 · 0 评论 -
sublime如何设定自动补全html头部信息
步骤:1. 按ctrl+shift+P打开命令面板,输入install,鼠标点击下面出来的Package Control:Install Package 2. 再点击后稍微等一等,在弹出的内容里,输入Emmet,(这里由于作者已安装,不然正常情况是,Emmet会在下面第一个,点击就好)3. 在安装好后,会跳出如下图所示,这是配置文件,一般不用管。4. 笔者在这里碰到了...原创 2018-09-10 02:39:06 · 12678 阅读 · 8 评论 -
极客学院的前端课程(九)
3.1.3 CSS基础——id选择器第一个文件 mycss.css#pid a{ color: blueviolet;}#divid p{ color: red;}第二个文件 44.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-07-06 14:59:00 · 167 阅读 · 0 评论 -
极客学院的前端课程(八)
2.13.1 control属性与placeholder属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><原创 2018-07-05 20:57:21 · 196 阅读 · 0 评论 -
极客学院的前端课程(十四)
3.7.5 CSS瀑布流效果第一个文件 style.css.container{ column-width: 500px; -webkit-column-width: 500px; column-gap: 5px; -webkit-column-gap:5px;}.container div{ width: 500px; margin: 50...原创 2018-07-12 16:17:37 · 177 阅读 · 0 评论 -
极客学院的前端课程(十三)
3.6.2 选择器——选择器详解2第一个文件 style.css#mydiv{ color:red;}/*p strong{ color: darkorange;}*/p>strong>i{ /*对于子代选择器,只能逐层向下 */ color:fuchsia; font-size: 30px;}p i{ /*后代选择器,可以直接选...原创 2018-07-11 22:35:35 · 139 阅读 · 0 评论 -
极客学院的前端课程(七)
2.11.3 address元素和网页编排规则<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body>原创 2018-07-04 13:35:41 · 209 阅读 · 0 评论 -
极客学院的前端课程(三)
2.4.3 HTML5表格使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格</title></head><body> &原创 2018-06-29 01:20:10 · 275 阅读 · 0 评论 -
极客学院的前端课程(六)
2.10.3 nav元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nav元素</title></head><body> &原创 2018-07-03 14:16:36 · 174 阅读 · 0 评论 -
极客学院的前端课程(十二)
3.4.5 CSS盒子模型——外边距合并第一个文件style.css/*body{ margin: 0px;}.mg{ background-color: blue; width: 100px; height: 100px; margin-top: 100px;}*/.body{ margin: 0;}.container{ ...原创 2018-07-09 23:25:20 · 206 阅读 · 0 评论 -
极客学院的前端课程(二)
2.3.1 HTML5 元素简介及使用方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <p&原创 2018-06-27 17:47:47 · 286 阅读 · 0 评论 -
极客学院的前端课程(十一)
3.3.2 CSS定位——浮动第一个文件 style.css#fd{ width: 100px; height: 200px; background-color: red; float: left;}#sd{ width: 200px; height: 100px; background-color: blue; float: ...原创 2018-07-09 16:00:31 · 118 阅读 · 0 评论 -
极客学院的前端课程(十)
3.2.4 CSS样式——链接第一个文件 :style.cssa:link{ color: #FF0000; text-decoration: none; background-color: aqua;}a:visited{ color: #00FF00;}a:hover{ color:#0000FF;}a:active{ colo...原创 2018-07-08 22:49:12 · 179 阅读 · 0 评论 -
极客学院的前端课程(五)
2.9.2 新增的元素和废除的元素,以及新增的属性和废除的属性原创 2018-07-01 17:16:27 · 159 阅读 · 0 评论 -
极客学院的前端课程(一)
该套系列依据视频: https://www.bilibili.com/video/av102988431.1.1 走进前端工程师的世界淘宝主页会根据不同的终端,比如iPhone5, iPad3等等进行页面显示的自动适配。。。HTML5 WebGL可以进行3D的显示2.1.1 HTML5 开发前的准备2.1.2 开发前的准备——快捷键...原创 2018-06-26 13:06:30 · 1710 阅读 · 0 评论