【前端】牛客练题积累

HTML/CSS方面:

display属性 :

block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行   可以定义高度和宽度

none : CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行

inline-block : IE5.5 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的,使用inherit可以让其继承父对象的display属性。

注:内联元素加上display:block;后被块级化,可以定义其宽度和高度。块级元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。

overflow属性定义溢出元素内容区的内容会如何处理

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

在HTML中,通过<a>标签打开一个新链接,而<a>标签的target属性是指打开的新链接是以什么样的形式打开的;target属性的值为:

_blank  在新窗口中打开被链接文档

_self  默认。在相同的框架中打开被链接文档。

_parent  在父框架集中打开被链接文档。

_top 在整个窗口中打开被链接文档。

framname 在指定的框架中打开被链接文档。

若<form>和<a>标签同时出现该属性,form中的target起作用;

alt是html标签的属性,而title既是html标签,又是html属性。 
title标签,网页的标题就是写在<title></title>这对标签之内的。 
title作为属性时,用来为元素提供额外说明信息。例如,给超链接标签a添加了title属性,把鼠标移动到该链接上面是,就会显示title的内容,以达到补充说明或者提示的效果。 
而alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

图片加载完成后看不到alt

HTML标签的使用:
<audio> 标签定义声音,比如音乐或其他音频流。
<canvas> 标签定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

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

static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。相对于浏览器窗口进行定位。

注,IE6不支持CSS中的position:fixed属性。

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

当定义border:none时,表示无边框样式,浏览器并不会对边框进行渲染,也就没有实际的宽度;

定义边框时,除了设置宽度外,还必须设置边框的样式才能显示出来。

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

浏览器的内核引擎,基本上是四分天下:

1)Trident: IE 以Trident 作为内核引擎;

2)Gecko: Firefox 是基于 Gecko 开发;

3)WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器;

4)Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini

注:2013年2月Opera宣布转向WebKit引擎

注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

JavaScript方面:

jquery事件响应:onfocus 获得焦点 onblur 失去焦点

Flash提供了ExternalInterface接口与JavaScript通信

两个方法:call和addCallback

作用:call让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。

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

call和apply:

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

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

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

单独说一下js跨域问题,因为之前也遇到过:

javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。

跨域简单的理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象。

解决方案:

1.用过jsonp,原理是通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

2.通过修改document.domain来跨子域,只适用于不同子域的框架间的交互,两个页面的document.domain都设成相同的域名就可以。但要注意的是,document.domain的设置是有限制的,只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

domain+iframe

3.通过window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

4.通过HTML5中的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。

需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

时间: 2024-08-25 03:50:26

【前端】牛客练题积累的相关文章

【前端】牛客练题积累——AngularJS

AngularJS方面: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 当把scope属性设置为true时,这表明我们创建的指令要创建一个新的作用域,这个作用域继承自我们的父作用域. 当我们将scope设置为false的时候,我们创建的指

牛客网在线判题系统JavaScript(V8)使用

JavaScript作为一种弱类型的编程语言,语法和C/C++.JAVA等存在差别,但是对于大部算法题,不只是C/C++.JAVA,也依然可以使用JavaScript来实现.所以在牛客网中,如果你喜欢JavaScript这门编程语言,同时对数据结构与算法感兴趣,当然可以使用这门语言去刷编程题. 大家有没有跟我碰到过和我类似的情况,在牛客网刷编程题的时候,编译器提供的是Javascript(v8 6.0.0),在线编程部分前端编程还好,只用在题目给出的函数中补充就行.但苦恼的是,我们不知道如何像C

网易2017秋招编程题集合-牛客网

网易2017秋招编程题集合-牛客网 链接:https://www.nowcoder.com/questionTerminal/0147cbd790724bc9ae0b779aaf7c5b50来源:牛客网 如果一个数字序列逆置之后跟原序列是一样的就称这样的数字序列为回文序列.例如: {1, 2, 1}, {15, 78, 78, 15} , {112} 是回文序列, {1, 2, 2}, {15, 78, 87, 51} ,{112, 2, 11} 不是回文序列. 现在给出一个数字序列,允许使用一

好未来2017秋招笔试真题二 --牛客网

好未来2017秋招笔试真题二 --牛客网 链接:https://www.nowcoder.com/questionTerminal/ee5de2e7c45a46a090c1ced2fdc62355来源:牛客网 将一句话的单词进行倒置,标点不倒置.比如 I like beijing. 经过函数后变为:beijing. like I 输入描述: 每个测试输入包含1个测试用例: I like beijing. 输入用例长度不超过100 输出描述: 依次输出倒置之后的字符串,以空格分割 输入例子: I

网易2017秋招编程题集合_以下代码全部来自牛客网

如果一个数字序列逆置之后跟原序列是一样的就称这样的数字序列为回文序列.例如:{1, 2, 1}, {15, 78, 78, 15} , {112} 是回文序列, {1, 2, 2}, {15, 78, 87, 51} ,{112, 2, 11} 不是回文序列.现在给出一个数字序列,允许使用一种转换操作:选择任意两个相邻的数,然后从序列移除这两个数,并用这两个数字的和插入到这两个数之前的位置(只插入一个和).现在对于所给序列要求出最少需要多少次操作可以将其变成回文序列. 链接:https://ww

2017年校招全国统一模拟笔试(第二场)编程题集合-牛客网

 2017年校招全国统一模拟笔试(第二场)编程题集合-牛客网 链接:https://www.nowcoder.com/questionTerminal/276712b113c6456c8cf31c5073a4f9d7来源:牛客网 牛牛有两个字符串(可能包含空格),牛牛想找出其中最长的公共连续子串,希望你能帮助他,并输出其长度. 输入描述: 输入为两行字符串(可能包含空格),长度均小于等于50. 输出描述: 输出为一个整数,表示最长公共连续子串的长度. 输入例子: abcde abgde 输出例子

牛客网华为机试训练第3题 明明的随机数

今天花了一下午才把明明的随机数这个搞明白,期间和牛客网的编译器殊死搏斗.一直发现在本地编译器运行成功,但是在牛客上的老师不能通过.整的十分的恼火和焦躁.后来看到了相同的问题,才发现解决之道. 时间限制:1秒 空间限制:32768K 热度指数:222608 本题知识点: 数组 算法知识视频讲解 题目描述 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤1000),对于其中重复的数字,只保留一个,把其余相同的数去掉,不同的数对应着不

【华为机试】找最高分(通过此题熟悉牛客网Node输入输出)

来源:牛客网 老师想知道从某某同学当中,分数最高的是多少,现在请你编程模拟老师的询问.当然,老师有时候需要更新某位同学的成绩. 输入描述: 输入包括多组测试数据.每组输入第一行是两个正整数N和M(0 < N <= 30000,0 < M < 5000),分别代表学生的数目和操作的数目.学生ID编号从1编到N.第二行包含N个整数,代表这N个学生的初始成绩,其中第i个数代表ID为i的学生的成绩接下来又M行,每一行有一个字符C(只取'Q'或'U'),和两个正整数A,B,当C为'Q'的时候

牛客网——前端大挑战

1.封装函数 f,使 f 的 this 指向指定的对象 1 function bindThis(f, oTarget) { 2 return f.bind(oTarget); 3 } 2.获取 url 中的参数 1). 指定参数名称,返回该参数的值 或者 空字符串 2). 不指定参数名称,返回全部的参数对象 或者 {} 3). 如果存在多个同名参数,则返回数组 输入 http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe输出 [1