whitefish520的博客

数据库概述及环境搭建为什么要使用数据库动态网站中，数据都是存储在数据库中数据库可以持久存储客户端通过表单收集的用户信息数据库软件本身可以对数据进行高效的管理什么是数据库数据库即存储数据的仓库，可以将数据进行分类存储数据库独立于语言之外，可以通过API去操作它常见的数据库软件：mysql、mongoDB、oracleMongoDB下载地址：https://www.mongodb.com/download-center/communityMongoDB可视化软件compass：使

服务器端基本概念网站的组成客户端与服务器客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序，使用HTML/CSS/JavaScript构建服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑客户端负责发起访问请求，服务器则要相应客户端的请求Node网站服务器能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，并对请求做出响应IP地址IP地址是互联网中设备的唯一标识IP是Internet Protocol Address的简写，代表互联网协议地址域

Node开发概述node开发属于后端开发为什么要学习后端开发前端人员需要掌握一些后端技术，才能够和后端程序员更加紧密的配合网站业务逻辑前置，学习前端技术需要后端技术支撑（Ajax）扩展知识视野，能够站在更高的角度审视整个项目后端需要做哪些事情实现网站的的功能（业务逻辑），如登陆等数据库的增删改查为什么选择node使用JavaScript语法开发后端，而JavaScript是前端的主要语言部分公司网页渲染由node完成生态系统活跃，有大量的开源库可以使用前端开发工具大多基于

最近有个朋友买了阿里云的轻量级服务器，香港的节点，24块钱一个月，但是putty的ssh怎么都连不上，按照官方的教程做的，步骤都没有什么问题报错是network error connection timed out，也就是连接超时，但是本地是能ping通阿里云服务器的外网IP的我注意到那个IP有点怪异，8.210.87.105，可能是我见识浅薄，还没有见过第一个数字是个位数的IP，于是拿出了我的梯子，爬到了香港，然后再试了一下，居然连上了这个真是让人不可理解，我手上还有其它几个阿里云服务器，也都是香港

事件注册事件给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式和监听注册方式传统注册方式利用on开头的事件注册注册事件的唯一性：同一元素的同一事件，只能有一个处理函数<button id="btn">按钮</button><script> var btn = document.getElementById('btn'); btn.onclick = function() { alert('按下了');

web APIWeb API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )DOM文档对象模型（Document Object Model）：是W3C组织推荐的处理可拓展标记语言的标准编程接口，所有的浏览器都遵循这套规范通过DOM接口，可以改变网页的内容、结构、样式DOM树DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前页面文档：一个页面就是一个文档，DOM中使用document表示节点：网页中的所有内容，

内置对象内置对象提供了一些常用的属性和方法，能够帮助我们快速开发如Math、Date、Array、String等Math 数学对象Math不是构造函数，它提供静态的属性和方法属性、方法名功能Math.PI圆周率Math.floor()向下取整Math.ceil()向上取整Math.round()四舍五入版 就近取整 注意 -3.5 结果是 -3Math.abs()绝对值Math.max()/Math.min()求最大和最小

作用域JS（ES6之前）的作用域有两种：全局作用域局部作用域全局作用域在整个script标签或者js文件内有效局部作用域在函数内部有效，也称为函数作用域JS没有块级作用域变量的作用域全局变量：在全局作用域下声明的变量叫做全局变量全局变量在代码的任何位置都可以使用在函数内部，不声明而直接赋值的变量，会变成全局变量局部变量：在局部作用域下声明的变量叫做局部变量（函数内部定义）局部变量只能在该函数内部使用函数的形参也是局部变量全局变量和局部变量的区别全局变量在

数组数组可以把一组相关的数据一起存放，并提供方便的访问方式数组是指一组数据的集合，其中每个数据被称为元素，在数组中可以存放任意类型的元素创建数组利用new创建数组var arr = new Array();利用数组字面量创建数组var arr = ['red', 123, true];获取数组中的元素利用索引（下标）来访问数组元素，数组可以通过索引来访问、设置、修改对应的数组元素，可以通过数组名[索引]的形式来获取数组中的元素var arr = [1, 2, 3]ale

运算符运算符（operator）也称为操作符，是用于实现赋值、比较、和执行算术运算等功能的符号常用的运算符有：算术运算符递增和递减运算符比较运算符逻辑运算符赋值运算符算术运算符加、减、乘、除、取余，用法同c语言递增和递减运算符++，–，用法同c语言比较运算符两个数据进行比较后，返回布尔值> < >= <= == != === !==与c语言相比，多了全等和不全等，用于判断左右两边是否值和数据类型完全相同逻辑运算符逻辑与 &amp

JavaScript是什么JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言不需要编译，运行过程中由js引擎（js解释器）逐行解释并执行可以基于node.js进行后端开发JavaScript的作用表单动态校验（密码强度检测）网页特效服务器开发（node.js）桌面程序（Electron）App（Cordova）物联网（Ruff）游戏开发（cocos2d-js）浏览器执行js浏览器分成两部分：渲染引擎和JS引擎渲染引擎：解析HTML和CSS，俗称内

响应式布局原理使用媒体查询针对不同宽度的设备，进行布局和样式的设置，从而适配不同的设备响应式布局需要一个父级作为布局容器，通过媒体查询，改变这个布局容器的大小，根据布局容器的宽度，决定里面的子元素排列方式和大小常见的布局容器划分情况设备宽度布局容器宽度手机width ≤ 768100%平板768 ≤ width ＜992750px桌面显示器992≤ width ＜1200970px宽屏桌面显示器width ≥ 12001170pxBoot

rem概念：rem（root em）是一个相对单位，类似于em单位说明emem是父元素的字体大小remrem是html元素的字体大小优点：父元素字体大小可能不一样，但是只有一个html，可以用来整体控制大小媒体查询媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前

基本概念flex是flexble box的缩写，意思为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局（块级元素和行内元素都可以使用flex）父元素设为flex布局后，子元素的float、clear、vertical-align将失效采用flex布局的元素，称为flex容器（container），它所有的子元素自动成为容器成员，称为flex项目（item）通过给父盒子添加flex属性，来控制子盒子的位置和排列方式父项常见属性display:

流式布局的概念流式布局，也就是百分比布局将盒子的宽度设置成百分比，根据屏幕的实际宽度进行伸缩，不受固定像素的限制，内容向两侧填充设置max-width，min-width，使得内容在合理的范围内流式布局的常用技巧设置视口<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">选择默认的样

移动布局基本概念视口 viewport概念：视口就是浏览器显示页面内容的屏幕区域分类类型说明布局视口 layout viewport解决早期的PC端页面在手机上显示的问题，一般为980px视觉视口 visual viewport是用户正在看到的网站的区域理想视口 ideal viewport最理想的视口尺寸，通常等于设备宽度视口标签<meta name="viewport" content="width=device-width, user

动画-animation概念：动画是CSS3中的颠覆性特征，可以设置多个节点来控制一组动画，实现复杂的动画效果使用流程：先定义，后调用语法格式/* 先定义 */@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px }}/* 后调用 */div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ anim

属性选择器示例代码：首先做两个不一样的按钮<button>key1</button> //可以点击<button disabled>key2</button> //不能点击然后通过CSS将其选出，这是最基本的用法/* 鼠标经过时显示手的形状 */button { cursor:pointer;}/* 鼠标经过时显示默认的箭头 */button[disabled] { cursor:default;}其它用法

什么是HTML5定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，是下一代的HTML概念：它是一个新版本的HTML语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集合是指：HTML5 CSS3 javascript，这是广义上的HTML5拓展内容：语义化标签：例如header、nav、article等本地存储兼容特性2D、3D动画、过渡CSS3特性性能与集成现状：大多数属性已经被浏览器支持，是大势所趋H

如何实现网站左上角的图标获得icon图标进入任何一个网站，在末尾加上/favicon.ico，如https://www.bilibili.com/favicon.ico即可看到该网站所用的icon图标如果要实现我们自己的图标，先准备一张PNG图片（一般是通过用ps或者fireworks切图并导出，而且一般是要求透明效果），然后找个在线转换的网站，把PNG图片转换为icon格式，并选择分辨率，然后下载到本地，如下的网站就可以实现转换功能https://www.easyicon.net/cov

浮动CSS布局的三种机制普通流（标准流）块级元素独占一行，自上而下顺序排列常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table行内元素会按照顺序，自左向右顺序排列，能自动换行常用元素：span、a、i、em等浮动让盒子从普通流中浮起来，主要用作让多个块级盒子在一行显示定位将盒子固定在某一个位置为什么需要浮动行内块（inline-block）有自己的缺陷能实现多个块级元素一行显示，但是中间会留下空白间隙不能实现盒子的左右

什么是CSSCSS的引入：由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑在HTML中设置样式非常不方便，也非常繁琐使用CSS能让网页更加美观CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式CSS的作用：主要用于设置HTML页面中的文本内容（字体、大

文章目录认识web常见的浏览器内核web标准什么是HTMLHTML的骨架标签HTML元素标签分类双标签单标签HTML标签关系HTML编写工具文档类型页面语言lang字符集HTML标签的语义化HTML标签排版标签标题标签h段落标签p水平线标签 hr换行标签 brdiv和span标签文本格式挂标签标签属性图像标签链接标签注释标签锚点定位base标签预格式化文本pre标签特殊字符表格创建表格表格属性表头单元格标签th表格标题caption合并单元格表格结构的划分列表无序列表ul有序列表ol自定义列表dl表单inp