前端笔试知识点（一）

1.target的五种取值 _blank（新窗口打开） _self（当前页面打开） _parent（在父框架中打开） _top（在整个窗口打开） framename（指定框架打开）

2.便于插入和删除的容器是list 、map、set

3.样式优先级： !important > id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通用选择器 > 继承

内联样式 > 内部样式 > 外部样式

4.H5中用于获取用户当前位置的方法：getCurrentPosition()

5.H5规范声明：应使用<h1>~<h6>来表示标题，使用<em>来表示强调的文本，使用<strong>来表示重要文本，使用<mark>来表示标注的/突出显示的文本，再没有其他的合适的标签时，才用<b>作为最后的选项。

6.Android基本UI控件 ScrollView：垂直滚动条 HorizontalScrollView：水平滚动条

ScrollView是FrameLayout的容器，在其基础上添加了滚动，允许显示比实际多的内容。

注意，只能往ScrollView中放置一个子元素，可以是单一的组件，或者是一个布局包裹着的复杂的层次结构。

应用场景：一般对于可能显示不完内容的情况，我们可以直接在布局的外层套个ScrollView或HorizontalScrollView。

7.自定义列表格式

<dl> <dt>标题</dt> <dd>内容</dd> </dl>

8.四种触摸事件（touch类事件） touchstart：手指触摸到屏幕时触发 touchmove：手指在屏幕上移动时触发 touchend：手指离开屏幕时触发 touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

9.四种触碰事件（tap类事件） tap：手指碰一下屏幕会触发 longTap：手指长按屏幕会触发 singleTap：手指碰一个屏幕会触发 doubleTap：手指双击屏幕会触发

10.五种滑动事件（swipe类事件） swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发 swipeRight：手指在屏幕上向右滑动时会触发 swipeUp：手指在屏幕上向上滑动时会触发 swipeDown：手指在屏幕上向下滑动时会触发

11.注释格式 css注释：/*...*/ html注释：<!--...--> js注释：//... 或/*...*/

12.ES6出版后，js的原始数据类型有6种，Undefined、Null、Boolean、Number、String、Symbol 其中，undefined是由null派生出来的，==会自动将其转化为null，故返回true；如果是严格比较符===，则不会发生转化，故会返回false。 13.HTML5内建对象CanvasObject.getContext()用于在画布上绘制，返回一个用于在画布上绘图的环境。

14.jQuery中的$(selector).fadeTo()方法可以设置元素渐变为给定的不透明度。 $(selector).fadeIn(speed,callback); 淡入已隐藏得元素 $(selector).fadeOut(speed,callback); 淡出 $(selector).fadeToggle(speed,callback) 在淡入淡出之间切换 参数speed：规定效果的时长，可取’slow’、'fast’或毫秒 参数callback：可选，效果执行完后执行的函数名称

$(selector).fadeTo()元素渐变为给定的不透明度（值介于 0 与 1 之间） 参数speed：规定效果的时长，可取’slow’、'fast’或毫秒 参数opacity：不透明度 参数callback：可选，效果执行完后执行的函数名称

15.在H5中，可以直接将SVG元素嵌入HTML页面中。

16.假设val已经声明，可定义为任何值，则下面js代码有可能的输出结果为？

console.log('Value is' + (val != '0') ? 'define':'undefined';

加号运算符优先级高于三目运算符，低于括号，故括号中的值无论是真或假加上前面的字符串都是字符串,为true，输出’define’

17.在js中，全局变量在函数外声明，并可从脚本的任何位置访问

18.div元素默认值为0的CSS属性：margin、padding div元素默认值不为0的CSS属性： border-top-width：设置一个元素的顶部边框的宽度，默认值为medium（thin–细，medium–中等，thick–粗，可自定px）

outline-width：指定轮廓的宽度，位于边框的边缘外围，默认值为medium（thin–细，medium–中等，thick–粗，可自定px） 19.<canvas>标签（行内块元素）定义图形，它只是图形容器，必须使用脚本来绘制图形。 实例：

<canvas id = 'myCanvas'></canvas> <script type="text/javascript"> let canvas = document.getElementById('myCanvas'); let kk = canvas.getContext('2d'); kk.fillStyle = 'red'; kk.fillRect(0,0,80,100);//x,y,width，height </script>

20. <menu>标签定义菜单列表，当希望列出表单控件时使用该标签 <embed>标签定义了一个容器，用来嵌入外部应用或互动程序（插件） <blockquote>标签定义块引用，<blockquote></blockquote>之间的所有文本都会从常规文本中分离，浏览器在 blockquote 元素前后添加了换行，在左右两边进行缩进（增加外边距），即块引用有自己的空间。 实例：

12312 <blockquote> dvadcs </blockquote> 123

21. onchange：用户改变域的内容时触发 onkeypress：某个键盘的键被按下或按住时触发 onmousedown：某个鼠标按键被按下时触发 onfocus：元素获取焦点时触发 onblur：元素失去焦点时触发 onload：元素（文档、框架或图像）被载入时触发 onreset：表单元素被重置时触发

22.关于js中的call和apply call和apply都是属于Function.prototype的一个方法，故每个function实例都有call、apply属性

23.表单提交时会触发submit()方法formObject.submit()，onsubmit事件onsubmit = 执行动作

24.没有text-color这个属性，文字颜色用color属性

25.cookie的有效时间默认为-1，如果不设置默认在浏览器会话关闭时结束。 可以通过setMaxAge()方法设置cookie的生命期。 当setMaxAge(0)时表示立即删除该浏览器上指定的cookie

26.对于form表单中的input元素的readonly和disabled属性： 无论设置readonly还是disabled，通过js脚本都能更改input的value。 readonly规定input输入字段为只读，input的value会随着表单提交；而disabled规定禁用此input元素，input的value不会随着表单提交。

27.css如何使用服务端的字体：@font-face 语法：@font-face{ font-family:name; src:url(URL); sRules } 参数font-family：字体名称 参数src：使用绝对或相对地址指定OpenType字体 参数sRules：样式表定义

28.若子元素都为浮动，可以解决父类高度塌陷问题的方法有： （1）额外标签法 在浮动元素下方添加空div，并添加样式clear:both; （2）给父元素添加overflow:hidden; 通过触发BFC的方式，实现清除浮动效果 （3）使用after伪元素 设置父元素:after{content:’’;clear:both;display:block;} （4）使用before和after双伪元素

29.DHTML（Dynamic HTML）将HTML、JS、CSS以及DOM组合在一起，用于创造动态性更强的网页。通过DOM、CSS、JS动态地改变HTML元素的样式。

DOM动态样式的作用是：使网页作者改变内容的外部特性，但不强制用户再次下载全部内容。

30.在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置：cellpadding（每个单元格内边距）= ‘0’和cellspacing（每个单元格外边距）= ‘0’

31.Object.keys(obj)方法 返回一个由给定对象的自身可枚举属性名组成的数组

let obj = { name:'kkk', age:12 } console.log(Object.keys(obj))

32.CSS中filter:alpha()和opacity filter:alpha()和opacity都是设置透明度的，但是opacity在IE8及以下是不兼容的，故要设置filter opacity值的范围：0~1,0为完全透明，1为完全不透明 filter.alpha(opacity)中opacity的范围：0~100，0为完全透明，1为完全不透明

filter.alpha()的基本属性： filter.alpha(opacity = ? ,finishopacity = ?,style = ?,startX = ?,startY = ?,finishX = ?,finishY = ?) 参数opacity：不透明度 参数finishopacity：设置渐变的透明效果时，用于指定结束时的透明度 参数style：设置渐变透明的样式，值为0表示统一形状、1表示线性、2表示放射状、3表示长方形 参数startX和startY：渐变透明效果开始时的X和Y坐标 参数finishX和finishY：渐变透明效果结束时的X和Y坐标

btn-group能将按钮组成按钮组，可以嵌套使用 可使用btn-group-lg和btn-group-sm来调整按钮大小 btn-toolbar能将btn做成复杂组件

34.div元素本身不具有语义，但可以结合class、title、lang属性来表示具有语义的一组内容

35.time元素用于表示时间，address元素用于表示地址

36.fieldset元素用于对表单控件进行分组，legend元素用来表示它的标题

37.<q>标签用于给引用的短句添加引号，可选属性cite指明引用的出处或来源

<p> 大哲学家曾经说过： <q>人是铁 饭是钢 一顿不吃饿得慌</q> </p>

<q> 标签在本质上与 <blockquote> 是一样的，不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用，如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），使用 <blockquote> 标签。

38.数据序列化技术：JSON、Property List（属性列表）、Protocal Buffer（简介）、XML

39.字符串的match()方法用于查找匹配的字符 str.match(/b+/g)匹配至少由一个b组成的字符串 str.match(/b*/g)匹配不含b，或由一个或多个b组成的字符串 str.match(/b{1,4}/g)匹配由最少1个b，最多4个b组成的字符串

40.ES6中Promise（处理异步操作）的三种状态 （1）pending 未决 （2）reslove 成功 （3）reject 拒绝

41.JS实现继承的方式：（6种） 原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承

原型链继承：所有对象都公用一份原型属性和方法，对一个类的修改回影响的其他类 构造函数继承：把父类的所有属性方法全部拷贝一份，但对于公用的方法重复拷贝会浪费内存 组合继承：结合两种继承方式，用构造函数方式继承属性，用原型链方式继承方法

42.在<div><a href="http://www.w3.org/">链接到W3C</a></div>中 div a:link{color:red}的效果等同于div&gt;a:link{color:red}（&gt;为转义字符 相当于>）

div a和div > a的区别：后者指作用到div下一级的a标签，仅一级

div a:link{color:red}在这里的效果不等同于div:first-child{color:red} （1）div:first-child表示首先得是div元素，其次得是属于其父元素的第一个div子元素 例：

<style> p:first-child{ background-color:yellow; } </style> <body> <p>这个段落是其父元素（body）的首个子元素。</p> <h1>欢迎访问我的主页</h1> <p>这个段落不是其父元素的首个子元素。</p> <div> <p>这个段落是其父元素（div）的首个子元素。</p> <p>这个段落不是其父元素的首个子元素。</p> </div> </body>

（2）div:first-of-type表示首先得是div元素，其次得是其父元素中出现的第一个div元素 例：

p:first-of-type{ background-color:yellow; } <body> <div> <span>??</span> <span> <p>这是第0个段落!!!!!</p> </span> </div> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> <p>这是第四个段落。</p> <div> <p>这是第最后一个段落!!!!!</p> </div> </body>

（3）div:nth-child(n)表示首先得是div元素，其次得是其父元素的第n个子元素 例：

p:nth-child(2){ background:#ff0000; } <body> <h1>这是标题</h1> <div>//第二个子元素 但不是p元素 <p>??</p> <p>~~</p>//第二个子元素 且为p元素 </div> <p>第一个段落。</p>//第三个子元素 <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> </body>

（4）div:nth-of-type(n)表示首先得是div元素，其次得是其父元素中出现的第n个div元素

p:nth-of-type(2){ background:#ff0000; } </style> </head> <body> <h1>This is a heading</h1> <div> <p>??</p> <p>!!</p> </div> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> </body>

43.angularjs中定义服务的方法： （1）使用系统内置的$provide服务 （2）使用Module的factory方法 （3）使用Module的service方法

44.DHTML具备的优点： 动态样式、动态内容、动态定位

45 . ele.innerHTML：获取或修改dom元素内部的HTML结构 ele.innerText：获取或修改dom元素内部的文本 ele.outerHTML：获取或修改dom元素的HTML结构（包括该元素本身） ele.outerText：获取或修改dom元素的文本（包括该元素本身）

示例：

<p> 大哲学家曾经说过： <q>人是铁 饭是钢 一顿不吃饿得慌</q> </p> <script> let p = document.getElementsByTagName('p')[0]; </script>

46.js的任务分为同步任务和异步任务（异步任务如setTimeout、setInterval、ajax等），同步任务放在主线程，形成一个执行栈；异步任务放在任务队列，只有主线程空了才会去读取任务队列的任务。

47 .

for(var i = 0; i < 5; i++){ requestAnimationFrame(() => console.log(i)); }

requestAnimationFrame是异步操作，故for循环中的requestAnimationFrame会在循环退出的时候才执行其中的回调，此时用var关键字（函数级作用域）声明的变量i的值为5，故输出5个5

48 .

if(! "a" in window){ var a = 1; } alert(a);

if语句的意思是：判断全局对象window中是否有变量a，如果没有，则进入判断将a赋值为1 由于变量声明会提升，但变量赋值不会提升，就相当于代码如下：

var a; if(! "a" in window){ a = 1; } alert(a);

进行if判断时，变量a已经被声明但还未赋值，故不会进入判断给啊赋值，输出a时为undefined

49.H5的跨文档消息传输 （1）可以实现同域内的web页面之间相互通信 （2）可以实现跨域通信 （3）可以相互传递字符串和对象 （4）使用这个功能，需要获取到网页所在窗口的实例

50.angularjs指令中scope（作用域）的三个参数 参数false：（默认）不创建新的作用域对象，和父作用域共享一个作用域 参数true：从父作用域继承并创建一个新的作用域对象 参数{}：隔离作用域，创建一个新的作用域对象，但不继承父作用域

scope:false 和scope：true的 本质区别是创不创建新的作用域对象，而不是继不继承的问题。 scope：{}和scope：true的 本质区别是继不继承父作用域的问题，而不是创不创建新的作用域对象的问题。