前端知识点

最新推荐文章于 2021-03-31 17:44:37 发布

今天超市大减价

最新推荐文章于 2021-03-31 17:44:37 发布

阅读量618

点赞数 1

本文链接：https://blog.csdn.net/qq_40146789/article/details/105386110

版权

前端知识点

一、练习题总结

1.下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度

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

none:此元素不会被显示;

inline：把元素变成内联元素;

inherit:规定应该从父元素继承 display 属性的值。

2.css属性position的属性值的描述：

static：默认，元素按照标准流来定位；

relative：生成相对定位的元素，相对于元素本身正常位置进行定位。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位；

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位

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

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

4.在html中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。

如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的框架<frame>或者窗口.

在target中还存在四个保留的属性值如下：

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

5.js事件常见事件的触发

onclick:鼠标点击某个对象时触发

onfocus：元素获取焦点时触发

onblur：元素失去焦点时触发

onchange：元素的内容改变时触发

onmousedown：鼠标被按下时触发

onmouseup：鼠标被松开时触发

onkeydown：某个键盘按键被按下时触发

onkeyup：某个键盘按键被松开时触发

onkeypress：某个键盘按键被按下并松开

onkeydown和onkeypress的具体区别：
1）一个放开一个没有放开，onkeydown 先于 onkeypress 发生。
2）onkeypress 无法识别系统按钮（如箭头键和功能键）。
2）onkeydown 捕获的 keyCode 不区分字母大小，而 onkeypress 区分。

6.flash和js通过什么类如何交互?

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback

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

ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开，在js中可调用的flash内的方法;
ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法

7.backgroundColor? background-color?

在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。而使用方括号表示法，"-"被理解为字符串中的内容，该字符串能被正确解析。
eg:
inputElement.style.backgroundColor = 'red'; // 这是没问题的
inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...
inputElement.style["background-color"] = 'red'; // 这也是可以的

8.有关html5标签的说法

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

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

9.有关浏览器中使用js跨域获取数据的描述：

相同的域是指：域名、端口、协议都相同

```
js可以使用jsonp进行跨域
```
```
通过修改document.domain来跨子域
```
```
使用window.name来进行跨域
```

https://www.nowcoder.com/questionTerminal/2a92a78509e34a5b9df2d1220c5d6d89

10.

解析：

（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。

11.JavaScript变量命名规则如下：

1、变量命名必须以字母、下划线”_”或者”$”为开头。其他字符可以是字母、_、美元符号或数字。
2、变量名中不允许使用空格和其他标点符号，首个字不能为数字。
3、变量名长度不能超过255个字符。
4、变量名区分大小写字母。(javascript是区分大小写的语言)
5、变量名必须放在同一行中
6、不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符

12.有关javascript系统方法的描述：

parseFloat方法：解析一个字符串，并返回一个浮点数。如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。（开头和结尾的空格是允许的）

isNaN方法：该方法用于检测参数是否为数值型，如果是数值型，返回false，否则，返回true。

escape方法： 该方法返回对一个字符串编码后的结果字符串

eval方法：该方法将某个参数字符串作为一个JavaScript执行（返回字符串表达式中的值）

isFinite()方法：用于检查其参数是否是无穷大。如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。

13.有关HTML的Doctype和严格模式与混杂模式的描述

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

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

https://www.nowcoder.com/test/question/done?tid=32394689&qid=15107#summary

14.有关JavaScript中 call和apply的描述：

call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性。

ECMAScript规范所有函数都包含两个非继承的方法，分别为call()和apply()，这两个函数都是在特定的作用域中调用函数，能改变函数的作用域，实际上是改变函数体内“this”的指代的对象。

call(thisObject[,arg1,arg2,arg3...]):

释义：第一个参数是运行函数的作用域，调用某一对象的一个方法，用另一个对象替换当前对象。

说明：call方法可以用来代替另一个对象调用一个方法，call方法将一个函数对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObject参数，那么Global对象被用于thisObject。

apply(thisObject[,argArray])：

释义：第一个参数是运行函数的作用域，调用对象的一个方法，用另一个对象替换当前对象。

说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个 TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。

二者区别：两者传递的参数不同，call传递的参数是逐一列举出来的，apply传递参数形式是数组。

https://www.cnblogs.com/mchtig/p/9272892.html

15.border:none以及border:0的区别

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

定义边框时，除了设置宽度外，还必须设置边框的样式（solid,dotted,dashed,double;默认为none）才能显示出来。

16.CSS Sprites

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。

2.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。