前端开发
前端面试题(一)
浏览器里,从用户输入 url 到用户看到页面结果的过程,发生了什么? 1、域名解析 域名解析的过程: (1)查询浏览器自身 DNS 缓存 (2)若上面没有找到,则搜索操作系统自身的 DNS 缓存 (3)若上面没有找到,则尝试读取 hosts 文件 (4)若上面没有找到,向本地配置的首选 DNS 服务器发送请求 (5)win 系统 若上面没有找到,操作系统查找 NetBIOS name cache (6)win 系统 若上面没有找到,查询 wins 服务器 (7)win 系统 若上面没有找到,广播查找 (8)win 系统 若上面没有找到,读取 LMHOSTS 文件 若以上都没有找到,解析失败。 2、TCP 三次握手 3、浏览器向服务器发送 http 请求 一旦建立了 TCP 连接,web 浏览器就会向 web 服务器发送请求命令。例如: GET/sample/hello.jsp HTTP/1.1 4、浏览器发送请求头信息 浏览器发送请求命令之后,还要以头信息的形式向 web 服务器发送一些别的信息,之后浏览器发送了一空白行来通知服务器,它已经结束了该头 ...
前端开发
vue面试题
20 道常见的面试题 摘自 boss 直聘陈大鱼头 尽量减少 data 中的数据,data 中的数据都会增加 getter 和 setter,会收集对应的 watcher 从镜片的厚度和黄黑相见的格子衬衫我察觉到,面前坐着的这位面试官应该是来者不善。我像以往一样,准备花 3 分钟的时间进行自我介绍。 在此期间,为了避免尴尬,我盯着面试官的眉毛中间,不过面试官明显对我的经历不是很感兴趣。他在 1 分半的时候打断了我。 你觉得自己最擅长的技术栈是什么? Vue 吧,我很喜欢尤大,最近刚发布了 Vue 的首部纪录片,真的很好看。 那你能讲一讲 MVVM 吗?MVVM 是 Model-View-ViewModel 缩写,也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型,View 代表 UI 组件, ViewModel 是 View 和 Model 层的桥梁,数据会绑定到 viewModel 层并自动将数据渲染到页面中,视图变化的时候会通知 viewModel 层更新数据。 简单说一下 Vue2.x 响应式数据原理Vue 在初始化数据时 ...
前端开发
SASS学习
使用变量sass —> scss sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。 sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。),比如$highlight-color和$sidebar-width。为什么选择$ 符号呢?因为它好认、更具美感,且在CSS中并无他用,不会导致与现存或未来的css语法冲突。 变量声明 sass变量的声明和css属性的声明很像: $highlight-color: #F90; 这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值,甚至是以空格分割的多个属性值,如$basic-border: 1px solid black;,或以逗号分割的多个属性值,如$plain-font: "Myri ...
前端开发
css中的字体
生活明朗,万物可爱 字体相关的样式 字体相关的样式 colorfont-sizefont-familycolor 用来设置字体颜色p { color: red; color: #fff; color: rgb(0, 0, 0); }font-size 字体的大小font-size相关的单位.em 相当于当前元素的一个 font-sizerem 相对于根元素的一个 font-sizep { font-size: 16em; }font-family 字体族(字体的格式)可选值:serif 衬线字体sans-serif 非衬线字体monospace 等宽字体指定字体的类别,浏览器会自动使用该类别下的字体font-family 可以同时指定多个字体,多个字体间使用 , 隔开字体生效时优先使用第一个,第一个无法使用则使用第二个 以此类推font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB ...
前端开发
less学习
看到 less 老是想起 less is more 这句话,这门语言的确是把原来很繁琐的 css 给包装成一门类似于编程语言的语言,感觉看视频只能学习到一点,关键还是看官方文档 less 是一个 css 扩展,让 css 变成支持变量,嵌套等操作的 css 语言 可以去 Less 官方文档 去学习 less 是一门 css 的预处理语言 less 是一个 css 的增强版,通过 less 可以编写更少的代码实现更强大的样式 在 less 中添加了许多的新特性:像对变量的支持、对 mixin 的支持… … less 的语法大体上和 css 语法一致,但是 less 中增添了许多对 css 的扩展,所以浏览器无法直接执行 less 代码,要执行必须向将 less 转换为 css,然后再由浏览器执行 less 基础 less 可以在浏览器端使用也可以在服务端使用 在浏览器端使用 CDN: <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script> 引入 并且需 ...
生活日常
我要我们在一起
偶然之间看到一篇帖子, 想到了现在我和某人,不知道后来的我们, 我们的十年会不会也变成这样 🌎 整理后的帖子相对完整,原文缺失部分 这是整理后的帖子 原文: https://www.douban.com/note/260167887/ 原作者: 你这个贱人 原文地址:豆瓣:http://www.douban.com/group/topic/36139334/ 【贱贱贱人直播】与我十年长跑的女朋友就要嫁人了。📺 故事背景地:http://www.tudou.com/programs/view/36RvNyr4TUI/ 昨天下午凌一尧给我发来一张照片,是一件婚纱,她问好不好看,我说还行。 她说“初五举办婚礼,和我们以前想象得一样,有鲜花拱门,有红地毯,有白婚纱黑礼服,就是没有你。” 我说“要不要我去凑个份子?” 她半天之后才回复说:“不用了。 ————————————————————分割线—————————————————————2001 年的夏天,我十六岁,正在读高中。即便是夜晚,气温仍然高得令人辗转反侧,黑漆漆的夜晚满是室友们翻身和叹息的声音,而我咬着小电筒,蒙着一条薄被单,写 ...
生活日常
五一,武汉行
武汉行 一场说走就走的旅行✌️ 趁着这次五一长假 📷,去武汉好好的玩一玩武功山人太多了,武汉我们来啦~ 下午 15 点坐上火车,晚上 20 点就到了武昌站 一路上遇到了很多人很多事,火车真的是一个大杂烩,什么人都有,比如某不抽烟就是不信毛爷爷女子,抽烟抽了 10 多年了从没人管过之类,但也有人很好的叔叔,也有给我们让座了的好人,4 个人的旅途总之很愉快 🧊~ 下了车站后,我们找到酒店放下行李,休息了一会儿后就立马前往楚河汉街。 吃了一顿不是那么好吃的烧烤和炒饭河粉(可能武汉人民的烧烤不符合我们湖南人吧 hhh),逛完楚河汉街和光谷步行街已经到了晚上 12 点,打车回酒店就直接睡了。第一天的行程就结束了。 第二天 第二天我们早早的起床,早早的化妆,终于在 9 点半出发 hhh,10 点左右赶到粮道街,令我们没想到的是,武汉鱿鱼老板任性的在 10 点左右开门,柒个蛋烘糕也在 10 点半开门,所以我们几乎没排什么队的就把所有小吃 🍰 吃了个遍除了武汉热干面,也多亏了没吃热干面 🥘,不然就吃不下这么多好吃的了,柒个蛋烘糕 🌮 针不戳,就是老板任性,有钱我不赚,哎,就是玩儿 ...
前端开发
console的高级用法
前言 前几天在看青柠起始页的时候偶然间看到它的控制台居然可以这样 👊 于是就萌生了学一波 console 方法的念头,今天正好有时间就来把这几天的学习成果记录一下 😶 console 的基本用法console.log("最常见用法\n换行"); console.error("输出错误信息 会以红色显示"); console.warn("打印警告信息 会以黄色显示"); console.info("打印一般信息"); // console.clear();//清空上面的console显示 //进阶用法 //console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印 console.assert(false, "判断为false才显示的信息"); //传入的对象或数组以表格方式显示 console.table([["Anzhiyu", "Chen"], ["好"]]); //打印 调用链 fn2()调用fn1(),fn1()调用fn() function fn() { console.trace(); ...
前端开发
弹性盒子
弹性盒模型的一些知识 简单介绍弹性盒模型( Flexible Box 或 FlexBox)是一个 CSS3 新增布局模块,官方称为 CSS Flexible Box Layout Module,用于实现容器里项目的对齐、方向、排序(即使在项目大小位置、动态生成的情况), 分配空白空间 。弹性盒模型最大的特性在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局。 Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box { display: flex; } 行内元素也可以使用 Flex 布局。 .box { display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit前缀。 .box { display: -webkit-flex; /* Safari */ display: flex; } 注意,设为 Flex 布局以后,子元素的float、clear ...
前端开发
HTML基础
前言 生活明朗,万物可爱,勤做笔记的好戏惯可不能落下,嘿嘿😉,正所谓好记性不如烂笔头✍,笔记还是要记的 就像面对自己的恋人一般,认真,专注,接下来就是我的 HTML 笔记,也就是网页的结构,下面开始充电 🔋 之旅啦~ 初识 WEB让我们先来了解一下什么是 web 认识web 网页 主要是由文字、图像和超链接等元素构成,当然除了这些元素,网页中还可以包括音频、视频以及 Flash 等。浏览器 是网页显示、运行的平台。浏览器内核 (排版引擎、解释引擎、渲染引擎)负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。浏览器内核备注IETridentIE、猎豹安全、360 极速浏览器、百度浏览器firefoxGecko可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友 flash、神一样的对手 chrome。Safariwebkit现在很多人错误地把 webkit 叫做 chrome 内核(即使 chrome 内核已经是 blink 了)。苹果感觉像被别人 ...
Hexo部署到腾讯云或阿里云
部署环境与准备1.环境 本地 Windows10 操作系统 腾讯云 Cenots7.6 服务器 2.准备Hexo 本地博客 Xshell 链接到你的服务器 云服务器配置 Git 配置步骤 1.安装依赖库yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel2.安装编译工具yum install gcc perl-ExtUtils-MakeMaker package3.查看 git 的版本git version 4.删除 gityum remove git -y5.下载解压最新版cd /usr/local/src #下载的目录 wget https://www.kernel.org/pub/software/scm/git/git-2.28.0.tar.gz #下载最新版 tar -zxvf git-2.28.0.tar.gz #解压到当前文件夹6.编辑并安装cd git-2.28.0 #进入文件夹 make prefix=/usr ...
使用 Github Pages 和 Hexo 搭建自己的独立博客
前言首先感谢你能来访问我的 Blog,这是我搭建的第一个博客网站,使用的是 Github Pages + Hexo 的形式搭建,从小白一路走了过来也挺不容易的 hhh,前前后后几分钟就能搭建完成了叭,现在把它记录下来,将来也许会是一种怀念叭. 入门 Github 搭建一个这样的 Blog 首先你得知道什么是 Github 和 Github Pages,你可以理解为咱们没有服务器,咱们将页面托管到了 Github 上 Github Pages Github Pages 可以被认为是用户编写的、托管在 github 上的静态网页。使用 Github Pages 可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。 这是 Github Pages 的官网 Github Pages Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 这是 Hexo 的官网 Hexo node.js 安装 node.js ...