请写出一个符合 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 lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>我的页面</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/print.css" media="print">
<link rel="stylesheet" href="/mobile.css" media="max-width:500px">
</head>
<body>
<svg width="100%" height="200">
<circle cx="100" cy="100" r="50" fill="green"/>
</svg>
<script src="/main.js"></script>
<script src="/gbk.js" charset="GBK"></script>
</body>
</html>
移动端是怎么做适配的？
回答要点：
meta viewport
在HTML的<head>标签加meta进行移动端的适配
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
媒体查询
使用 @media 查询，可以针对不同的媒体类型定义不同的样式。
语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
也可以针对不同的媒体使用不同 stylesheets (媒体类型是可选的，默认值是all):
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
实例：实现浏览器窗口小于 500px并将背景将变为绿色：
@media only screen and (max-width: 500px) {
body {
background-color: green;
}
}
rem
rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位，即根据网页的根元素（html）来设置字体的大小。
- 手机端方案的特点
a. 所有手机显示的界面都是一样的，只是大小不同
b. 1 rem == html font-size == viewport width - 使用 JS 动态调整 REM
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
- REM 可以与其他单位同时存在
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
- 在 SCSS 里使用 PX2REM，实现 px 自动转换 rem
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 750; //750为设计稿的宽度
.child{
width: px(375);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
用过CSS3吗? 实现圆角矩形和阴影怎么做?
请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
-
HTTP五种类型状态码
1XX：信息，服务器收到请求，需要请求者继续执行操作
2XX：成功，操作被成功接收并处理
3XX：重定向，需要进一步的操作以完成请求
4XX：客户端错误，请求包含语法错误或无法完成请求
5XX：服务器错误，服务器在处理请求的过程中发生了错误 -
205 //重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域。
-
302 //临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI。
-
303 //查看其它地址。与301类似。使用GET和POST请求查看。
-
403 //服务器理解请求客户端的请求，但是拒绝执行此请求。
-
404 //服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
-
406 //服务器无法根据客户端请求的内容特性完成请求。
-
501 Not Implemented: 服务器不支持当前请求所需要的某个功能。
-
502 //服务器不支持请求的HTTP协议的版本，无法完成处理。
请说出至少三种排序的思路，这三种排序的时间复杂度分别为
- O(n*n)
- O(n log2 n)
- O(n + max)
O(n*n) 冒泡排序：冒泡排序：比较相邻的两个数，如果前面的数比后面的数大，就交换它们的位置。第一次比较，最大的数就排在了队尾。如此重复上面的操作，直到所有数据都排好序
O(n log2 n)堆排序
堆分为最大堆和最小堆，可以视为一棵完全的二叉树。以最大堆为例。最大堆要求父节点的元素都大于其孩子(子节点)。如果这个父节点的值要小于其左右子节点的值，那就要从其左右子节点中找出一个最大的值让它上浮顶替当前的父节点。而当前的父节点就下沉到之前子节点的位置。每一次排序都从最底层开始，自下而上的把每一个找到的最大堆值层层上浮，直到堆顶，然后取堆顶的值放到序列最后。依次类推，最终得到排序的序列。
O(n + max)基数排序
把一串数据从低位到高位依次比较各个位。先从个位开始，根据位值(0-9)分别放到0-9号桶中，再将放置在0~9号桶中的数据按顺序放到数组中。重复前面操作，直到数据从个位到最高位排好序。
请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
POST / HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*
Content-Length: 10
Content-Type: application/x-www-form-urlencoded
user=ff&password=123
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
分为以下几个过程：
- 当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
- 浏览器与远程Web服务器通过TCP三次握手来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
- 一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
- 此时，Web服务器提供资源服务，客户端开始下载资源。包括如下过程：
- 浏览器开始下载html文档(响应报头，状态码200)，同时设置缓存。
- 之后浏览器对整个 HTML 结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS 文件进行解析，形成 CSS 树（CSSOM）
- 接下来，需要结合 DOM + CSSOM，形成一个绘制树（Render Tree）
- 得到绘制树之后，浏览器开始布局渲染树并将其绘制到屏幕上，最后组合成一个页面。
如何实现数组去重？
假设有数组 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 对象
ES 5:
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(arr) {
var newArr = [];
var object = {};
for(var i=0,l=arr.length;i<l;i++) {
if(!object[arr[i]]) {
object[arr[i]] = true;
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(unique(array)); //[1, 5, 2, 3, 4]
ES 6:
var array = [1,5,2,3,4,2,3,1,3,4]
function unique (array) {
return Array.from(new Set(array))
}
console.log(unique(array)); // [1, 5, 2, 3, 4]
call、apply、bind 的用法分别是什么？
-
call()和apply()
call()接收一串单独的参数，apply()接收一个参数数组
apply()和call() 的作用基本上都差不多，只是接受参数的方式不太一样。它们都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。 -
bind
bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。 -
三者的比较
var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81
虽然三个输出的都是81，但是 bind() 方法的后面多了对括号。也就是说，区别是当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。
什么是闭包，闭包的用途是什么？
概念：
当我们需要得到函数内的局部变量时，就要在函数的内部，再定义一个函数。闭包就是能够读取函数内部变量的函数。
用处
- 可以读取函数内部的变量
- 让变量的值始终保持在内存中。
function a(){
var n=1;
function b(){ //这里的b就是一个闭包
alert(n);
}
return b;
}
var result=a();
result(); // 1
上面代码中函数b就是一个闭包，从运行结果来看，函数b可以读取a的局部变量n。正好诠释了上面“闭包就是能够读取函数内部变量的函数”这一句话。
网友评论