牛客网—web前端练习

2018-12.1第一次练习

1.下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度：display:block
display属性 :
block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行可以定义高度和宽度
none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block :　IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。

2.css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。——true

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

3.新窗口打开网页，用到以下哪个值：_blank

5.flash和js通过什么类如何交互——ExternalInterface
Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback。
call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。
6.alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字
alt是html标签的属性，而title既是html标签，又是html属性。
title标签这个不用多说，网页的标题就是写在这对标签之内的。
title作为属性时，用来为元素提供额外说明信息。
例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
7.js可以让一个input的背景颜色变成红色的是：inputElement.style.backgroundColor = ‘red’;

8.有关html5标签
<audio> 标签定义声音，比如音乐或其他音频流。
<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。

command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
9

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。

◆position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置，

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

10

只要协议、域名、端口有任何一个不同, 都被当作是不同的域。

①.CORS
CORS（Corss-Origin Resource Sharing,跨资源共享），基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部决定是否给予响应。
②.document.domain
将页面的document.domain设置为相同的值，页面间可以互相访问对方的JavaScript对象。
注意：
不能将值设置为URL中不包含的域；
松散的域名不能再设置为紧绷的域名。
③.图像Ping
var img=new Image();
img.οnlοad=img.οnerrοr=function(){
… …
}
img.src=“url?name=value”;
请求数据通过查询字符串的形式发送，响应可以是任意内容，通常是像素图或204响应。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
缺点：
只能发送GET请求；
无法访问服务器的响应文本，只能用于浏览器与服务器间的单向通信。
④.Jsonp
var script=document.createElement(“script”);
script.src=“url?callback=handleResponse”;
document.body.insertBefore(script,document.body.firstChild);
JSONP由两部分组成：回调函数和数据
回调函数是接收到响应时应该在页面中调用的函数，其名字一般在请求中指定。
数据是传入回调函数中的JSON数据。
优点：
能够直接访问响应文本，可用于浏览器与服务器间的双向通信。
缺点：
JSONP从其他域中加载代码执行，其他域可能不安全；
难以确定JSONP请求是否失败。
⑤.Comet
Comet可实现服务器向浏览器推送数据。
Comet是实现方式：长轮询和流
短轮询即浏览器定时向服务器发送请求，看有没有数据更新。
长轮询即浏览器向服务器发送一个请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即又向服务器发起一个新请求。其优点是所有浏览器都支持，使用XHR对象和setTimeout()即可实现。
流即浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据，页面的整个生命周期内只使用一个HTTP连接。
⑥.WebSocket
WebSocket可在一个单独的持久连接上提供全双工、双向通信。
WebSocket使用自定义协议，未加密的连接时ws://；加密的链接是wss://。
var webSocket=new WebSocket(“ws://”);
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
… …
}
注意：
必须给WebSocket构造函数传入绝对URL；
WebSocket可以打开任何站点的连接，是否会与某个域中的页面通信，完全取决于服务器；
WebSocket只能发送纯文本数据，对于复杂的数据结构，在发送之前必须进行序列化JSON.stringify(message))。
优点：
在客户端和服务器之间发送非常少的数据，减少字节开销。
廖雪峰教程

11.闭包

12.局部变量和参

14.面有关javascript系统方法的描述，错误的是？
正确答案: B 你的答案: C (错误)

A.parseFloat方法：该方法将一个字符串转换成对应的小数
B.isNaN方法：该方法用于检测参数是否为数值型，如果是，返回true，否则，返回false。
C.escape方法：该方法返回对一个字符串编码后的结果字符串
D.eval方法：该方法将某个参数字符串作为一个JavaScript执行
解析：
B;
NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。

针对NaN的特点，ECMAScript定义了isNaN（）函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN（）在接受一个值后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串“10”或Boolean值。而任何不能被转换为数值的值都会导致这个函数返回true。

16.下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？
DOCTYPE不存在或格式不正确会导致文档以标准模式呈现
解析：
文档类型
DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。
DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。
如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。
浏览器模式
浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
DOCTYPE 切换
对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。
17.

解析：
B；
call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组）如下代码做出解释：

function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
18.

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

解析：
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
20.下面列出的浏览器，无webkit内核的是（）
正确答案: D 你的答案: C (错误)

A.chrome
B.Safari
C.搜狗浏览器
D.firefox
解析：
D
Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。
另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核

2018-12.3 第二次练习

1.
【数据类型(默认:智能猜测(xml、json、脚本或html))
类型:字符串
您期望从服务器返回的数据类型。如果没有指定，jQuery将尝试根据响应的MIME类型推断它(XML MIME类型将生成XML, 1.4 JSON将生成JavaScript对象，1.4脚本将执行脚本，其他任何内容都将作为字符串返回)。可用类型(以及作为成功回调的第一个参数传递的结果)是:
“xml”:返回一个可以通过jQuery处理的xml文档。
“html”:以纯文本形式返回html;所包含的脚本标记在插入DOM时进行计算。
“script”:将响应计算为JavaScript并以纯文本形式返回。通过向URL添加查询字符串参数“=[TIMESTAMP]”来禁用缓存，除非缓存选项设置为true。注意:这将把post转换为远程域请求的get。
“json”:将响应计算为json并返回一个JavaScript对象。JSON数据被严格解析;任何格式不正确的JSON都会被拒绝，并引发解析错误。在jQuery 1.9中，空响应也会被拒绝;服务器应该返回null或{}的响应。(有关正确JSON格式的更多信息，请参见json.org。)
“jsonp”:使用jsonp加载JSON块。在URL的末尾添加一个额外的“?callback=?”来指定回调。通过向URL添加查询字符串参数“=[TIMESTAMP]”来禁用缓存，除非缓存选项设置为true。
“文本”:纯文本字符串。
多个空格分隔的值:从jQuery 1.5开始，jQuery可以将内容类型标头中接收到的数据类型转换为您需要的数据类型。例如，如果希望将文本响应作为XML处理，则对数据类型使用“text XML”。您还可以发出一个JSONP请求，将其作为文本接收，并由jQuery将其解释为XML:“JSONP text XML”。类似地，像“jsonp xml”这样的简写字符串将首先尝试从jsonp转换为xml，如果失败，将从jsonp转换为文本，然后从文本转换为xml。】

$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

JS 中值的类型分为原始值类型和对象类型。
原始值类型包括 number, string, boolean, null 和 undefined；对象类型即 object。
首先原始值类型它就不是对象。
另外，要注意 ‘hello’ 和 new String(‘hello’) 的区别，前者是字符串字面值，属于原始类型，而后者是对象。用 typeof 运算符返回的值也是完全不一样的：

typeof 'hello';  // 'string'
typeof new String('hello');  // 'object'

之所以很多人分不清字符串字面值和 String 对象，归根结底就是 JS 的语法对你们太过纵容了。当执行 ‘hello’.length 时，发现可以意料之中的返回 5，其实，这是由于 JS 在执行到这条语句的时候，内部将 ‘hello’ 包装成了一个 String 对象，执行完后，再把这个对象丢弃了，这种语法叫做 “装箱”，在其他面向对象语言里也有（如 C#）。不要认为 JS 帮你装箱了，你就可以在写代码的时候不分箱里箱外了！

3.常见的浏览器端的存储技术有哪些？—cookie、localStorage、userData
【cookie 是靠谱的浏览器都支持；
localStorge 比 cookie 存的更多，获取更方便，而且存储内容不会随请求发送给服务器；
session 虽然需要 cookie 支持（通常存放加密过的 sessionId），但是不在浏览器端存放主要信息，排除；
IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。】

4.JavaScript中有5种简单数据类型（也称为基本数据类型）： Undefined、Null、Boolean、Number和String 。还有1种复杂数据类型—— Object ，Object本质上是由一组无序的名值对组成的。
7.在bootstrap中，关于导航条，下列说法正确的是?
正确答案: A B C D 你的答案: B D (错误)

A应该将被包裹的元素放到navbar-collapse类中
B表单应该放置于navbar-form内
C可以使用navbar-left和navbar-right来对齐导航条
D可以使用navbar-fixed-top和navbar-fixed-bottom来将导航条固定到顶部或底部
9.下面关于IE、FF下面脚本的区别描述错误的是？
正确答案: A B D 你的答案: C (错误)

A.innerText IE支持，FIREFOX不支持
B.document.createElement FIREFOX支持，IE不支持
C.setAttribute(‘class’，‘styleClass’) FIREFOX支持，IE不支持
D.用setAttribute设置事件 FIREFOX不支持，IE支持

[在 IE8(S) Firefox Chrome Safari Opera 中，结果符合规范。
而在 IE6 IE7 IE8(Q) 中，无法通过 setAttribute 方法传入一段代码字符串设置一个元素的内联事件，而必须传入一个 function 类型的对象；
获取一个已有的内联事件的属性值也是 function 类型，而不是规范中的字符串类型。]
10.下面有关javascript内部对象的描述，正确的有？
正确答案: A B C D 你的答案: A B D (错误)

A.History 对象包含用户（在浏览器窗口中）访问过的 URL
B.Location 对象包含有关当前 URL 的信息
C.Window 对象表示浏览器中打开的窗口
D.Navigator 对象包含有关浏览器的信息

11.嵌入在HTML文档中的图像格式可以是？
正确答案: A C D 你的答案: A D (错误)

A..gif
B..tif
C..bmp
D..jpg
[网页html文档支持的图片格式有jpg , gif , png 和 bmp 这四种。
jpg ， gif 和 png 格式的图片特点是体积很小，因为在网上很常见，
然而 bmp就不常见了，因为这种格式虽然很清晰色彩丰富，但是所占内存很大，所以很少见，但是也是支持的。一共这4种。]

12.CSS3新增属性用法整理：
1、box-shadow（阴影效果）
2、border-color（为边框设置多种颜色）
3、border-image（图片边框）
4、text-shadow（文本阴影）
5、text-overflow（文本截断）
6、word-wrap（自动换行）
7、border-radius（圆角边框）
8、opacity（透明度）
9、box-sizing（控制盒模型的组成模式）
10、resize（元素缩放）
11、outline（外边框）
12、background-size（指定背景图片尺寸）
13、background-origin（指定背景图片从哪里开始显示）
14、background-clip（指定背景图片从什么位置开始裁剪）
15、background（为一个元素指定多个背景）
16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17、hsla（在hsl的基础上增加透明度设置）
18、rgba（基于rgb设置颜色，a设置透明度）
css3新增标签

14.问一份标准的HTML文档有哪几个必须的HTML标签？
正确答案: A B C D 你的答案: A B D (错误)

编程题

1.请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。

Array.prototype.distinct = function() {var ret = [];for (var i = 0; i < this.length; i++){for (var j = i+1; j < this.length;) {   if (this[i] === this[j]) {ret.push(this.splice(j, 1)[0]);} else {j++;}}}return ret;
}
//for test
alert(['a','b','c','d','b','a','e'].distinct());

2.请填充代码，使mySort()能使传入的参数按照从小到大的顺序显示出来。

function mySort() {var tags = new Array();//使用数组作为参数存储容器请补充你的代码return tags;//返回已经排序的数组
}var result = mySort(50,11,16,32,24,99,57,100);/传入参数个数不确定
console.info(result);//显示结果

插入代码：

function mySort() {var tags = new Array();for(var i = 0;i < arguments.length;i++) {tags.push(arguments[i]);}tags.sort(function(compare1,compare2) {return compare1- compare2;});return tags;
}var result = mySort(50,11,16,32,24,99,57,100);
console.info(result);

3.用javascript实现用户登录验证的代码。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表单from校验</title><style></style>
</head>
<body><form id="form1" action="" method="get"><input name="text1" type="text" value="" placeholder="name"><br><input type="password" name="pwd" placeholder="密码"><br><input name="text3" value="submit"  type="submit" onclick="subimtonclick()">
</form>
<script language="JavaScript">function subimtonclick(){var form1=document.getElementById('form1');if(form1.text1.value==""){alert("用户名不能为空");form1.text1.focus();return;}if(form1.text1.value.length<6 || form1.text1.value.length>10){alert("用户名不能少于六个字符，不能超过十个字符");form1.text1.focus();return;}if(form1.pwd.value==""){alert("密码不能为空");form1.pwd.focus();return;}if(form1.pwd.value.length<6 || form1.pwd.value.length>10){alert("密码不能少于六个字符，不能超过十个字符");form1.pwd.focus();return;}var str="用户名："+form1.text1.value+"<br>"+"密码："+form1.pwd.value+"<br>";document.writeln(str);}</script>
</body>
</html>

2019-8-14更新 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814094931206.png)

1.在 JavaScript 中，可以使用 Date 对象的 () 方法返回一个月中的每一天：getDate

解析：来自W3C关于Date 对象方法的说明: Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getYear() 从 Date 对象以四位数字返回年份。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

2.这句代码的作用：


<meta name="viewport" content="width=device-width, initial-scale=1">
表示支持响应式设计

解析：
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

3.DHTML 的动态样式的作用是 ()

正确答案: D
A可使开发人员改变显示在一页上的文本或图像，以便内容能够交互地对用户的鼠标和键盘操作做出响应

B让页面制作者以自动方式或对用户的操作做出响应的方式移动页面上的文本和图像

C可实现客户端与服务端动态的信息资源交换

D使网页作者改变内容的外部特征而不强制用户再次下载全部内容
解析：
DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。
通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。

4.在不考虑H5的情况下,下列哪些值是可以作为标签的type属性的属性值。（）
正确答案: A B C
A.text
B .submit
C .button
D .date
解析：
不考虑H5，而Date是HTML5新增

1.css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制—true
解析：
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

2.在html中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。
如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的框架<frame>或者窗口.
在target中还存在四个保留的属性值如下，
属性值：

3.关jquery事件的响应

onclick 鼠标点击某个对象

onload 是某个页面的css js html 文档结构和图像被完全加载

onmousedown 某个鼠标按键被按下

onfocus 获得焦点 onblur 失去焦点

onkeypress：某个键盘的键被按下或按住

onchange：用户改变域的内容

onselect:当文字加亮后，产生该事件

4.flash和js通过什么类如何交互?ExternalInterface
解析：
Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，
call的作用是让Flash调用js里的方法，
addCallback是用来注册flash函数让js调用

5.元素的alt和title有什么异同：
alt和title同时设置的时候，
alt作为图片的替代文字出现，title是图片的解释文字
图片加载完成后是看不到alt的

6.HTML5标签
<audio> 标签定义声音，比如音乐或其他音频流。
<canvas> 标签定义图形，比如图表和其他图像。标签只是图形容器，您必须使用脚本来绘制图形。
<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。
<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键

新增header，footer，nav，article，
section，aside，datalist，
audio，video，embed，
input属性

7.css-position

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

◆position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置，生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。
例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位（相对于元素本身正常位置进行定位）。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

8.js跨域

9.下面代码的输出是

function Foo() {var i = 0;return function() {console.log(i++);}
}var f1 = Foo(),f2 = Foo();
f1();
f1();
f2();

解析：
查了红宝石，要点如下：
（1）Function是引用类型：保存在堆中，变量f1,f2是保存在栈中；
（2）闭包：一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内，
但是一旦离开了这个函数，局部变量就无法访问，所有通过返回子函数到一个变量f1的方法，让f1指向堆中的函数作用域，这样可以使用局部变量i.
(3) 过程：
第一次f1() :f1=Foo()中，先执行Foo(): i = 0,return值返回给f1
(f1指向子函数 f1()=function(){…},因为子函数没有定义i，所以向上找到父函数定义的 i: )并执行子函数输出i=0,再自加 i =1(覆盖了父函数Foo 的 i值);
第二次f1() : 执行的是子函数 Function(){ …},输出的是父函数的 i=1,再自加 i =2;
第一次f2():同第一次f1(),不同的是 f2指向堆中一个新的对象 function(){ …},所有此i非彼i,输出i=0;如果
如果再次f2(),那么和第二次f1(),一样输出i=1;

10.运行结果

<SCRIPT LANGUAGE="JavaScript">
var bb = 1;
function aa(bb) {bb = 2;alert(bb);
};
aa(bb);
alert(bb);
</SCRIPT>

解析：
函数体内，bb并没有使用var来定义，按理说这个bb在预处理的时候应该是window的属性。
但在这里，函数声明的时候，带了一个参数bb，也就是相当于在函数体内声明了var bb。
所以，函数里的bb就是函数活动对象的属性。
所以函数执行时会输出2。
函数执行完后，函数的活动对象被销毁，也就是局部的这个bb被删除了，执行流进入到window，再输出bb，值就是1了。

11.下面有关javascript系统方法的描述
A.parseFloat方法：该方法将一个字符串转换成对应的小数
B.isNaN方法：该方法用于检测参数是否为数值型，如果不是，返回true，否则，返回false。
C.escape方法：该方法返回对一个字符串编码后的结果字符串
D.eval方法：该方法将某个参数字符串作为一个JavaScript执行

12.call和apply

解析：
B
相同点:两个方法产生的作用是完全一样的

不同点:方法传递的参数不同

call, apply方法它们除了第一个参数,即执行时上下文对象相同外。
call方法的其它参数将依次传递给借用的方法作参数,
而apply就两个参数,第二个参数为一个数组传递。

function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

13.border

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

14.sprite雪碧图

解析：
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

15.浏览器

解析：
D
Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。
Apple的Safari,
Google的Chrome,
Nokia S60平台的默认浏览器，
Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核。
Webkit的采用程度由此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。
另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。

另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核

1.reflow

解析：

字体大小改变（font size change）
窗口大小改变（screen change） 样式表添加或者删除（add/delete stylesheets）
JS更改DOM元素（js changing dom）
hover动作（:hover）
位置计算（offset cats）
用户输入（user input）改变样式属性（changing class attribute） 都会触发reflow

2.BFC

解析：

1）具有浮动（即float不为none）
2）具有绝对定位或固定定位（position：absolute |fixed）
3）display为inline-block, table-cell, table-caption, flex, inline-flex
4）overflow不为visible（一般设置overflow：hidden）会触发BFC

3.({} + ‘b’ > {} + ‘a’)返回值是（true）

     console.log({ } + 'b' );//->bconsole.log({ } + 'a');// ->aconsole.log({ } + 'b' > {} + 'a' );//->  trueconsole.log( ({} + 'b' > {} + 'a') );//-> true

4.this

解析：在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

5.执行结果为true

6.js里的function能访问它们的（）

参数
局部变量或函数
全局变量
外部函数的变量或函数

7.call和apply

8.闭包
9.分析下面代码块，输出（）行########。

var i = 0;
while( i < 40 ){
if( i < 30 )
continue;
Document.write(‘########
’);
i++;
}

答案：一行也没有

1.需要删除arr数组中的第i个元素（从第1个元素开始），最好的做法是？

2.css样式优先级：

3.使用什么可以实现css3动画效果：keyframes

@Keyframes需要配合animation使用才能创建动画

4.web worker

解析：
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 w3c上有说的

5.下面哪些方法可以用作javascript异步模式的编程？

回调函数
事件监听
发布/订阅
Promises对象

解析：
回调函数，这是异步编程最基本的方法。

事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

发布/订阅，上一节的"事件"，完全可以理解成"信号"。

Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。

牛客网—web前端练习相关推荐

牛客网前端刷题（三）
还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦! 赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试. 面试专栏分享,感 ...
牛客网前端刷题（一）
还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦! 赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试. 面试专栏分享,感 ...
牛客网前端刷题（二）
还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦! 赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试. 面试专栏分享,感 ...
《牛客网刷题之零基础入门前端之JavaScript》
目录 ES5 数据类型基本数据类型检测检测复杂数据类型数据类型转换运算符阶乘绝对值幂平方根余数数组求和完全等同或运算且运算字符串字符统计流程控制返回星期数内置对象从 ...
python牛客网编程题_一波优秀的自学编程语言网站
网课已经开设两三个月了同学们上网课的效果怎么样呢? 特别是学编程的同学没有了学校的学习氛围没有了老师面对面教学指导你是否为了编程而焦头烂额,生无可恋呢? 没事,现在同学们的福利来啦! 下面是给 ...
从零开始—仿牛客网讨论社区项目（六）
主要技术架构: SpringBoot Spring SpringMVC MyBatis Redis Kakfa Elasticsearch Spring Security Spring Actator ...
Java牛客网社区项目——知识点面试题
Java牛客网社区项目--知识点&面试题持续更新中(ง •̀_•́)ง 文章目录 Java牛客网社区项目--知识点&面试题请简要介绍一下你的项目? 什么是Spring框架? 对Sp ...
【牛客网面经整理】阿里面经
作者:OfferOffer多多链接:https://www.nowcoder.com/discuss/505316?type=post&order=time&pos=&pag ...
牛客网Java后端开发面经汇总
感谢牛客网! 文章目录 Java基础知识计算机网络知识 MySQL.数据库常用数据结构操作系统 Spring 设计模式分布式 Redis Mybatis 消息队列场景题手撕代码 Linux ...

牛客网—web前端练习

编程题

牛客网—web前端练习相关推荐

最新文章

热门文章