牛客前端编程语言错题2

【语法】 名为“ctx”的变量是某个HTML5画布对象的上下文。以下代码绘制的是什么（）

Ctx.arc(x,y,r,0,Math.PI,true);
在给定点绘制一个矩形
从一个点到另一个点绘制一条直线
在给定点绘制一个半圆
在给定点绘制一个圆

链接：https://www.nowcoder.com/questionTerminal/18eb5039ac4541d585f9f175574b3ab5
来源：牛客网

【全懵】iframe以下哪个选项的描述是错误的

iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载
iframe的创建比一般的DOM元素慢了1-2个数量级
iframe标签会阻塞页面的的加载
iframe本质是动态语言的Incude机制和利用ajax动态填充内容

链接：https://www.nowcoder.com/questionTerminal/18eb5039ac4541d585f9f175574b3ab5
来源：牛客网

局限：
1、创建比一般的 DOM 元素慢了 1-2 个数量级, iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级，使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池（connection pool）
2、阻塞页面加载 及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。 window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况
3、唯一的连接池 浏览器只能开少量的连接到 web 服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名（hostname）同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个 绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。
4、不利于 SEO 搜索引擎的检索程序无法解读 iframe。另外，iframe 本身不是动态语言，样式和脚本都需要额外导入。
综上，iframe 应谨慎使用。

链接：https://www.nowcoder.com/questionTerminal/0260851028b740a1a58370495fe1077d
来源：牛客网

下列说法错误的是：

在 Blink 和 WebKit 的浏览器中，某个元素具有 3D 或透视变换（perspective transform）的 CSS 属性，会让浏览器创建单独的图层。
我们平常会使用 left 和 top 属性来修改元素的位置，但 left 和 top 会触发重布局，取而代之的更好方法是使用 translate，这个不会触发重布局。
移动端要想动画性能流畅，应该使用 3D 硬件加速，因此最好给页面中的元素尽量添加 translate3d 或者 translateZ(0) 来触发 3D 硬件加速。
解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排。

滥用硬件加速会导致严重性能问题，因为它增加了内存使用，并且它会导致移动端电池寿命减少。

下面哪些标签可以在HTML页面中插入GIF动画和MP3声音文件？（）

<image>和<audio>
<image>和<voice>
<img>和<voice>
<img>和<audio>

链接：https://www.nowcoder.com/questionTerminal/64915daffdbd4d66ad1ba39a672ea768
来源：牛客网

img标签与image控件的一点有意思的区别
在网页开发中，要显示一个图片，有两种选择：第一种是使用HTML直接支持的img标签，设置其src属性。第二种是使用image这个服务器控件，设置其imageurl属性。

在很多时候，他们都没有什么大的区别。我们通常都建议使用Img标签。

有一个时候，可能用Image控件能解决一个棘手的问题。因为Img标签不能识别～这个符号，通常这个符号都是代表网站根目录，img标签只能使用相对路径引用图片。所以，在下面的情况下会有一点问题：

如果我们是在母版页中使用了一个图片，该母版页可能被很多页面用到，而且这些页面是分布在不同的文件夹的。那么，大家想想看，在不同的文件夹中的页面被显示出来的时候，当然会按照它这个文件夹的相对位置找那个图片，这样的话，除非每个文件夹里面都有那个图片，否则很多页面就看不到图片。

而用Image控件就能够解决这个问题

<asp:Image ImageUrl=“~/Images/logo.gif” runat=“server” CssClass=“logo” />

下列哪个操作是W3C标准定义的阻止事件向父容器传递：

e.preventDefault()
e.cancelBubble=true
e.stopPropagation()
e.stopImmediatePropagation()

链接：https://www.nowcoder.com/questionTerminal/d769681d657f4ad1982b3987f37c8a18
来源：牛客网

e.preventDefault()：阻止事件发生

e.cancelBubble=true：警告: 请使用 event.stopPropagation() 方法来代替该不标准的属性. 链接：https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent/cancelBubble

e.stopPropagation():阻止当前时间的进一步冒泡行为，就是说阻止向上层容器传递事件。参阅：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_stoppropagation

e.stopImmediatePropagation()：阻止当前事件的冒泡行为并且阻止当前事件所在元素上的所有相同类型事件的事件处理函数的继续执行.
参阅：http://www.w3schools.com/jsref/tryit.asp？filename=tryjsref_event_stopimmediatepropagation

【拓展】下列哪个不是HTML DOM的event事件？

onclick()
onMove()
onblur()
onfocus()

链接：https://www.nowcoder.com/questionTerminal/3e13244687e8420a92b4e9989f59af1a
来源：牛客网

onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。

链接：https://www.nowcoder.com/questionTerminal/2801dbc34b3d44cfa3d9c7c4aa9180ce
来源：牛客网

关于XML和JSON区别的描述正确的是

JSON相对于XML来讲，数据的体积小，传递的速度更快些
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
JSON对数据的描述性比XML较好
JSON的速度一般要快于XML

链接：https://www.nowcoder.com/questionTerminal/2801dbc34b3d44cfa3d9c7c4aa9180ce
来源：牛客网

JSON 和 XML 优缺点的比较
【XML】的优缺点
优点： （1）格式统一，符合标准； （2）容易与其他系统进行远程交互，数据传输比较方便。
缺点： （1）XML文件庞大，文件格式复杂，传输占带宽； （2）服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护； （3）客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码； （4）服务器端和客户端解析XML花费较多的资源和时间。 那么除了XML格式，还有一种叫JSON
【JSON】的优缺点
优点： （1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小； （2）易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取； （3）支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析； （4）在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取； （5）因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
缺点： （1） 没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性； （2）JSON格式目前在Web Service中推广还属于初级阶段

链接：https://www.nowcoder.com/questionTerminal/5b4c1ceb965b4ff5bf2eefb2280dbdc9
来源：牛客网

在 W3C 标准盒模型中，默认情况下块元素的总宽度为：

content
content+2padding
content+2padding+2border
content+2padding+2border+2margin

解析
标准盒子模型 ＝ margin + border + padding + width （width = content ）

IE盒子模型 ＝ margin + width（width = border + padding + content ）

链接：https://www.nowcoder.com/questionTerminal/e253d7032a5647098110938eb1ea8922
来源：牛客网

关于屏幕的尺寸标准，说法错误的是

col-sm-* 一般用于大于768的平板
col-md-* 一般用于大于992的中等屏幕显示器
col-lg-*用于大于1200的桌面显示器
col-xs-*用于小于700的手机屏幕

链接：https://www.nowcoder.com/questionTerminal/0a907a7185224833acfaa669f7db592b
来源：牛客网

<style type="text/css">
div.demo{
color: black;
}
div.wrap .demo{
color: yellow;
}
div.wrap > .demo{
color: blue;
}
div.wrap + .demo{
color: red;
}
div.demo + .demo{
color: red;
}
</style>
<div class="wrap">
<div class="demo">
Hello
</div>
<div class="demo">
World
</div>
</div>

【再了解+即可】 Hello 和 world 两个单词分别是什么颜色？

black, black
yellow, blue
blue, red
blue, blue

解析
">“与”+"的规则如下：
div > p：选择父元素是

的所有

元素
div + p：选择紧跟

元素的首个

元素

1. div.demo 元素与类样式交集选择器 Hello World 为黑色
2. div.wrap .demo 覆盖样式1 Hello World 为黄色
3. div.wrap > .demo 覆盖样式2 Hello World 为蓝色
4. div.wrap + .demo 选择在 div.wrap 后的第一个兄弟元素并且类样式为 .demo 的元素为红色, 没有选中任何元素，此选择器无效
5. div.demo + .demo 选择在 div.demo 后的第一个类样式为 .demo 的兄弟元素 设置为红色, World 变成红色,Hello 还是蓝色

链接：https://www.nowcoder.com/questionTerminal/c690eeed98de475c891e5f359127c763
来源：牛客网

【重刷】下述有关 border:none 以及 border:0 的区别，描述错误的是？

border:none 表示边框样式无
border:0 表示边框宽度为 0
当定义了 border:none，即隐藏了边框的显示，实际就是边框宽度为 0
当定义边框时，仅设置边框宽度也可以达到显示的效果

参考答案
C,D
C:当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；
D:定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。

链接：https://www.nowcoder.com/questionTerminal/9d335facf6924598adf8c5983ec42b7a
来源：牛客网

下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？

声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示
DOCTYPE不存在或格式不正确会导致文档以标准模式呈现
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法

参考答案
1.<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

【拓展】 新窗口打开网页，用到以下哪个值（）。

_self
_blank
_top
_parent

链接：https://www.nowcoder.com/questionTerminal/bcb9470bf6604170a1ac5ec438a59230
来源：牛客网

target 属性：定义被链接的文档在何处显示

可能的值"_blank"   新窗口打开"self" 窗口不变  地址栏变  无target无base默认self"_top"  窗口不变 地址栏变  原窗口展示新页面"_parent"  窗口不变 地址栏变 与top无差    top:整页窗口  parent父窗口framename 指定的框架打开链接self top parent 类似<base target=_××>  设置页面 所有链接的目标窗口<base target=_blank>：表示页面所有链接都新窗口打开建议head中定义个别有差异个别配（base权重低）a  form   均含target 属性
若<form>和<a>标签同时出现该属性，a 的target起作用  ，无论form嵌a还是a嵌套form