- 博客(124)
- 收藏
- 关注
RSS订阅原创 计算机网络基础知识笔记六---IP地址
IP地址地址分类有关A，B，C，D类地址A类地址以0开头，第一个字节作为网络号，地址范围为：0.0.0.0~127.255.255.255；B类地址以10开头，前两个字节作为网络号，地址范围是：128.0.0.0~191.255.255.255;C类地址以110开头，前三个字节作为网络号，地址范围是：192.0.0.0~223.255.255.255。D类地址以1110开头，地址范围是224.0.0.0~239.255.255.255，D类地址作为组播地址（一对多的通信）；
2020-12-02 23:16:58
1316
原创 数据库学习笔记四--复杂语句（4）-SELECT、约束
SQL INSERT INTO SELECT 语句INSERT INTO SELECT 语句从一个表复制数据，然后把数据插入到一个已存在的表中。目标表中任何已存在的行都不会受影响。SQL INSERT INTO SELECT 语法我们可以从一个表中复制所有的列插入到另一个已存在的表中：INSERT INTO table2SELECT * FROM table1;或者我们可以只复制希望的列插入到另一个已存在的表中：INSERT INTO table2(column_name(s))SELE
2020-11-30 00:07:00
493
原创 计算机网络基础知识笔记五--会话层/表示层/应用层
有关OSI七层协议详细内容接上文5.会话层管理主机之间的会话进程，即负责建立、管理、终止进程之间的会话。会话层还利用在数据中插入校验点来实现数据的同步。会话层的主要目的是组织和同步在两个通信主机上各种进程间的通信（也称为对话），并管理数据的交换。会话层负责在两个会话层实体之间进行对话连接的建立和拆除。在半双工情况下，会话层提供一种数据权标来控制某一方何时有权发送数据6.表示层表示层对上层数据或信息进行变换以保证一个主机应用层信息可以被另一个主机的应用程序理解。表示层的数据转换包括数据的加密、压
2020-11-25 23:32:55
1964
原创 计算机网络基础知识笔记四 -- 传输层
有关OSI七层协议详细内容接上文4.传输层（Transport Layer）概要第一个端到端，即主机到主机的层次。传输层负责将上层数据分段并提供端到端的、可靠的或不可靠的传输。传输层还要处理端到端的差错控制和流量控制问题。传输层的任务是根据通信子网的特性，最佳的利用网络资源，为两个端系统的会话层之间，提供建立、维护和取消传输连接的功能，负责端到端的可靠数据传输。在这一层，信息传送的协议数据单元称为段或报文。网络层只是根据网络地址将源结点发出的数据包传送到目的节点，而
2020-11-24 23:50:29
1094
原创 数据库学习笔记四--复杂语句（3）
SQL UNION 操作符UNION 操作符用于合并两个或多个 SELECT 语句的结果集。UNION 内部的每个 SELECT 语句必须拥有相同数量的列。列也必须拥有相似的数据类型。同时，每个 SELECT 语句中的列的顺序必须相同。语法SELECT column_name(s) FROM table1UNIONSELECT column_name(s) FROM table2;默认地，UNION 操作符选取不同的值。如果允许重复的值，使用 UNION ALLSQL UNION ALL
2020-11-23 10:27:40
167
原创 计算机网络基础知识笔记二 -- 数据链路层
有关OSI七层协议详细内容2.数据链路层（Data Link Layer）数据链路层在物理层提供的服务的基础上向网络层提供服务。其最基本的服务是将源自网络层来的数据可靠地传输到相邻节点的目标机网络层。为达到这一目的，数据链路必须具备一系列相应的功能。主要有：（1）将数据组合成数据块，在数据链路层中称这种数据块为帧（frame），帧是数据链路层的传送单位数据块是一组或几组按顺序连续排列在一起的记录，是主存储器与输入设备、输出设备或外存储器之间进行传输的数据单位。帧由几部分组成，不同的部分执行不
2020-11-22 23:03:15
1789
原创 计算机网络基础知识笔记一 -- 物理层
总结计算机网络的学习核心是网络协议的学习。网络协议是为计算机进行数据交换而建立的规则目前最通用的是TCP/IP标准网络协议网络层次划分这个是面试题经常会被问到的。常见的层次划分有：（1）标准的OSI七层模型（2）TCP/IP四层协议（3）TCP/IP五层协议三者之间的关系为：有关OSI七层协议详细内容1.物理层（Physical Layer）激活、维持、关闭通信端点之间的机械特性、电气特性、功能特性以及过程特性。该层为上层协议提供了一个传输数据的可靠的物理媒体。简单的说
2020-11-21 22:03:08
291
原创 数据库学习笔记三--复杂语句（2）-有关 join
SQL 连接(JOIN)SQL join 用于把来自两个或多个表的行结合起来。基于这些表之间的共同字段。SQL INNER JOIN（简单的 JOIN）SQL INNER JOIN 从多个表中返回满足 JOIN 条件的所有行。INNER JOIN 关键字在表中存在至少一个匹配时返回行。SQL INNER JOIN 语法SELECT column_name(s)FROM table1INNER JOIN table2ON table1.column_name=table2.column_na
2020-11-21 16:13:56
252
原创 数据库学习笔记二--复杂语句（1）
SQL SELECT TOP, LIMIT, ROWNUM 子句这几个语句都是用于筛选出特定条数的数据（一般大型数据库常用）TOP--(Sql Server )SQL Server / MS Access 语法:SELECT TOP number|percent column_name(s) FROM table_name;实例SELECT * FROM Persons LIMIT 5;变相返回后 N 行:--前5行select top 5 * from table--后5行sele
2020-11-21 14:34:59
187
原创 关于前端开发我所遇到的面试题目记录
1. const let2. 箭头函数与普通函数的区别在于：(1)、箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this，(2)、箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象(3)、不能通过new关键字调用，同样也没有new.target值和原型3. 箭头函数和function有什么区别参考回答：箭头函数根本就没有绑定自己的this，在箭头函数中调用
2020-11-19 12:06:50
153
原创 react学习笔记二--面向组件编程一（组件的概念、使用及三大属性）
react元素React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()data-reactroot 表面当前元素是 该组件的顶层标签react组件组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。组件名称必须以大写字母开头。**React 会将以
2020-11-19 12:00:09
295
原创 react学习笔记一react基础概念及基本使用
引入react<!-- 加载 React。--> <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。--> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/r
2020-11-19 11:53:14
217
1
原创 数据库学习笔记一 --- 基础语句
数据库一些SQL 命令SELECT - 从数据库中提取数据UPDATE - 更新数据库中的数据DELETE - 从数据库中删除数据INSERT INTO - 向数据库中插入新数据CREATE DATABASE - 创建新数据库ALTER DATABASE - 修改数据库CREATE TABLE - 创建新表ALTER TABLE - 变更（改变）数据库表DROP TABLE - 删除表CREATE INDEX - 创建索引（搜索键）DROP INDEX - 删除索引SQL SE
2020-11-18 14:29:44
198
原创 有关盒子布局-实现垂直、水平居中
实现盒子垂直水平居中若要仅实现垂直居中，将有关水平居中的设置去掉即可（仅实现水平居中同理）要先清除边距盒子如下： <div class="box"> <div class="inner"></div> </div>方法一：利用 定位+transform先给子盒子绝对定位（不要忘记父盒子要相对定位），然后top、left分别设置为50%，再让盒子向上和向左走自己高、宽的一半 .box {
2020-11-10 15:26:08
398
原创 rem适配方案 / 适配方案技术使用
rem适配方案让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。rem实际开发适配方案按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询)CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;rem适配方案技术使用（市场主流）
2020-11-09 15:46:46
452
原创 Less基础-功能和使用方法
Less基础维护css的弊端CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。CSS需要书写大量看似没有逻辑的代码冗余度是比较高的。不方便维护及扩展，不利于复用。CSS没有很好的计算能力非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。Less介绍Less( Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器。做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语
2020-11-09 15:29:09
727
原创 移动端WEB开发5-rem适配布局
rem适配布局rem基础rem单位rem(root em)是一个相对单位，类似于em , em是相对于父元素的字体大小。不同的是rem的基准是相对于 html 元素的字体大小。比如，根元素( html ）设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，可以实现整体控制...
2020-11-09 15:06:49
168
原创 移动端WEB开发4-flex布局(弹性布局)--子项属性(圣杯布局、双飞翼布局)
flex布局子项常见属性属性说明flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序）具体用法1. flexflex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0.item { flex: <number>;/* default o*/ }圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应圣杯布局：先设置父盒
2020-11-09 13:02:08
262
原创 移动端WEB开发3-flex布局(弹性布局)--父项属性
flex布局flex布局原理flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用Flex布局的元素，称为Flex容器(flex container），简称"容器"，它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。例
2020-11-09 12:55:34
163
原创 移动端WEB开发2-移动端开发方案 / 移动端技术解决方案 / 移动端常见布局之流式布局
移动端开发方案单独移动端页面（主流）通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。比如：京东商城手机版、淘宝触屏版、苏宁易购手机版响应式兼容PC移动端比如：三星电子官网： www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端。缺点：制作麻烦， 需要花很大精力去调兼容性问题移动端技术解决方案移动端浏览器移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性
2020-11-08 23:03:09
232
原创 移动端WEB开发1-移动端调试方法 / 视口 / 二倍图
移动端基础兼容移动端主流浏览器，处理Webkit内核浏览器即可开发的移动端主要针对手机端开发移动端碎片化比较严重，分辨率盒屏幕尺寸大小不一移动端调试方法Chrome DevTools（谷歌浏览器）的模拟手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问视口视口(viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口布局视口 layout viewport一般移动设备的浏览器都默认设
2020-11-08 22:40:19
238
原创 CSS3新特性-浏览器私有前缀
浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。私有前缀-moz-∶代表 firefox 浏览器私有属性-ms-:代表 ie 浏览器私有属性-webkit-:代表safari、chrome 私有属性-o-:代表Opera私有属性提倡的写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;...
2020-11-08 10:15:33
216
原创 CSS3新特性-3D转换 / 案例：两面翻转的盒子导航栏 / 案例：旋转木马
3D转换我们主要学习工作中最常用的 3D位移 和 3D旋转主要知识点3D位移:translate3d(x,y,z)3D旋转:rotate3d(x,y,z)透视: perspective3D呈现:transfrom-style3D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。transform:translateX(100px)∶仅仅是在x轴上移动transform:translateY(100px):仅仅是在Y轴上移动transform:
2020-11-08 10:04:56
438
原创 CSS3新特性-动画 （打字机效果）/ 热点图案例
动画动画(animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。动画的基本使用分为两步：先定义动画再使用（调用）动画1.用keyframes定义动画（类似定义类选择器）@keyframes动画名称{ 0%{ width:100px; }100%{ width: 200px; }}动画序列0%是
2020-11-07 16:37:24
788
1
原创 CSS3新特性-transform2D转换
2D转换2D转换之移动translate（移动盒子的位置方法：定位、盒子的外边距、2d转换移动）2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。语法transform: translate(x,y);或者分开写:transform:translatex(n);transform:translateY(n);重点(1)定义2D转换中的移动，沿着x和Y轴移动元素(2)translate最大的优点:不会影响到其他元素的位置，（京东商城中鼠标经过图片上下浮动就是用这个
2020-11-07 14:54:30
223
原创 CSS3新特性-属性选择器、结构伪类选择器、伪元素选择器
CSS3新特性ps:这些新特性都存在兼容性问题，基本都是IE9以上版本才支持移动端支持优于PC端新增选择器：1.属性选择器（类选择器和属性选择器 伪类选择器权重相同）（1）利用属性选择器可以不用借助类或id选择器例：input [values] { ....; } //选择出input中带有values属性的（2）属性选择器还可以选择属性等于值的某些元素（重要）input [type=text]{ ...; } //选择处input中type值等于text的（3）属性选择器可以选择以某
2020-11-07 09:26:09
309
原创 关于SEO优化 / 网站发布
网站TDK标签SEO优化SEO ( SearchEngine Optimization )汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合SEO优化：description、title、keywordtitle网站标题title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断
2020-11-06 22:58:00
291
原创 webpack: 解决 Automatic publicPath is not supported in this browser 错误
解决 Automatic publicPath is not supported in this browser 错误当webpack 打包出现ERROR in Error: xxxx /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); ^ Error: Automatic publicPath is not supported in this browser
2020-11-02 17:45:47
3508
原创 Webpack 学习笔记3-webpack 开发环境的基本配置
webpack 开发环境的基本配置创建配置文件创建文件 webpack.config.js配置内容如下/*webpack config.js 是 webpack 的配置文件作用：指示 webpack 干哪些活（当运行 webpack 指令是，会加载里面的配置）所有的构建工具都是基于node.js平台运行的，模块化默认采用commonjssrc是项目的源代码（基于ES6模块)，webpack（基于commonjs模块） 是写 page 的代码，项目和page是两个方面，*///re
2020-11-02 17:41:23
133
原创 Webpack 学习笔记2-webpack 的使用
webpack 的使用初始化配置初始化 package.json输入指令:npm init下载并安装 webpack输入指令:npm install webpack webpack-cli -gnpm install webpack webpack-cli -D编译打包应用创建文件运行指令开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development功能：webpack 能够编译打包 js 和 j
2020-11-01 14:27:30
137
原创 Webpack 学习笔记1-- Webpack简介 / 五个核心概念
Webpack简介拓展：（Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。）webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块（chunk) 处理。它将根据模块的依赖关系进行静态分析，打包生成对应的的静态资源(bundle)。web
2020-11-01 13:46:33
199
原创 vue 综合案例 - 音乐播放器
综合案例-音乐播放器功能：歌曲搜索：搜索歌曲，会出现相应歌曲1.按下回车（v-on.enter)2.查询数据（axios接口、v-model）3.渲染数据（v-for 结合数组）歌曲播放：点击播放按钮，歌曲会开始播放歌曲封面:播放歌曲同时，中间的封面会同步改变歌曲评论：点击歌曲，在右侧会出现对应歌曲的评论播放动画：歌曲播放时，中间的动画会和歌曲的播放同步mv播放：点击mv按钮，会出现一个遮罩层，中间可以看mv...
2020-10-31 10:21:32
790
原创 Vue学习笔记6-axios + vue / 案例：查询天气
axios 结合 vue 开发网络应用例： <div id="app"> <input type="button" value="获取" @click="getJoke"> <p>{{ joke }}</p> </div> <!-- vue开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/
2020-10-29 15:57:12
301
原创 Vue笔记5-网络应用之axios简介
网络应用Vue 结合网络数据开发应用axios功能强大的网络请求库引入这个链接即可<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>axios.get(地址？查询字符串).then (function(response){ },function(err){ })第一个响应函数会在响应完成时触发，第二个响应函数会在请求失败时触发，它们的形参可以用于获取信息，一
2020-10-29 10:27:43
141
原创 Vue学习笔记4-vue指令for/model /案例：小黑记事本
vue指令v-for根据数据生成列表结构，数组经常和 v-for 结合使用语法：v-for="item in arr" arr 是数组名（自定义的），in 是关键字，不可更改，item 是遍历的每一项，可以更改item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的 <div id="app"> <input type="button" value="添加数据" @click="add"> <in
2020-10-29 09:44:38
279
原创 Vue笔记3 --vue指令：显示切换、属性绑定 / 案例：图片切换
vue指令：显示切换、属性绑定v-show根据表达式真假，切换元素的显示和隐藏v-ifv-bind
2020-10-28 17:28:12
308
原创 Vue 学习笔记2-本地应用- vue 指令：内容/事件的绑定 / 案例：计数器
本地应用通过Vue实现常见的网页效果vue 指令-内容/事件的绑定vue 指令 指的是：以 v- 开头的一组特殊语法v-text : 设置标签的文本值默认写法会替换全部内容，使用差值表达式{{ }} 可以替换指定内容每部支持写表达式<body> <div id="app"> <h2 v-text="message+'!'">好的</h2> <!--结果为：yangdandan！--> <
2020-10-27 22:13:32
164
原创 VUE学习笔记1-- MVVM设计思想 / Vue 基础
Vue 基础简介是一种javascript 框架简化DOM操作响应式数据驱动（页面是由数据生成的，当数据改变以后，页面会同步更新）第一个Vue程序官方文档：http://cn.vuejs.org导入开发版本的Vue.js<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者：<!-- 生产环境版
2020-10-27 20:35:23
187
原创 jQuery 的Ajax / axois / fetch
jQuery 的Ajax首先引入 jquery 的资源：搜索 bootCDN, 打开网页，输入jquery 进行搜索，找到jquery.min.js文件，复制标签，粘贴到html文件头部即可代码见我的 gitHub 库axios
2020-10-27 19:19:22
198
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人