一、 HTML和CSS
1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Trident内核:IE系列
Gecko内核:Firefox
Webkit内核:Safari
Blink内核：是基于Webkit内核的子项目,使用的浏览器有：
Chrome/opera等除IE、Firefox、Safari之外的几乎所有浏览器
几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等
2. 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
文档声明。
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题。
3. div+css的布局较table布局有什么优点？
正常场景一般都适用div+CSS布局，优点：
结构与样式分离
代码语义性好
更符合HTML标准规范
SEO友好
Table布局的适用场景：
某种原因不方便加载外部CSS的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面布局正常。
4. img的alt与title有何异同？ strong与em的异同？
a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
em:表现为斜体，语义表示强调
strong:表现为粗体，语义为强烈语气，强调程度超过em
5. 你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
6. 为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便（2017年3月22日 - CDN加速-CDN的全称是Content Delivery Network,即内容分发网络)
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
7. 请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性
8. 请描述一下cookies，sessionStorage和localStorage的区别？
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
9. 简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
12. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
16. CSS都有哪些选择器？
一、基本选择器
-
- 通用元素选择器，匹配任何元素
- E 标签选择器，匹配所有使用E标签的元素
- .info class选择器，匹配所有class属性中包含info的元素
- #footer id选择器，匹配所有id属性等于footer的元素
二、多元素的组合选择器
5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
7. E > F 子元素选择器，匹配所有E元素的子元素F
8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
三、CSS 2.1 属性选择器
9. E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[cheacked]"。以下同。）
10. E[att=val] 匹配所有att属性等于"val"的E元素
11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
12. E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、“en-us”、"en-gb"等等
四、CSS 2.1中的伪类
13. E:first-child 匹配父元素的第一个子元素
14. E:link 匹配所有未被点击的链接
15. E:visited 匹配所有已被点击的链接
16. E:active 匹配鼠标已经其上按下、还没有释放的E元素
17. E:hover 匹配鼠标悬停其上的E元素
18. E:focus 匹配获得当前焦点的E元素
19. E:lang© 匹配lang属性等于c的E元素
五、 CSS 2.1中的伪元素
20. E:first-line 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一个字母
22. E:before 在E元素之前插入生成的内容
23. E:after 在E元素之后插入生成的内容
六、CSS 3的同级元素通用选择器
24. E ~ F 匹配任何在E元素之后的同级F元素
七、CSS 3 属性选择器
25. E[att^=“val”] 属性att的值以"val"开头的元素
26. E[att$=“val”] 属性att的值以"val"结尾的元素
27. E[att*=“val”] 属性att的值包含"val"字符串的元素
八、CSS 3中与用户界面有关的伪类
28. E:enabled 匹配表单中激活的元素
29. E:disabled 匹配表单中禁用的元素
30. E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
31. E::selection 匹配用户当前选中的元素
九、CSS 3中的结构性伪类
32. E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
35. E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
37. E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
十、CSS 3的反选伪类
43. E:not(s) 匹配不符合当前选择器的任何元素
十一、CSS 3中的 :target 伪类
44. E:target 匹配文档中特定"id"点击后的效果
46. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于letter-spacing的妙用知道有哪些么？
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
24. 如何垂直居中一个浮动元素？
// 方法一：已知元素的高宽
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; /父元素需要相对定位/
top: 50%;
left: 50%;
margin-top:-100px ; /二分之一的height，width/
margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; /父元素需要相对定位/
left: 0;
top: 0;
right: 0;
bottom: 0;
}
/如何垂直居中一个?（用更简便的方法。）/
1
2
3
4
5
6 #container /的容器设置如下/
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
25. px和em的区别。
px和em都是长度单位，区别是：
px值固定，容易计算。
em值不固定，是相对单位，其相对应父级元素的字体大小会调整
28. display:none与visibility:hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
29. CSS中link和@import的区别是：
Link属于html标签，而@import是CSS中提供的
@import有执行效率问题，它会打破浏览器并行加载资源，导致加载页面速度变慢。尽量不要使用@import。
42. CSS的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
43. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
* 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child）
* 可继承： font-size font-family color, UL LI DL DD DT;
* 不可继承 ：border padding margin width height ;
* 优先级就近原则，样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
45. 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
- block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。 - position的值
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative
生成相对定位的元素，相对于其正常位置进行定位。 - static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。 - inherit 规定从父元素继承 position 属性的值。
说display属性有哪些？可以做什么？
display:block行内元素转换为块级元素
display:inline块级元素转换为行内元素
display:inline-block转为内联元素
4. 如何实现浏览器内多个标签页之间的通信?
调用 localstorge、cookies 等本地存储方式
5. 你如何对网站的文件和资源进行优化？
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
6. 什么是响应式设计？
低成本实现一套代码一个网页在多终端多设备下访问达到一定用户体验的开发方式。其布局会根据终端情况自适应调整达到一定水平的用户体验。
7. 新的 HTML5 文档类型和字符集是？
答：HTML5文档类型：<!doctype html>
HTML5使用的编码
三、JS基础
1. javascript的typeof返回哪些数据类型
alert(typeof [1, 2]); //object
alert(typeof ‘leipeng’); //string
var i = true;
alert(typeof i); //boolean
alert(typeof 1); //number
var a;
alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function
2. 例举3种强制类型转换和2种隐式类型转换?
强制（parseInt(),parseFloat(),Number()）
隐式（== ,!!）
3. split() 、join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4. 数组方法pop() push() unshift() shift()
push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除
map() : 遍历数组中的元素, 返回一个新数组(包含回调函数返回的数据)
filter():遍历数组中的元素, 返回一个新数组(包含回调函数返回true的元素)
5. 事件绑定和普通事件有什么区别
普通添加事件的方法：
var btn = document.getElementById(“hello”);
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
执行上面的代码只会alert 2
事件绑定方式添加事件：
var btn = document.getElementById(“hello”);
btn.addEventListener(“click”,function(){
alert(1);
},false);
btn.addEventListener(“click”,function(){
alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
addEventListener不兼容低版本IE
普通事件无法取消
addEventLisntener还支持事件冒泡+事件捕获
6. IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7. IE和标准下有哪些兼容性的写法
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
8. call和apply的区别
功能一样, 都是将当前函数作为指定对象的方法执行, 即函数中的this是指定对象
call(thisObj，arg1,arg2…) //将所有参数一个一个传递进去
apply(thisObj，[argArray]) //将所有参数放在数组中传入
14. ””和“=”的不同
前者会自动转换类型
后者不会
22. 看下列代码输出为何？解释原因。
var a;
alert(typeof a); // undefined
alert(b); // 报错
解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
23. 看下列代码,输出什么？解释原因。
var a = null;
alert(typeof a); //object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。
24. 看下列代码,输出什么？解释原因。
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ‘’; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
undefined与null相等，但不恒等（=）
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用 “=” 。“===”会先判断两边的值类型，类型不匹配时为false。
那么问题来了，看下面的代码，输出什么，foo的值为什么？
var foo = “11”+2-“1”;
console.log(foo);
console.log(typeof foo);
执行完后foo的值为111，foo的类型为number。
25. 看代码给答案
。
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
答案：2（考察引用数据类型细节）
26. 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
alert(stringArray.join(“”))
27. 已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
function combo(msg){
var arr=msg.split("-");
for(var i=1;i<arr.length;i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i]
.substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
28. var numberArray = [3,6,2,4,1,5]; （考察基础API）
- 实现对该数组的倒排，输出[5,1,4,2,6,3]
numberArray.reverse() - 实现对该数组的降序排列，输出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})
29. 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? ‘0’ + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? ‘0’ + day : day;
alert(year + ‘-’ + month + ‘-’ + day);
30. 将字符串”{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{name}”中的{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10，{name}替换成Tony （使用正则表达式）
“{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{id}_{$name}”.replace(/{$id}/g, ‘10’).replace(/{$name}/g, ‘Tony’);
31. 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
switch (match) {
case “<”:
return “<”;
case “>”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
32. foo = foo||bar ，这行代码是什么意思？为什么要这样写？
如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
33. 看下列代码，将会输出什么?(变量声明提升)
var foo = 1;
(function(){
console.log(foo);
var foo = 2;
console.log(foo);
})()
答案：输出undefined 和 2。上面代码相当于：
var foo = 1;
(function(){
var foo;
console.log(foo); //undefined
foo = 2;
console.log(foo); // 2;
})()
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
34. 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
function randomNub(aArray, len, min, max) {
if (len >= (max - min)) {
return ‘超过’ + min + ‘-’ + max + ‘之间的个数范围’ + (max - min - 1) + ‘个的总数’;
}
if (aArray.length >= len) {
aArray.sort(function(a, b) {
return a - b
});
return aArray;
}
var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
for (var j = 0; j < aArray.length; j++) {
if (nowNub == aArray[j]) {
randomNub(aArray, len, min, max);
return;
}
}
aArray.push(nowNub);
randomNub(aArray, len, min, max);
return aArray;
}
var arr=[];
randomNub(arr,10,10,100);
35. 把两个数组合并，并删除第二个元素。
var array1 = [‘a’,‘b’,‘c’];
var bArray = [‘d’,‘e’,‘f’];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
转载：https://blog.csdn.net/IDtangjiasanshao/article/details/106652628