一、题目
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;两者没有本质上的区别;