第一次总结，不知道正确答案，希望指教
一、 选择题

  1. 下列不属于ES5/ES6的内置对象的是（ ）
    A、Number B、String C、Prototype D、Date
    我选了:C
    正确答案：C

（1）什么是内置对象？
内置对象就是ES标准中规定的浏览器厂商已经实现的API都叫做内置对象。
（2）内置对象有哪些？
一共11个。分别是String、Number、Boolean、Array、Date、Math、RegExp、Err、Function、Object、Global.
（3）这些内置对象都做了什么？
这些内置对象都做了两件事，第一个是封装数据，第二个是简化你的操作，提供了很多现成的API让你去操作数据。

  1. 一些不属于HTTP七层协议的是（ ）
    A、应用层 B、会话层 C、网络层 D、控制层
    我选了:D
    正确答案：D
    扩展：图片说明
  2. 在下列div中添加以下样式，其字体颜色是（ ）
    <div class="d1">
  <div class="d2" id="d2" style="color:red">应用样式元素</div>
</div>
<style>
  .d2{ color: pink  !important; }
  #d2{color: black; }
  .d1>d2{color: blue; }
 </style>
    A、red B、pink C、blue D、black
    我选了:A
    正确答案：B
    扩展：考css的优先级，css的优先级基本规则是id选择器（#id）>类选择器（.class）>标签选择器
    同一级别下选择就近原则。而标有!important的有着最高优先级。没有标!important的，就优先写在标签里面的style样式，再到外部css。
  3. 通过以下哪种办法可以获取URL链接中的参数（ ）
    A、location.href B、location.search C、location.hash D、location.protocol
    我选了:A
    正确答案：
    扩展:
  4. 通过以下哪个伪类可以设置按钮按下的效果（ ）
    A、:hover B、:blur C、:focus D、:active
    我选了:D
    正确答案：D
    扩展: :hover是鼠标移上的效果，:blur是失去焦点的效果，:focus是聚焦效果，:active是鼠标点击效果
  5. 图片题，给一些图片，然后选择缺少的那个图（不会做，找不到规律）
  6. 图片题，给一些图片，然后选择缺少的那个图（不会做，找不到规律）
  7. 图片题，给一些图片，然后选择缺少的那个图（不会做，找不到规律）
  8. 以下关于栈和队列描述正确的是（ ）
    A． 栈是先进先出
    B． 队列是先进先出
    C． 队列是先进后出
    D． 以上说法都不对
    我选了:A
    正确答案：B
    扩展: 栈是一种先进后出的线性表，队列是一种先进先出的线性表，栈与队列都是线性结构。
  9. 下列关于HTTP状态500描述正确的是（ ）
    A． 服务器遇到了一个未曾预料的状况，导致它无法完成对请求的处理
    B． 作为网关或者代理工作的服务台尝试执行请求时，从上游服务器接收到的无效的响应。
    C． 请求失败，未找到网络资源。
    D． 当前请求需要用户验证。
    我选了:B
    正确答案：
    扩展:http500是“内部服务器错误”
  10. 如果所有的广州人都是广东人，所有的男生都是广州人，以下结论正确的是（ ）
    A． 所有的男生都是广东人
    B． 部分男生是广东人
    C． 没有男生不是广东人
    D． 所有男生都不是广东人
    我选了A
  11. 通过以下哪种CSS样式，div可以实现相对其父元素定位？（ ）
    <div style="position:relative">
<div class="d1">应用样式的元素</div>
</div>
    A． position：static
    B． position：fixed
    C． position:absolute
    D． position:relative
    我选了C
  12. 以下代码中，点击d2元素打印的结果是（ ）
    <style>
 .d1{width: 100px;
     height: 100px;
     background-color: red;}
 .d2{width: 50px;
     height: 50px;
     background-color: blue;}
</style>
<div>
 <div onclick="console.log('red');" class="d1">
    <div onclick="console.log('blue');" class="d2"></div>
 </div>
</div>
    A． red blue
    B． blue
    C． red
    D． blue red
    我选了D
  13. 以下单位不属于相对单位的是（ ）
    A． pt
    B． em
    C． rem
    D． px
    我选了D
  14. 请选择以下代码输出值（ ）
    function add(){
     let value = 1;
     return function(){
         console.log(value++);
     }
 }
 var fn =add();
 fn();
 fn();
 add()();
    A．1,1,1
    B．1,1,2
    C．1,2,1
    D．1,2,3
    我选了B
    正确答案C
    二、问答题
  15. 请谈谈你对css盒模型的理解
    回答思路：1.什么是css盒模型2.盒模型的两种形式3.如何设置盒模型的属性4.默认边距问题。
    答：
    ```
  • 首先css盒可以理解为一个装载东西的盒子，它里面装载的就是页面的元素，如图片、标签等。而在网页中，一个元素的占有空间分为元素的内容（content）、元素的内边距（padding）、元素的边框（border）和元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。由里向外content->padding->border->margin。4个部分一起构成了css中元素的盒模型。
  • css盒模型有两种模型：3WC模型（content-box）和IE模型（border-box）。它们都是css盒模型，唯一不同的是它们的宽度不一样。
  • 3WC标准模型（content-box）：是计算content的宽度和高度
  • IE模型（border-box）：是计算content+padding+border的宽度和高度
  • css中用box-sizing来设置这两个盒模型，box-sizing:content-box;表示标准模型
  • box-sizing:border-box;表示IE模型
    ```
  1. 请分别用float布局和flex布局实现页面布局：左右两侧各位100px的固定宽度区域，中间内容自适应
    float布局：
    思路：创建三个div,左右两侧的div代码放在中间div的前面，设置左边div左浮动，右边div右浮动，这样最后的div就会上浮在中间
    实现代码：
    <div class="one">我是第一</div>
<div class="three">我是最后</div>
<div class="two">我是中间</div>
<style>
 *{
     margin: 0;
     padding: 0;
 }
 .one{
     width: 100px;
     height: auto;
     background: blue;
     float: left;
 }
 .three{
     width: 100px;
     height: auto;
     background: pink;
     float: right;
 }
 .two{
     background: green;
 }
</style>
    flex布局：
    思路：写一个包裹着3个div的大div,将其设置成为flex布局，然后将大div中的第一个div设置宽度，最后一个div也设置宽度，中间的div添加flex:1;属性。这个属性的意思是占据剩下的空间。
    代码实现：
    <div class="box">
 <div class="left">我是左边</div>
 <div class="middle">我是中间</div>
 <div class="right">我是右边</div>
</div>
<style>
 *{
     margin: 0;
     padding: 0;
 }
.box{
 display: flex;
}
.left{
 width: 100px;
 background: green;
}
.middle{
background: hotpink;
flex:1;
}
.right{
 background: indigo;
 width: 100px;
}
</style>
  2. 请简述浏览器输入URL后页面资源的响应过程
    整个流程如下：
    1、域名解析
    1、浏览器查询自己的DNS缓存
2、本地操作系统的DNS缓存
3、操作系统的hosts文件（一张维护域名与IP地址的对应表）
4、本地域名服务器
4.1 根域名服务器，返回顶级域名服务器的地址
4.2 顶级域名服务器，返回权限服务器的地址
4.3 权限域名服务器，返回对应的IP地址
5、本地域名服务器拿到了IP地址，返回给操作系统，并将其缓存
6、操作系统将IP返回给浏览器，并将其缓存
7、浏览器拿到对应的IP，并将其缓存
    2、 发起TCP的3次握手
第一次握手：客户端发送syn报文，并置发送序号为X
第二次握手：服务端发送syn+ack报文，并置发送序号为Y,再确认序号为X+1
第三次握手：客户庙发送ack报文，并置发送序号为Z,再确认序号为Y+1
3、 建立TCP连接后发起http请求
客户端向服务器发送请求报文
4、服务器响应http请求
服务器收到请求报文，并向客户端发送响应报文
5、浏览器解析html代码，并请求html代码中的资源(如js,css,图片等)
浏览器接收响应报文，并根据html中的资源下载对应的js,css,图片等资源。
6、 断开TCP连接
通过四次挥手，断开TCP连接
四次挥手：
1.主动方发起断开连接的请求
2.被动方响应，告知已经收到断开连接的请求，等数据发送完毕就断开连接
3.被动方告知主动言，数据已经发送完毕，可以断开连接了
4.收到，断开连接
7、 浏览器对页面进行渲染呈现给用户
浏览器通过引擎将页面渲染出来，呈现给用户
  3. 请你谈谈对vue生命周期的过程和理解
    答题思路：什么是vue生命周期？理解
    答：vue生命周期一共分为8个阶段：
    （1） 创建前（before create）：没有任何赋值操作，只是初始化
    （2） 创建后（created）：此时data，message已经赋值，而el还没有值
    （3） 挂载前（before Mount）：通过{{message}}进行站位，但是此时在页面上，还是JavaScript的虚拟DOM形式存在
    （4） 挂载后（Mounted）:元素已经在页面上渲染了
    （5） 更新前(updata):当vue中的data数据发生变化时，会触发组件发生相应的变化，此时监测到数据发生改变，而视图还未发生改变
    （6） 更新后（updated）：此时数据已经改变，视图也重新渲染
    （7） 销毁前（ beforeDestroy）：销毁前，实例还可以用
    （8） 销毁后（Destroyed）：vue实例已经被销毁
    二、 编程题
  4. 请使用构造函数形式创建以下对象：
    创建一个公司对象，name为“xxxx”，该公司的功能包括：
    （1） 求解鸡兔同笼业务（如：鸡兔共有35个头，94条腿，问鸡兔各有多少只？输入已知参数，返回鸡和兔的数量）
    （2） 计算斐波那契数列的第n项的值（提示：斐波那契数列：0、1、1、2、3、5、8、13、21、34……x）
    思路：（1）先让输入鸡兔的头的个数，脚的个数，然后用等式算出鸡，再算出兔，然后输出结果
    代码：
    <script>
function company(){
var a = prompt("请输入鸡兔一共有多少个头？","");
var b = prompt("请输入鸡兔一共有多少只脚？");
if(a != "" && b!=""){
a = +a;
b = +b;
var c = (b- 2*a)/2;
var d = a - c;
alert("鸡是"+c+"只");
alert("兔子是"+d+"只");
}
}
company();    
</script>
    （2）
    图片说明
    代码： 
    <!-- <script>
function fn(){
var n = prompt("请输入您想要计算的斐波那契数列第n项？");
if(n == 0){
alert("斐波那契数列第"+n+"项为0");
}else if(n == 1){
alert("斐波那契数列第"+n+"项为1");
}else if(n >= 2){
var result = (n-1) + (n-2);
alert("斐波那契数列第"+n+"项为"+result);
}
}
fn();
</script> -->