一、题目
1、关于 BFC (block formatting context)，以下说法错误的有：
A、display 的值为 table-cell , table-caption和 inline-block 中的其中一个时，可触发 BFC
B、postion 的值为 relative 和 static 时可触发BFC
C、overflow-hidden 可作为常用 BFC 布局属性使用
D、只要元素可以触发BFC，就无须使用 clear:both 来清除浮动的影响
2、根据栅格系统的标准用法，错误的是
A、
<div class="container"><br> <div class="row">
B、
<div class="row"><br> <div class="col-md-1">
C、
<div class="row"><br> <div class="container">
D、
<div class="col-md-1"><br><div class= "row">
3、以下jQuery方法中那个方法可以设置渐变为给定的不透明度
A、$(selector).fadeIn()
B、$(selector).fadeOut()
C、$(selector).fadeToggle()
D、$(selector).fadeTo()
4、关于XML，JSON、HTML5下面哪些描述是错误的 ( ) 【不定项】
A、JSON比XML在数据编码上JSON更具有效率，更节约空间
B、HTML5是一种特殊的XML
C、XML对数据的类型描述表达比JSON更丰富
D、HTML5在跨系统交互面是一种理想的交换格式
E、XML比JSON更能表达结构化数据
F、存在一些数据库，直接支持XML或JSON数据的操作，如mongodb, postgresql
5、以下关于Histroy对象的属性或方法描述正确的是（）【不定项】
A、back回到浏览器载入历史URL地址列表的当前URL的前一个URL
B、go表示刷新当前页面
C、length保存历史URL地址列表的长度信息
D、forward转到浏览器载入历史URL地址列表的当前URL的下一个URL。
6、<i><em>标签语义分别表示斜体和加粗，是否正确？
7、以下Js程序的输出是什么（）
<SCRIPT LANGUAGE="JavaScript">
var a="undefined";
var b="false";
var c="";
function assert(aVar){
if(aVar)
alert(true);
else
alert(false);
}
assert(a);
assert(b);
assert(c);
</SCRIPT>
8、html5的跨文档消息传输说法错误的是：
A、可以实现同域内的 web 页面之间可以互相通信
B、缺点是不能实现跨域通信
C、可以相互传递字符串和对象
D、使用这个功能，需要获取到网页所在窗口对象的实例
9、
(function() {
var x=foo();
var foo=function foo() {
return "foobar"
};
return x;
})();
A、foo() B、类型错误 C、undefined D、foobar
10、如果想要让一个P 标签，在1s内缓慢的以滑动方式隐藏，要怎么实现：
A、$("p").slideUp(1000);
B、$("p").slideDown(1000);
C、$("p").mergeUp(1000);
D、$("p").mergeDown(1000);
11、CSS3新增特性有（）【不定项】
A、font-size B、@media C、@keyframes D、flexbox
12、触摸事件包括以下哪几种？（）【不定项】
A、touchStart B、touchMove C、touchCancel D、touchEnd
13、下列定义的 css 中，哪个权重是最低的？（）
A、#game div.name
B、#game .name
C、#game div
D、#game .name span
14、下列 html 语义化标签中，描述存在错误的是
A、<em>强调文字，<blockquote>长文本引用
B、<strong>强调文字，<h1>文章栏目标题
C、<a>超链接，<p>文章段落
D、<section>定义文档中的节，<nav>导航
E、<ul>有序列表。<ol>无序列表
15、Number(null);
上面的代码将返回：
16、白屏时间first paint和可交互时间dom ready的关系是？
17、微信公众号相关的H5页面测试时，下列哪项说法是错误的？
A、H5页面在第一次打开时，需要测试公众号授权。
B、手机设置里定位未被打开时，H5页面的定位将要手动选择。
C、公众号未授权进行定位时，H5页面的定位将要手动选择。
D、H5页面需要测试页面是否能被浏览器正常打开。
18、下述代码，在浏览器中执行的结果是
var A = { n: 4399 }
var B = function(){this.n = 9999}
var C = function(){var n = 8888}
B.prototype = A
C.prototype = A
A.n++
console.log(b.n)
console.log(c.n)
19、要将下面代码中超链接文本呈现为红色，不可以使用的样式表是（ ）。
<div><a href="http://www.w3.org/">链接到W3C</a></div>
A、a:link{color:red}
B、div a:link{color:red}
C、div>a:link{color:red}
D、div:first-child{color:red}
20、向当前#list的最后元素之后添加100个新的li节点，合理的操作方式是？
<ul id="list">
<li>1</li>
<li>2</li>
</ul>
A、通过循环方式创建新的li节点，并依次添加到#list中
B、先将#list节点的display设置为none，通过循环方式创建新的li节点，并依次添加到#list中，最后再将#list节点的display设置为block
C、取出#list中现有的li节点的html，将它与新增的li节点对应的html代码拼接成字符串，一次性插入到#list中
D、创建Fragment，通过循环方式创建新的li节点，添加到Fragment中，最后再将Fragment添加到#list中
21、以下位于<head>间的代码片段是做什么用的
<meta name="viewport" content="width=device-width, initial-scale=1">
A、使得页面编码合乎要求
B、表示支持响应式设计
C、支持正常的绘制和缩放
D、表示针对滚屏进行适当的适配
22、css 中可继承的属性有哪些 【不定项】
A、height B、font-size C、border D、width E、color
23、分析下面代码：
<html>
<head>
<script>
function myFunc() {
document.write(a);
document.write(func());
var a = 1;
function func() {
return 2;
}
}
</script>
</head>
<body>
<p>1</p>
<button onclick = "myFunc()">点击</button>
</body>
</html>
点击按钮后页面上的最终输出结果为：（）
24、在 HTML 页面上包含如下所示的层对象，则 javascript 语句 document.getElementById(“info”).innerHTML 的值是（）
<div id=”info” style=”display:block”><p> 请填写 </p></div>
A、请填写
B、<p>请填写</p>
C、id=”info” style=”display:block”
D、<div id="info" style="display:block"><p>请填写</p></div>
25、以下代码输出结果为（ ）
var str1=new RegExp("e");
document.write(str1.exec("hello"));
26、以下 javascript 代码，在浏览器中运行的结果是
function foo() {
console.log('first')
setTimeout(function() {
console.log('seconde')
}, 5)
}
for (var i = 0; i < 43999999; i++) {
foo()
}
A、first,second,first,second…依次顺序输出
B、首先全部输出first，然后全部输出second
C、first，second无顺序输出
D、首先输出first，超出5ms输出所有second，最后输出余下的first
27、css设置链接样式下列说法正确的是（）
A、a:hover可以在a:visited 之前生效
B、a:hover可以在a:link之前生效
C、a:active 必须位于 a:hover 之后
D、a:active - 链接被点击后的样式
28、下列说法正确的是？（）【不定项】
A、display: none；不为被隐藏的对象保留其物理空间；
B、visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；
C、visibility:hidden;产生reflow和repaint(回流与重绘)；
D、visibility:hidden;与display: none;两者没有本质上的区别；
29、下列属于HTML5新元素的是？（）【不定项】
A、header B、nav C、section D、viewport
二、解答
1、B
在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
2、C
Bootstrap 框架的网格系统工作原理如下：
1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内距 (padding) 。
如：
<div class=" container ">
<div class=" row "></div>
</div>
2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 。
如：
<div class="container">
<div class="row">
<div class="col-md- 4 "></div>
<div class="col-md- 8 "></div>
3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素
4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）来抵消内距 (padding)的影响
详： http://www.imooc.com/code/2325
D（正确）
关于列的嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（ row ）容器，然后在这个行容器中插入列。但在列容器中的行容器（ row ），宽度为 100% 时，就是当前外部列的宽度。
详： http://www.imooc.com/code/2329
3、D
.fadeIn() 使用淡入效果显示元素
.fadeOut() 淡入效果隐藏元素
.fadeToggle() 淡入效果显示 / 隐藏元素来回切换
.fadeTo() 元素的透明度逐渐变化到制定的值
4、BDE
B ----- HTML-Hyper Text Markup Language超文本标记语言，被设计用来显示数据，核心在于数据的外观。HTML文档网页 XML-EXtensible Markup Language可扩展标记语言，被设计用于结构化、传输和存储数据，核心在于数据的内容。XML文档纯文本 你可以选择在web应用程序中，使用XML传输数据，使用HTML格式化并显示数据。它们不是相似竞争互相替代的关系，它们互相合作和互补。 所以从设计理念上看，HTML和XML的关系，就像Java和Javascript、雷锋和雷峰塔的关系-即相互独立，基本没啥关系。
D ----- JSON 是存储和交换文本信息的语法，是轻量级的文本数据交换格式；而HTML5是为了能在移动设备上支持多媒体而被创造，是HTML（用来描述网页的一种标记语言）最新的修订版本。
https://www.jianshu.com/p/5f5ebefd0cbe
E -----JSON可以包含更多的结构化信息，更容易表达不同的数据格式，像numbers ，string 和NULL值，甚至是数组。
5、AD
考察的是浏览器的内置对象管理模型，简称BOM(Browser Object Model)中的Histroy属性和方法。
- length 返回浏览器历史列表中的URL数量。所以C中表述的长度信息是错误的。
- back() 加载 history列表中的前一个URL。
- forward() 加载 history 列表中的下一个URL。
- go() 加载history列表中的某个具体页面。所以B的表述刷新当前页面是错误的。
6、错误
都表示斜体，如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。区别在于表示强调，单纯表示斜体
标签可以被设备识别，而标签不能被识别。
7、true，true，false
变量abc都是字符串型的变量，而不是真正的undefined和false，在判断里都会被认为是真值，显示true，只有空串为false
| 数据类型 | 转换为true | 转换为false |
|---|---|---|
| boolean | true | false |
| String | 任何非空字符串 | 空字符串 |
| Number | 任何非零数字值 | 0和NaN |
| Object | 任何对象 | null |
| Undefined | n/a | undefined |
8、B
跨文档已经是跨域的一种
h5提供了网页文档之间发送信息和互相接收的功能。使用这个功能，只要获得网页窗口所在对象的实例，即可以同域（端口号+域）可以相互通信，跨域也可以相互通信。
9、B
var x = foo();
var foo=function foo() {...}
语句中变量的声明会提升，但是定义不会提升。以上代码等同于：
var foo;
var x = foo();
foo = function foo() {...}
当执行到 x = foo() 时，由于foo未被定义为函数，所以会返回
TypeError: foo is not a function
foo变量“被提前”了，但是他的赋值（也就是函数）并没有被提前，从这一点上来说，和前面我们所讲的变量“被提前”是完全一致的，并且，由于“被提前”的变量的默认值是 undefined。
函数声明可以被提前，但函数表达式不能被提前
10、A
slideUp()和slideDown都是jQuery函数，
slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
11、BCD
1、CSS3选择器
2、CSS3边框(Borders)
3、CSS3背景
4、CSS3渐变
5、CSS3文本效果
6、CSS3字体(@font-face规则)
7、CSS3转换和变形
1）2D转换方法
2）3D转换属性
8、CSS3过度（transition属性）
9、CSS3动画（@keyframes规则 animation属性）
10、CSS3多列
11、CSS3盒模型
12、CSS3伸缩布局盒模型(弹性盒子)（flexbox）
13、CSS3多媒体查询（@media）
12、ABCD
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
13、C
优先级是：
内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
多个选择器组合的时候，不应该简单地给这些选择器分配权值，然后相加比较大小。因为上面所说的优先级是不能越级的，比方说 1 个 id 选择器能顶你 n 个类选择器…所以要逐级比较，同级的就比较数量，数量多的优先级高。 当然，!important 的优先级最高。
14、E
<blockquote> 标签定义块引用。
<h1> - <h6>标签可定义标题。
<strong>标签和<em>标签一样，用于强调文本，但它强调的程度更强一些。
<a>标签定义超链接，用于从一张页面链接到另一张页面。
<p>标签定义段落。 <section> 标签定义文档中的节（section、区段）。 <nav> 标签定义导航链接的部分。 <ul>标签定义无序列表。 <ol> 标签定义有序列表。
15、0
下面几个都会转化为0：
Number()
Number(0)
Number('')
Number('0')
Number(false)
Number(null)
Number([])
Number([0])
console.log(Number("")); //0
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log(parseInt("")); //NaN
console.log(parseInt(null)); //NaN
console.log(parseInt(undefined)); //NaN
console.log(null == 0); //false
console.log(undefined == 0); //false
16、没关系
页面的性能指标详解：
白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止
首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间
用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作
总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间
17、B
手机定位未打开，H5和微信公众号没有权限，手动选择也不行
18、9999 4400
new运算的具体执行过程：
1)创建一个空对象
2)把这个空对象的__proto__指向构造函数的prototype
3)把这个空对象赋值给this
4)执行构造函数内的代码，注意此时的this指向新对象，this.n=9999 等价于b.n=9999;
在查找 b.n 是首先查找 b 对象自身有没有 n 属性，如果没有会去原型（prototype）上查找
当执行 var b = new B() 时，函数内部 this.n=9999(此时this指向b) 返回b对象，b对象有自身的n属性，所以返回 9999
console.log(c.n);
同理
当执行 var c = new C() 时，c对象没有自身的n属性，向上查找，找到原型 （prototype）上的 n 属性，因为 A.n++(此时对象A中的n为4400)，所以返回4400
19、D
div:first-child
表示选择属于父元素的第一个子元素的每个
20、D
合理的方式应当是在保证性能的同时避免安全问题。
A 显然不行，每次插入都会触发重绘和重排；
B 也不行，虽然因为隐藏避免了重绘，但因为没有脱离文档流，每次插入时重排还是会发生；
CD 可能有争议，因为都只会触发一次重绘和重排。按理来说直接操作HTML是性能最好的手段，因为就是一个简单的字符串操作，但是可能存在XSS攻击的风险，就不如 Fragment 安全。
21、B
1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
//强制让文档的宽度与设备的宽度保持1:1，
//文档初始化缩放比例是1:1，
//不允许用户点击屏幕放大浏览，
//允许用户缩放到的最大比例，
//尤其要注意的是content里多个属性的设置一定要用逗号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
2) <meta name="apple-mobile-web-app-capable" content="yes" />
//iPhone私有标签，它表示：允许全屏模式浏览
3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />
//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式
4) <meta name="format-detection" content="telephone=no; email=no" /> //不识别邮件和不把数字识别为电话号码
22、BE
继承就是指子节点默认使用父节点的样式属性。
不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。这么来记很轻松的呀！不要被下边的吓到了哦~
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
23、undefined2
题目问的是点击按钮后页面上的最终输出结果，所以原来页面上的p标签的1，会被document.write函数输出的内容覆盖。所以没有1。
打印a是undefined是因为var a的时候进行了变量提升，但是要执行到那一步才会真的赋值。
<html>
<head>
<script>
function myFunc() {
document.write(a); // a已变量提升，但是因为赋值在后面，所以打印undefined
document.write(func()); // 执行函数 打印出2
var a = 1; // 这里的a已经变量提升了，但是在这一步才赋值
function func() {
return 2;
}
}
</script>
</head>
<body>
<p>1</p>
<button onclick = "myFunc()">点击</button>
</body>
</html>
document.write 需要向文档流中写入内容，所以，若在一个已完成加载的文档上调用 document.write，就会自动调用 document.open，这将清空该文档已加载的内容。
变量提升，赋值不提升！！！
24、B
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
25、e
RegExp 对象的主要方法是 exec()，该方法是专门为捕获组而设计的。 exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回 null。
如果匹配成功，exec() 方法返回一个数组，并更新正则表达式对象的属性。返回的数组将完全匹配成功的文本作为第一项，将正则括号里匹配成功的作为数组填充到后面。
如果匹配失败，exec() 方法返回 null。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
var str1=new RegExp("e");
str1.exec("hello")
["e", index: 1, input: "hello", groups: undefined]
var str1=new RegExp("l");
str1.exec("hello")
["l", index: 2, input: "hello", groups: undefined]
26、B
JavaScript 是单线程的，setTimeout 设置的是异步任务，会放在 macrotask 里面，等待执行栈的代码执行完毕之后才会执行 macrotask 里面的异步任务，所以这里会等待 for 循环执行完毕才会执行定时器设置的任务。
当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。 而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。
当一个脚本第一次执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始执行。如果当前执行的是一个方法，那么js会向执行栈中添加这个方法的执行环境，然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。这个过程反复进行，直到执行栈中的代码全部执行完毕。
以上的过程说的都是同步代码的执行。那么当一个异步代码（如发送ajax请求数据）执行后会如何呢？前文提过，js的另一大特点是非阻塞，实现这一点的关键在于下面要说的这项机制——事件队列（Task Queue）。
js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。
27、C
解析：a:link,a:visited,a:hover,a:active 分别是什么意思?
-
link:连接平常的状态
-
visited:连接被访问过之后
-
hover:鼠标放到连接上的时候
-
active:连接被按下的时候
正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .
因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。当鼠标经过已经访问过的链接，会同时拥有a:visited、a:hover两种属性，a:visited离它最近，所以它优先满足a:visited，而放弃a:hover的重复定义。究其原因，是css的就近原则“惹的祸”。
28、BD
A、 display: none；不为被隐藏的对象保留其物理空间；
B、 visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；
C、 visibility:hidden;产生reflow和repaint(回流与重绘)；
D、 visibility:hidden;与display: none;两者没有本质上的区别；
29、ABC
1594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
