前言
同样的与之前一样一套校招面试题目的分享，同时小编自身也做一个记录，整理了每一题的详细解析，篇幅比较大但是是比较全面的在写，前面考察的都是一些HTML属性之类的后面有一些js相关题目也挺不错的。题目来源牛客网该题库地址
题目及解析
第一题：HTML基础
下面关于 HTML 的描述正确的一项是（）
A. HTML5 中的所有标签都必须写结束标签
B. DOCTYPE 的设置不会影响页面的展示效果
C. HTML5 中的属性名对大小写敏感
D. HTML5 中可以使用 data-* 自定义属性
正解：D
A、C 考察HTML与XHTML的区别，所有标签闭合是后者的一个硬性标准，同样对大小写敏感也是XHTML的标准。在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
B 这边补充一下，DOCTYPE声明用来告知浏览器的解析器用什么文档标准解析这个文档，DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
D 考察HTML5中data自定义属性，是有的这边小编简单介绍一下他的用法
<!--我们自定义data-属性可以在js中获取到执行一些操作-->
<div id="test" class="box" data-id="myId" data-class="myClass"></div>
<script>
var div = document.getElementById("test");
var attr = div.attributes; // attributes获取NamedNodeMap对象
var data = div.dataset;
var id = div.id;
var myId = div.dataset.id;
console.log(attr); //NamedNodeMap对象
console.log(data); //DOMStringMap对象
console.log(id);
console.log(myId);
</script>
输出结果如下，可以对应着看一下这边就不多做解释
/* 选择含有属性值data-class的div */
div[data-class] {
width: 100px;
height: 100px;
background: red;
}
/* 选择属性值data-class的值为myClass的div */
div[data-class="myClass"] {
width: 100px;
height: 100px;
}
第二题 HTML5表单类型
下面哪个类型不是 HTML5 新增的表单类型（）
A. color
B. data
C. password
D. email
正解：C
color类型:用来选取颜色的，它提供一个颜色选取器用来选取。 date类型:以日历的形式方便用户输入 email类型:该类型会自动要求输入的地址格式正确，否则浏览器不允许提交，并且有一个错误的信息提示email类型的文本框具有一个multiple属性，该属性允许在文本框中输入使用逗号分隔有效的E-mail地址的一个列表。
第三题 HTML标签属性考察
关于无障碍性（Accessibility）的说法中，错误的是（）
A. role 属性用来指定一个元素在页面中的作用
B. alt 属性用来为图片提供文字性说明
C. 正确地使用语义化标签有助于提高页面的无障碍性
D. tabindex 属性用来指定使用键盘访问该元素的快捷键
正解：D
role属性用来增强标签的语义的
D选项，我们在网页中可以用tab键去切换焦点位置，tabindex 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航。
第四题 from表单属性
为了实现表单文件上传，需要将 form 元素的 enctype 属性设置为（）
A. application/json
B. text/plain
C. multipart/form-data
D. application/x-www-form-urlencoded
正解：D
第五题 Canvas性能优化
下面有关 HTML5 Canvas 性能优化的做法，哪项是错误的（D）
A. 使用多个分层的 Canvas 绘制复杂场景
B. 不在动画中使用 putImageData 方法
C. 使用 Web Worker 运行时间复杂度高的代码
D. 将计算阶段的开销转嫁到 Canvas 绘制阶段
第六题 CSS权重
页面中包含如下代码，请问页面中 h1 中的文字颜色是 （）
<article id="post" class="content">
<h1 class="title">360公司简介</h1>
</article>
<style>
#post {
color: blue
}
h1.title { color: black }
.content .title { color: red }
article h1 { color: green }
</style>
正解：红色
权重问题相信大家都懂，这边主要是要注意的是继承<权重
第七题 文本溢出
下面哪种方法可以让一个元素内的文字永远在一行内显示（文字很长时也不会换行）（）
A. word-break: normal
B. word-wrap: nowrap
C. white-space: nowrap
D. word-spacing: 0
正解：C
解决单行文字溢出：
whitespace:nowrap; /*这边是阻止文字换行*/
overflow:hidden; /*隐藏溢出部分*/
test-overflow:ellipsis; /*用点代替被切断文字*/
第八题 display属性值
下面哪不是 display 属性的合法值（）
A. table
B. flex
C. inline-block
D. hidden
正解：D
这边主要可能table用得比较少一点，设置后盒子表格形式展现
第九题 考察浮动
页面中有如下代码：
<div class="profile">
<img src="a.jpg" alt="avatar" class="avatar">
<p class="desc">Some description</p>
</div>
<article>
<h2>Posts</h2>
</article>
<style>
.profile .avatar { float: left }
</style>
如果想让 article 不受浮动影响，哪种做法是错误的 （C）
A. article { clear: both }
B. .profile::after { content: ''; display: block; clear: both }
C. .profile { clear: both }
D. .profile { overflow: hidden }
正解：C
清除浮动的几种方法
- 父级div定义height
- 结尾处加空div标签clear:both
- 父级div定义伪类:after和zoom
- 父级div定义overflow:hidden
- 父级div也浮动，需要定义宽度
- 结尾处加br标签clear:both
第十题 C3属性考察
如果要将一个元素旋转 90°，可以使用 CSS 中的哪个属性实现（B）
A. translate
B. transform
C. transition
D. animation
第十题 for in循环考察
以下代码的输出结果是（B）
let obj = {
a: 1,
b: 2
};
Object.prototype.c = 3;
Object.defineProperty(obj, 'd', {
enumerable: false
});
for (let key in obj) {
console.log(key);
}
A. a b
B. a b c
C. a b c d
D. a b d
for ... in 循环可以遍历自身和继承上所有可以枚举的属性，所以这边对象原型上的所有属性索引都可以访问到
第十一题 阻止冒泡
在 W3C DOM 事件的回调函数中，如何阻止事件冒泡（）
A. preventDefault() // 阻止事件
B. stopPropagation() // 阻止冒泡
C. cancelBubble()
D. return false
第十二题
下面哪一个不是 JavaScript 模块化规范（C）
A. AMD
B. CommonJS
C. RequireJS
D. ES Modules
这边直接附上截图解析：
第十三题 http缓存
以下列举的 HTTP 响应头中，哪项与 HTTP 缓存无关（B）
A. Last-Modified
B. Connection
C. Cache-Control
D. Etag
const关键字
有关 ES6 的 const 关键字，以下说法哪项是正确的（A）
A. const 只在声明所在的块级作用域内有效
B. const 存在与 var 类似的变量提升机制
C. const 可以用来阻止对象的属性被无意修改
D. const 声明的全局变量，也属于顶层对象的属性
const 用于声明常量，其值一旦被设定不能再被修改，否则会报错，他与let两者都没有变量提升机制。C选项注意，const定义对象，对象属性值任然可以被改变
第十五题 const声明对象
以下代码执行后，obj 的值是（C）
const obj = {x: 1, y: 2};
function foo(obj){
obj.x++;
obj.y--;
}
foo(obj);
A. {x:1, y:2}
B. {x:1, y:1}
C. {x:2, y:1}
D. 报错
该题目考察就是const定义对象对象值任然可以被更改
第十六题 事件处理
要让下面的代码能正常工作，在 ________ 处应当填写？
const link = document.querySelector('a.preview');
link.addEventListener('click', function(e){
previewImage(e.target.href);
_____________________________
});
A. e.preventDefault();
B. e.stopPropagation();
C. return false
D. e.cancelBubble = true;
A选项取消默认事件
第十七题 map函数考察
以下代码执行后控制台的输出是（A）
[...[1,,3,,5]].map((_, n) => n);
A. [0,1,2,3,4]
B. [1,2,3,4,5]
C. [1,undefined,3,undefined,5]
D. [0,undefined,2,undefined,4]
这个题目在写的时候就比较坑了当时都没注意数组里面有五位。
[...[1,,3,,5]] => [1, undefined, 3, undefined, 5]然后map函数第一个参数_代表空取第二个参数那么就是取数组索引值。
第十八题 HTML基础知识
以下对 HTML 描述错误的是（B、C）
A. HTML5 是 HTML 的第 5 个 版本
B. HTML 的标签区分大小写，故 `<a>` 和 `<A>` 是不同的标签
C. 页面上的 JS 只有在图片资源都加载完成后才能开始工作
D. 同步加载外链 CSS 会阻塞后续内联 JS 的执行
第十九题
以下表达式值为 false 的是（B、C、D）
A. "abc" === "abc"
B. {x:1} === {x:1}
C. Symbol(1) === Symbol(1)
D. NaN === NaN
B选项对象内容一样但对象指针是不同的，C选项那就不用说了Symbol函数返回独一无二。D选项也是常见的false
总结
整体考察也比较“杂”，其实不管是什么重要的还是积累，小编后续几天会整理一下Vue面试题的几个常见问题，自己也好好地复习结合源码好好弄懂一下。 ending...
