前端笔试知识点（一）

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>a:link{color:red}（>为转义字符 相当于>）

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的 本质区别是继不继承父作用域的问题，而不是创不创建新的作用域对象的问题。