前端面试——JS
JavaScript面试基础1.介绍js的基本数据类型js一共有六种基本数据类型,分别是Undefined,null,boolean,number,string,还有ES6新增的Symbol和ES10中新增的BigInt类型。
Symbol代表创建后独一无二且不可变的数据类型,它的出现可能是为了解决可能出现的全局变量冲突的问题(个人观点)
BigInt是一种数字类型的数据,它可以表示任意精度格式的整数,使用BigInt可以安全地存储和操作大整数,即使这个数已经超出了Number能够表示的安全整数范围。
2.JavaScript有几种类型的值?JavaScript可以分为两种类型的值,一种是基本数据类型,一种是复杂数据类型。
两种类型的主要区别是:存储位置不同
原始数据类型直接存储在**栈(stack)**中的简单数据段,占据空间小,大小固定,属于被频繁使用数据,所以放入栈中存储。
引用数据类型存储在**堆(heap)**中的对象,占据空间大,大小不固定。如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索 ...
前端面试——CSS
前端面试——CSS1.介绍一下标准CSS的盒子模型和低版本的IE盒子模型有什么不同? 盒模型都是由四个部分组成的,分别是margin、border、padding和content。标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同。标准盒模型的width和height属性的范围只包含了content,而IE盒模型的width和height属性的范围包含了border,padding和content。一般来说,可以通过修改元素的box-sizing属性来改变元素的盒模型。
(1)有两种盒子模型:IE盒模型(border-box)、W3C标准盒模型(content-box)(2)盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分。
IE盒模型和W3C标准盒模型的区别:
(1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding;
(2):IE盒模型:属性width,height包含conten ...
前端基础——HTML
HTML基础面试1、<img>的 title 和 alt 有什么区别:
title是 global attributes 之一,用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示,读屏器阅读图片。可提高图片可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。
2、doctype 是什么,举例常见 doctype 及特点
声明必须处于HTML文档的头部,在<html></html>标签之前,HTML5中不区分大小写
声明不是一个HTML标签,是一个用于告诉浏览器当前HTML版本的指令
现代浏览器的html布局引擎通过检查 doctype 决定使用兼容模式还是标准模式对文档进行渲染,一些浏览器有一个接近标准模型。
在HTML4.01中 <!doctype> 声明指向一个DTD,由于HTML4.01基于SGML,所以DTD指定了标记规则以保证浏览器正确渲染内容
HTML5不基于SGM ...
Mac环境下安装MySQL
Mac下安装MySQL以及出现的问题。1.下载MySQL Community Server这一步很简单,直接到mysql官网选择MySQL Community Server进行下载即可。
2.傻瓜式安装下载完安装包后,双击打开:
接下来几乎都是傻瓜式安装,点击next:
到这一步要注意,设置mysql密码的类型,第一项是使用加强版密码,第二项是使用简单密码,这里根据自己需求选择。
完成安装,点击关闭。
安装成功后,可以在系统偏好设置看到MySQL设置:
3.配置环境变量这一步非常重要!!
如果不配置环境变量的话,执行mysql命令,必须在mysql的安装目录下或者直接报错。
编辑配置文件 vim ~/.bash_profile
添加内容
# mysql
export PATH=${PATH}:/usr/local/mysql/bin
#快速启动、结束MySQL服务, 可以使用alias命令
alias mysqlstart='sudo /usr/local/mysql/support-files/mysql.server st ...
简述CSS3中的Flex box
本文主要讲CSS3的Flex box以及它的一些适用场景。
1.定义Flex是FlexibleBox的缩写,意为“弹性布局”,它是CSS3新增的一种布局方式,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局,包括行内元素也可以。但是要注意:设置为Flex布局之后,子元素的float,clear和vertical-align属性将会失效
采用Flex布局的元素,称为Flex容器(flex container),简称容器,它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称项目。
容器还默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),项目默认沿主轴排列。
2.设置在容器上的6个属性
flex-direction:决定主轴的方向,即项目的排列方向。
flex-wrap:定义了如果一条轴线排不下,如何换行。
flex-flow:flex-direction和flex-wrap属性的简写形式,默认值为:row nowrap。
justify-content:定义了项目在主轴上的对齐方式。
align-items: ...
阿里云配置
添加二级域名的前提是注册并解析了一级域名。
1.登陆阿里云官网,点击“云解析DNS”,找到自己的一级域名,点击解析设置,进去之后,点击添加解析。
2.添加解析的参数:
记录类型:A
主机记录:即二级域名前缀,根据自己设置名字
记录值:就是服务器主机的ip地址,不含端口的
其他配置:默认即可
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
jQuery复习
1.了解jQuery
1234567891011121314151617181920<ul> 是什么:What? <li>一个JS函数库:write less,do more</li> <li>封装简化DOM操作(CRUD)/Ajax</li></ul>* 为什么用:Why? - 强大选择器:方便快速查找DOM元素 - 隐式遍历(迭代):一次操作多个元素 - 读写合一:读数据/写数据用的是一个函数 - 时间处理 - 链式调用 - DOM操作(CRUD) - 样式操作* 如何使用:How? * 引入jQuery库 * 本地引入 * CDN远程引入(推荐) * 测试版本与生产版本(压缩版 min.js) * 使用jQUery * 使用jQuery函数:$/jQuery * 使用jQuery对象:$xxx(执行$()得到的)
2. jQuery的2把利器
- jQuery的函数:$/jQuery
* jQuery向外暴露的就是jQuery函数,可以直接使用
* 当成一般函数使用:$(p ...
理解this
this的原理一、问题的由来学懂JavaScript语言,一个标志就是理解下面两种写法,可能有不一样的结果:
1234567891011var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()
上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样
12345678910var obj = { foo: function () { console.log(this.bar) }, bar: 1};var foo = obj.foo;var bar = 2;obj.foo() // 1foo() // 2
这种差异的原因,就在于函数体内部使用了this关键字。很多教科书说,this指的是函数运行时所在的环境。对与obj.foo()来说,foo运行在obj环境,所以this指向obj;对于foo()来说,foo运行在全局环境,所以this指向全局环境。所以,两种运行结果不一样。
这种 ...
如何让一个元素水平垂直居中
如何让一个行内元素(文字、图片等)水平垂直居中
行内元素的居中问题比较简单。
行内元素水平居中给父容器设置:
12text-align: center;
行内元素垂直居中让文字的行高 等于 盒子的高度,可以让单行文本垂直居中。比如:
1234.father { height: 20px; line-height: 20px;}
如何让一个块级元素水平垂直居中
这一段是本文的核心。如何让一个块级的子元素在父容器里水平垂直居中?有好几种写法。我们一起来看看。
margin: auto 的问题在 CSS 中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父容器应用 text-align: center;如果它是一个块级元素,就对它自身应用 margin: auto或者 margin: 0 auto。
在这里,margin: auto相当于margin: auto auto auto auto。margin: 0 auto相当于margin: 0 auto 0 auto,四个值分别对应上右下左。其计算值取决于剩余空间。
但是,如果要对一 ...