请写出一个符合 W3C 规范的 HTML 文件，要求
页面标题为「我的页面」
页面中引入了一个外部 CSS 文件，文件路径为 /style.css
页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
页面中引入了一个外部 JS 文件，路径为 /main.js
页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意
注意题目中的路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的页面</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" media="print" href="./print.css">
<link rel="stylesheet" media="screen and (max-width: 500px)" href="./mobile.css">
</head>
<body>
<svg width= "300px" height= "300px">
<circle cx= "100px" cy= "100px" r= "50px" fill= "green">
</svg>
<script src="./main.js"></script>
<script src="./gbk.js" charset="GBK"></script>
</body>
</html>
移动端是怎么做适配的？
回答要点：
- meta viewport
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
- 媒体查询
<style>
@media (max-width: 800px){
body{
background: red;
}
}
</style>
or
<link rel="stylesheet" media="screen and (max-width: 800px)" href="xxx.css">
- 动态 rem 方案
将根元素的font-size设置为页面宽度的大小，当页面变化时，font-size也会做出相应变化。
知晓1rem = font-size，此时我们就可以利用rem来设置页面的各部分的大小，即使更换到
不同的设备上，各部分页面也会按比例进行缩放
<script>
var pageWidth = document.documentElement.clientWidth
document.write(`<style>html{ font-size: ${pageWidth}px }</style>`)
</script>
用过CSS3吗? 实现圆角矩形和阴影怎么做?
- 实现圆角矩形：使用border-radius
div {
width: 100px;
height: 100px
border: 1px solid green;
border-radius: 10px;
}
border-radius 接受px、em、rem、 percentage等等单位的值
border-radius 接受1-4个值：
1个值：四个角都为同一个值
2个值：左上角和右下角使用第一个值，右上角和左下角使用第二个值
3个值：左上角使用第一个值，右上、左下使用第二个值，右下角使用第三个值
4个值：从左上起顺时针使用1-4个值
border-top-left-radius 、 border-top-right-radius、 border-bottom-right-radius 、 border-bottom-left-radius分别表示四个角，可以单独设置样式
- 实现阴影：使用box-shadow
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
box-shadow 有五个值： inset（阴影默认在边框之外，使用inset则在边框内） 、 <offset-x>/<offset-y> （设置阴影偏移量，x表示水平偏移，y表示垂直偏移，可以有负值）、 <blur-radius> （此值越大，模糊面积越大，阴影越淡）、 <spread-radius> （默认为0，正值时，阴影扩大；负值时，阴影缩小）、 <color> （设置阴影颜色）
什么是闭包，闭包的用途是什么？
阮一峰-JavaScript闭包
JavaScript语言的特殊之处在于函数内部可以直接读取全局变量，函数外部无法读取函数内的局部变量。函数内部声明变量时，一定要使用var命令。如果不用，实际上声明了一个全局变量。
function f1(){
n = 999
}
f1()
alert(n) // 999
如何从外部读取局部变量
function f1(){
var n = 999
function f2(){
alert(n)
}
return f2
}
var result = f1()
result() // 999
函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
闭包的概念
阮一峰理解：闭包就是能够读取其他函数内部变量的函数。由于在JavaScript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
call、apply、bind 的用法分别是什么？
- call()方法调用一个函数, 其具有一个指定的this值和逐个提供的参数(参数的列表)。
func.call(thisArg, arg1, arg2, ...)
- apply()方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。
func.apply(thisArg[, argsArray])
- bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
func.bind(thisArg[, arg1[, arg2[, ...]]])
call()和apply()用法相同，都是调用函数，唯一的不同是call()方法从第二个参数开始一个一个的提供参数，而apply()方法的第二个参数是一个数组，数组内存放需要提供的参数。
bind()方法用于创建函数，bind()方法的第一个参数就是要绑定的函数，当调用 func 时，this就会指向 thisArg 。
请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
HTTP 状态码就是一个三位数，分成五个类别。
- 1xx 相关信息
- 2xx 操作成功
200 表示请求成功，服务器会返回数据
204 表示请求成功，但没有返回内容 - 3xx 代表重定向，需要进一步的操作才能完成请求
301 表示永久重定向，意味着资源已经搬移到其他地方
302 表示临时重定向，意味着资源临时搬移到其他地方
304 服务端已经执行了GET，但文件未变化 - 4xx 表示客户端错误
400 Bad Request：服务器不理解客户端的请求，未做任何处理。
401 Unauthorized：用户未提供身份验证凭据，或者没有通过身份验证。
403 Forbidden：用户通过了身份验证，但是不具有访问资源所需的权限。
404 Not Found：所请求的资源不存在，或不可用。
405 Method Not Allowed：用户已经通过身份验证，但是所用的 HTTP 方法不在他的权限之内。
410 Gone：所请求的资源已从这个地址转移，不再可用。
415 Unsupported Media Type：客户端要求的返回格式不支持。比如，API 只能返回 JSON 格式，但是客户端要求返回 XML 格式。
422 Unprocessable Entity ：客户端上传的附件无法处理，导致请求失败。
429 Too Many Requests：客户端的请求次数超过限额。 - 5xx表示服务器错误
500 Internal Server Error：客户端请求有效，服务器处理时发生了意外。
503 Service Unavailable：服务器无法处理请求，一般用于网站维护状态。
请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
POST /path HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.52.1
Accept: */*
Content-Length: 23
Content-Type: application/x-www-form-urlencoded
usrname=ff&password=123
请说出至少三种排序的思路，这三种排序的时间复杂度分别为
O(n*n)
O(n log2 n)
O(n + max)
- 冒泡排序
相邻元素两两比较，较小的放在前面，较大的放在后面，如果两个元素相等，不改变位置。 - 快速排序
设定基准点，将小于基准点的值放在左侧，大于基准点的值放在右侧，然后以此循环给小于基准点和大于基准点的数列排序。 - 计数排序
现有需要排序的数组A，首先新建一个长度为（A中的最大值-A中的最小值+1）的数组B，把数组A中的值减去（A中的最小值）得到此数在数组B中的下标，并置于数组B内，最后将数组B内的元素依次取出放入数组C就得到排序好的数组。
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- DNS解析
DNS解析的过程就是根据域名查找 IP 地址。 - TCP连接
浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手：
（1）主机向服务器发送一个建立连接的请求（您好，我想认识您）；
（1）服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
（1）主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。 - 发送HTTP请求
HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。 - 服务器处理请求并返回HTTP报文
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。 - 浏览器解析渲染页面
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。 - 关闭TCP连接或继续保持连接
通过四次挥手关闭连接。一端断开连接需要两次挥手（请求和回应），两端断开连接就需要四次挥手。
如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。
要求：
不要做多重循环，只能遍历一次
请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）
ES6 set + 扩展运算符...
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(arr){
const mySet = [...new Set(arr)]
return mySet
}
console.log(unique(array)) //(5) [1, 5, 2, 3, 4]
ES6 includes
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(arr){
var result = []
arr.forEach(function(e){
if(!result.includes(e)){
result.push(e)
}
})
return result
}
console.log( unique(array) ) //(5) [1, 5, 2, 3, 4]
ES5
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(arr){
var temp = {}
var result = []
for(let i=0; i<arr.length; i++){
if(!temp[arr[i]]){
temp[arr[i]] = true
result.push(arr[i])
}
}
return result
}
console.log(unique(array)) //(5) [1, 5, 2, 3, 4]
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(a){
var result = a.filter(function(value, index, array){
return array.indexOf(value) === index
})
return result
}
console.log( unique(array) ) //(5) [1, 5, 2, 3, 4]
网友评论