自己整理的一些前端面试笔试题(HTML、CSS、JS、Angular)

时间:2024-03-15 09:02:33

2019.04.12:

昨天刚刚在公司参与了新入职大学生的转正笔试,我拿到的是前端开发的笔试试题,做的时候感觉到,即使已经可以承担部分的前端开发工作,对于前端的很多基础知识还是一知半解,特别有的很基础的作用域问题和生命周期等问题都没有搞明白,很是汗颜。所以把复习的时候遇到的一些常见的前端开发的基础试题整理出来,也算是激励自己继续努力,先把自己的饭碗稳稳的端起来,再去争取更大的成长吧。


1、display的值和含义:

  1. block块级元素:占满整行的元素,它的长宽高、外边距、内边距都是可变的。宽度缺省是它容器的100%,除非设定一个宽度。它还可以容纳内联元素和其他块元素;

    常见的block元素:div,dl,form,h1,h2,h3,h4,h5,h6,hr,p,ul,table,menu

  2. inline行级元素:内容决定它的占位,它的长宽高、外边距、内边距不可变。宽度就是它的文字或图片的宽度,不可改变。内联元素只能容纳文本或者其他内联元素;

    常见的inline元素:br,em,i,img,input,lable,span,strong

  3. inline-block行块级元素:内容决定占位,它的长宽高、外边距、内边距都是可变的;

  4. none:元素不会显示,而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的;

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

     另外:如果要把行级元素转换成块级元素:

            1.使用display;

            2.使用float,该行的display属性会被赋予block属性,且拥有浮动特性;

            3.position,当行内元素进行定位时,position:absolut,position:fixed,都会使原先的行内元素变成块级元素。

2、请回答,CSS代码,有几种常见的引入方式,分别是什么?

1.行内式:在标记的style属性中设定CSS样式

2.内嵌式:是将CSS样式集中写在网页的<head></head>标签对应的<style></style>里。

3.导入式:将一个独立的.CSS文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,语法如下:

<style type="text/css">

@import"mystyle.css";此处需要注意.css文件的路径

导入式会在整个网页加载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大,则会出现先显示无样式页面,闪烁过后才会出现页面的样式,这也算是一个缺陷。

4.链接式

链接式使用HTML规则引入外部CSS文件,它在网页的<head></head>标签对中使用<link>标签来引入外部样式表文件,使用语法如下:

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

使用连接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果。

3、请简化以下的CSS代码:

#content{ 
margin:0 10px;
 padding:0;
 background:#ffffff; 
} 
#content div{ 
margin:0 10px; 
padding:0; 
font-size:14px; 
text-align: center; 
color:#e9e9e9; 
} 
#nav{ 
margin:0 10px;
 padding:0;
 background:#e0e0e0; 
}

简化后的结果:

#content,
#content div,
#nav{
margin:0 10px;
padding:0;
}
#content{
background:#fff;
}
#content div{
font-size:14px;
text-align:center;
color:#e9e9e9;
}
#nav{
background:#e0e0e0;
}

4、在很多浏览器的body都有默认的margin,这个值是多少呢?

       8px

5、在这个HTML页面中,orange颜色的区域宽度是多少,range区域距离页面左边的和上边的距离分别为多少?

body{ 
padding:0;
 margin:0; 
}
 #my-defined{ 
width:100px; 
height:100px; 
padding:0 100px; 
margin:10px 20px 30px 40px; 
border:1px solid orange; 
background:orange;
}

答案:橙色区域的宽度是302,距离页面左边和上边的距离分别是40和10。

因为margin的值分别为:上:10px;右:20px;下:30px;左:40px;

#my-defined部分:规定了橙色区域的宽:100px,而且左右边距都是100px,再加上border都是1px,这样加起来就是302px。

6、如何居中一个浮动元素?

设置它的CSS的top和left的值:

left: 50%;
top: 50%; 

7、form表单中method属性常用哪些值?他们的区别是什么?

<form action="action_page.php" method="GET">

或者:

<form action="action_page.php" method="POST">

当用户在HTML表单中输入信息并提交之后,有两种方法将信息从浏览器传送到Web服务器,一种方法是通过URL,另外一种是在HTTP Request的body中。

主要区别如下:

GET:

  1. URL改变,在URL里显示HTML FROM参数的name/value值,
  2. 只适合有少量参数的HTML Form,因为URL长度有字符限制,不能无限长,
  3. 涉及安全性的信息,比如用户密码,不能用get,因为会在URL上显示,不安全。

POST:

  1. URL不改变,不在URL里显示HTML Form的数据,
  2. Form提交的信息没有长度限制,
  3. 涉及安全性的信息,如用户密码,应该采用POST方式。

8、如何去掉ul>li结构中li前面的圆点?去除圆点后,每个li前面会有空余怎么解决?

list-style:none;
padding:0;
margin:0;

9、写出javascript语言typeof可能返回的结果?

string  number object function undefined boolean

10、将数组按照顺序连接成字符用什么方法?

arr.join("");

js中的join()方法用于把数组中的所有元素放入一个字符串,参数是指定要使用的分隔符,如果省略该参数,则使用逗号作为分隔符。

11、请写出Html,css,javascript注释的代码形式

html中的注释形式是:<!—   —>

css中的注释形式是:/*      */

js中的注释形式是://和/**/

12、请编写一段javascript脚本生成下面这段DOM结构,要求:使用标准的DOM方法或属性。

<div class="example">
    <p class="slogan">请编辑这段话!</p>
</div>

使用标准的DOM写的话如下:

var Example=document.createElement('div');
var P=document.createElement('p');
Example.className='example';
P.className='slogan';
Example.appendChild(P);
document.getElementsByTagName('body')[0].appendChild(Example);

13、简述call,和apply方法的用途,和区别?

改变this指向,call传递的是连续参数,apply传递的是数组参数。

14、为一个数组去重,eg:var arr = ['a','b',234,23,'a','b',3,1,234];

function unique(array){
   var tmp = [];
   for(var i=0;i<array.length;i++){
     if(tmp.indexOf(array[i])== -1){
       tmp.push(array[i]); 
    }
  }
    return tmp;
}

15、如今有一个Ul,里面有十亿个Li,要求点击li触发事件,弹出对应的li的内容:

var ul = document.getElementsByTagName('ul')[0];
ul.onclick=function(e) {
    var event = e || window.event;
    var tar = event.target || event.srcElement;
    if(tar.tagName.toLowerCase()==="li")
      alert(tar.innerText);
 }

看到这个题,一般的思路是for循环,遍历一万次,这样的话一万次的循环,效率很低。这里就可以考虑利用事件冒泡特性来提高效率,主要是利用事件代理。

事件代理(Event Delegation),又称之为事件委托,是javascript种常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。这么做的原因呢?众所周知,dom操作是十分消耗性能的,所以重复的事件绑定简直是性能杀手,而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件。

另外就是event.target和event.srcElement的区别:首先,event.srcElement和event.target都是指向触发事件的元素,它是什么就有什么样的属性。

IE浏览器支持window.event.srcElement,而firefox支持window.event.target。

16、如何阻止事件冒泡和事件默认事件

在非IE浏览器中提供了一个事件对象stopPropagation,那么在IE浏览器中可以通过cancelBubble事件对象阻止。

阻止冒泡事件:

function stopBubble(e) {
    if(e && e.stopPropagation) {
        e.stopPropagation();
       }else {
        window.event.cancelBubble = true;
       }
    }

浏览器的默认事件就是浏览自己的行为,比如我们在点击<a href="#">的时候,浏览器跳转到指定页面,或者是当我们滚动鼠标时页面会向下滚动,但我们按空格键和按方向键时也会向下滚动,为了更好的用户体验,这时我们就需要阻止这种行为的发生。

function stopDefault(e) {
    if(e && e.preventDefault) {
        e.preventDefault();
      }else {
        window.event.returnValue = false;
      }
    return false;
  }

17、什么是DOM?

DOM的全称是Document Object Model,是一种用于HTML和XML文档的编程接口。

18、获取非行间样式:

element.style和getComputedStyle都可以获取元素的CSS样式,区别在于:

1.getComputedStyle方法是只读的,只能获取不能设置,而element.style能读能写。

2.getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象,即使没有CSS代码,也会把默认的祖宗八代都显示出来;而element.style只能获取元素的style属性中的CSS样式。

getComputedStyle和currentStyle都是只能获取属性,不能更改,但是二者兼容性不同。

getComputedStyle该属性兼容火狐谷歌,但不兼容IE

currentStyle该属性兼容IE,但不兼容火狐和谷歌。

19、运行test()和new test()的结果是什么?

var a = 5;
 function test() { 
    a = 0; 
    alert(a); 
    alert(this.a); 
    var a;
    alert(a); 
}

0,5,0

0,undefined,0

20、有字符串“aaabbbcccdddeeefgggaa”,转换成连续不重复的字符串,eg:abcdefga(提示:用正则做可得满分)

var reg = /(.)\1*/g;
var str = 'aaabbbcccdddeeefgggaa';
str.replace(reg,str);

21、写出运算结果:

alert(typeof(a));                         undefined
alert(typeof(undefined));                  undefined 
alert(typeof(NaN));                       number
alert(typeof(null));                      object
alert(typeof(NaN));                       number


var a = "123abc";
   alert(typeof(+a));                       number
   alert(typeof(!!a));                      boolean 
   alert(typeof(a + ""));                   string

alert(1 == "1");                           true
alert(NaN == NaN);                         false
alert(NaN == undefined);                    false
alert("11" + 11);                          1111
alert(1 === "1");                          false
alert(parseInt("123abc"));                 123


var num = 123123.345789; 
alert(num.toFixed(3));                     123123.345

22、打印当前年月日时分

var date=new Date();
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());

23、有HTML结构如下,求他们之间的距离:

<div style="background-color:red;margin:0 0 100px 0;">123</div>
<div style="background-color:red;margin:200px 0 0 0;">234</div>

答案是200px:

为什么2个相邻div的margin只有1个生效呢?我们把这种机制称之为“外边距合并”;外边距合并不仅仅出现在相邻的元素间,父子间同样会出现。结果是选择2者之间最大的那个margin。

解决方法:给父元素加个padding或border或overflow:hidden(overflow:scroll或overflow:auto也可以用,但要根据实际情况使用)。

24、请介绍一下js语言的特点:

js语言是一种解释性的单线程的脚本语言。它的特点有:

  1. 脚本语言:它是一种解释性的脚本语言,在运行过程中逐行解释;
  2. 基于对象:无法利用现有的对象模板产生新的对象类型,继而产生新的对象,也就是说“基于对象”没有继承的特点;
  3. 简单紧凑:是弱类型的变量类型;
  4. 动态性:是事件驱动的脚本语言;
  5. 跨平台性:不依赖操作平台,仅需浏览器的支持。

25、请介绍一下主流浏览器以及他们相应的内核,请介绍一下浏览器分为哪几个部分,内核呢?

IE                                      Trident

Chrome                             之前是webkit,现在采用blink

Safari                                webkit

Firefox                               Gecko

Opera                                presto

浏览器器分shell和内核,内核分渲染引擎和JS引擎。

26、简述JS时间线:

1.创建document对象,开始解析web页面。创建html Element对象添加到document对象中。这个过程中document.readyState = ‘loading’;

2.遇到link外部css,创建线程加载,并继续解析文档;          

3.遇到script外部js,并且没有设置async,defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档 ;  

4.遇到script外部js,并且设置有async,defer 浏览器创建线程加载,并继续解析文档,对于async属性的脚本,脚本加载完成后立即执行(异步禁止使用docuemnt.write());

5.遇到img标签等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档;

6.dom解析完毕,document.readyState = ‘interactive’;

7.文档解析完成后,所有设置有defer的脚本会按照顺序执行;

8.dom触发DOMContentLoaded事件,由同步脚本阶段,转变为异步事件监听阶段;

9.当所有saync的脚本加载完成并执行后,img等加载完成后,document.readyState = "complete" window对象触发load事件;

10.从此,页面以异步响应方式处理用户输入,网络事件等。

27、写出运算结果:

var a = (10 * 3 - 4 / 2 + 1) % 2; 
b = 3; 
b %= a + 3;
console.log(a++); 
console.log(--b);

运算结果为:1   2

28、使用原生的Js,addEventListener,给每个li元素绑定事件,输出他们的顺序。

<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

答案:

var li=document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
    li[i].addEventListener('click',function (e) {
    console.log(this.innerText);
  })
}

29、此程序执行结果为?

var str = "打印这段文字";
str.length = 3;
console.log(str);

“打印这段文字”。因为字符串的长度不能修改。

30、请用多种方法创建对象:

  1. 简单对象的创建,使用对象字面量的方式{}:例如:

                     var Cat  = {};

                     Cat.name = "kitty"...

  2. 用function来模拟class:

    function Pet(name, age, hobby){
        this.name = name;
        this.age = age;
        this.hobby = hobby;
    }
    var maidou = new Pet("麦兜",“5”,“睡觉”);//实例化来创建对象

     

  3.  使用工厂方式来创建,new Object()

    function Dog() {}
    Dog.prototype.name = "旺财";
    Dog.prototype.eat = function() {
        alert(this.name + "是个吃货~");
      }

31、如何枚举一个对象中的所有自然属性:

自己整理的一些前端面试笔试题(HTML、CSS、JS、Angular)

 

32、让一个数组里面的数据,从小到大排列,var arr = [23,4,6,7,2,2,5,55,8]

var arr = [23,4,6,7,2,2,55,8];
function number(a,b) {
    return a-b;
  }
arr.sort(number);

33、选择html元素节点的获取方法,以及他们各自的兼容性问题及特点

getElementById();

getElementsByName();

getElementsByClassName();                ie8及以下不兼容

getElementsByTagName();

querySelectorAll();                                非实时ie7及以下不兼容

querySelector();                                    非实时ie7及以下不兼容

34、请说出,节点类型的值为1,2,3,8,9的值对应的节点是什么:

1:元素节点             2:属性节点       3:文本节点         8:注释节点            9:文档节点

另外获取节点类型的方法:nodeObject.nodeType,具体用法如下:

<div id="demo">


获取的方法:
document.getElementById("demo").nodeType;

返回值:1

35、请说出,鼠标事件的触发顺序,以及如何实现右键的事件监听

onmousedown,   onmouseup,   click

监听mousedown,判断button==2

36、数据格式JSON转换为字符串,以及把字符串转换为JSON的方法

JSON.stringify()  json➡ string

JSON.parse()    string ➡ json

37、请说出几种你所熟悉的BOM对象,并介绍其一点或两点功能

1.window对象:它表示整个浏览器窗口,主要用来操作浏览器窗口,对窗口的操作主要是对坐标的调整。常用方法有:

               1)相对操作:moveBy——移动,resizeBy——调整大小;

               2)绝对操作:moveTo,resizeTo

2.location对象:它是window对象和document对象的属性,用来分析和设置页面的URL地址;

3.navigator对象:被认为是最重要的对象,它包含了一系列浏览器信息的属性,userAgent是最常用的属性,用来完成浏览器判断;

4.screen对象:主要是用来获取用户的屏幕信息。

38、请说出你所熟悉的选择的优先级关系:

!important        无穷大

style                   1000

id                         100

class/attr/伪类      10

标签/伪元素           1

通配符                   0

39、写一个输入框,带有js功能,鼠标聚集提示信息消失,失去焦点显示提示信息

<input type="text" value="请输入关键字" style="color=‘#999’" 
    onfocuse="if(this.value == "请输入关键字") {this.value='';this.style.color='black';}" 
    onblur="if(this.value == '') {this.value="请输入关键字";this.style.color='#999';}">

40、写出下面代码的打印结果:

function fn(a, b) {
    arguments[0] = 1;
    console.log(a);
}
fn(2,1);

结果:1,arguments和实参的值是绑定的,改变arguments里面的值实际上也是改变实参值。

41、JavaScript定义var a="40",var b=7,则执行a%b会得到:

答案:5。因为运算中,+号,数字隐式转换成字符串。其余的运算符号是字符串隐式转换成数字:

42、写出以下代码的运行结果:

function getInfo(name, age, sex){
        console.log('name:',name);
        console.log('age:', age);
        console.log('sex:', sex);
        console.log(arguments);
        arguments[0] = 'valley';
        console.log('name', name);
    }

(1)getInfo('饥人谷', 2, '男');

结果:

name: 饥人谷

age: 2

sex: 男

['饥人谷', 2, '男']

name valley

(2)getInfo('小谷', 3);

结果:

name: 小谷
age: 3
sex: undefined
['小谷',3]
name vally

(3)getInfo('男');

结果:

name: 男
age: undefined
sex: undefined
['男']
name valley

43、合理的页面布局中常听过结构与表现分离,那么结构是   div  ,表现是  css 

44、META元素用于指定关于HTML文档的信息。

45、pop() 函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值。

46、表格里的单元格在同行进行合并:colspan;表格里的单元格在同列进行合并:rowspan。

47、想要为网页中的文字加上超链接:

可以使用a标签,href表示超链接的路由:

<a>标签  <a href="http://www.w3schools.com">W3Schools</a>

48、常用的标签和样式的使用:

下列的HTML中哪个可以插入一条水平线:<hr>

粗体字<b>   斜体字<i>

如何产生带有数字列表符号的列表?<ol>

产生带有圆点列表符号的列表:<ul>

HTML中哪个可以插入图像?<img src="image.gif">

下列属性中:

        表示文档中的未访问过的超链接的颜色是哪个                 link属性

        文档中已被访问的链接颜色 。                                          vink

        规定文档中活动链接的颜色。                                           alink

49、历史对象(history)的属性: 

        back    forword     go   length

50、location对象的href属性:

  1. 可以获取当前路径;   

  2. 可以改变当前路径;   

  3.  可以用来刷新页面 

51、通常情况下,一个URL的格式是:

协议//主机:端口/路径名称?搜索条件

52、弹出输入框,默认内容是“Hello World”:

prompt(“输入”,"Hello World")        ——prompt用于显示可提示用户进行输入的对话框。

53、网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法:

document.mainForm.myButton

54、在使用Javascript实现省市级联菜单功能时,在添加城市列表前清空原来的下拉选项的代码是:

document.myform.selCity.options.length=0

55、检测是否按下回车:

function myKeyDown(){
         if(event.keyCode==13)
         alert(“你按下了回车键”);
  }

56、display:none和visible:hidden都能把网页上某个元素隐藏起来,区别:

●display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

●visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

57、要获取一个ID为username的表单元素的值:

      1)document.all.username.value

      2)document.getElementById("username").value

      3)表单外层元素无表单,可以直接使用username.value

58、如果想控制一个名为menuBar的层右移20个像素显示,下列能实现的是()

   A document.menuBar.display += 20

   B document.all.menuBar.pixelLeft += 20

   C document.all.menuBar.left += 20

   D document.all.menuBar.style.pixelLeft+= 20

59、使两个层排在同一行的方法:

     1)指定DIV的position属性为absolute,然后将层位置拖放到同一行中;

     2)指定DIV标记的宽,并且指定其浮动方式,当层宽度之和小于外层元素

           宽度时,会排在同一行;

     3)使用一个表格,将两个层分别放入一行中的两个单元格内。

60、onblur()事件:

当用户离开input输入框时执行,onblur 事件会在对象失去焦点时发生。onblur 经常用于Javascript验证代码,一般用于表单输入框。——相反事件为onfocus()事件。

61、定时器:

       1)定时器如setTimeout(“<表达式>”,毫秒数):用于指定在一段特定的时间后执行某段程序;

       2) clearTimeout(id)是用于终止一个定时器;clearInterval(id)的功能也是终止定时器;

       3)setInterval(“<表达式>”,毫秒)的功能是每隔毫秒数重复执行<表达式>,直至窗口框架被关闭或执               行clearInterval。

62、html 怎么让网页强制出现浏览器的滚动条:

<style type="text/css">
body{
    overflow:scroll;
    overflow-x:hidden;
}
</style>

63、有关窗口对象的方法:

1)弹出警告信息用alert(信息字串)

2)显示确认信息对话框用confirm(信息字串)

3)显示提示信息,并提供可输入的字段用prompt(提示字串[,默认值])

4)将焦点移到该窗口,是用focus()

5)进入浏览器设置的主页,可以使用home()

64、window窗口对象事件:

1)window.onload:发生在文档全部下载完毕的时候;

2)window.onunload:在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候,与onload一样;

3)window.onresize:发生在窗口被调整大小的时候;

4)window.onblur:发生在窗口失去焦点的时候;

5)window.onfocus:发生在窗口得到焦点的时候;

6)window.onerror:发生在错误发生的时候;

7)window.open():打开新窗口;

8)window.close():关闭当前窗口;

9)window.moveTo():移动当前窗口;

10)window.resizeTo();调整当前窗口的尺寸;

11)window.onerror ():文档或图像加载过程中发生错误时被触发。

65、构造函数的执行过程:

1)使用new关键字创建对象

2)调用构造函数把新创建出来的对象赋值给构造函数的this关键字

3)在构造函数内实用this为新创建出来的对象添加成员

4)默认返回新创建的这个对象

5)如果return一个空值,或者return一个基本类型数据仍旧是返回新创建的对象

66、position定位的五个常用属性值:

自己整理的一些前端面试笔试题(HTML、CSS、JS、Angular)

67、DOCTYPE有什么作用?标准模式与混杂模式如何区分?

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式(Standards mode)以浏览器支持的最高标准运行;

混杂模式(Quirks mode)中页面是一种比较宽松的向后兼容的方式显示。

68、页面导入样式时,使用link和@import有什么区别?

相同的地方,都是外部引用CSS方式,区别:

  1. link是xhtml标签,除了加载css外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
  2. link引用CSS时候,页面载入时同时加载;@import需要在页面完全加载以后加载,而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
  3. link是xhtml标签,无兼容问题;@import是在css2.1提出来的,低版本的浏览器不支持
  4. link支持使用javascript控制去改变样式,而@import不支持
  5. link方式的样式的权重高于@import的权重
  6. import在html使用时候需要<style type="text/css">标签

69、简述一下你对HTML语义化的理解?

  1. 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
  2. 有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的信息,爬虫依赖于标签来确定上下文和各个关键字的权重。
  3. 方便其它设备解析。
  4. 便于团队开发和维护,语义化根据可读性。

70、cookies,sessionStorage和localStorage的区别?

共同点:都是保存在浏览器端,且是同源的。

区别:

  1. cookies是为了标识用户身份而存储在用户本地终端上的数据,始终在同源http请求中携带,即cookies在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存。
  2. 存储大小的限制不同。cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage保存的数据大,可达到5M。
  3. 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存。
  4. 作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使同一页面;localstorage在所有同源窗口都是共享。

71、title与h1的区别、b与strong的区别、i与em的区别?

title属性没有明确意义,只表示标题;h1表示层次明确的标题,对页面信息的抓取也有很大的影响
strong标明重点内容,语气加强含义;b是无意义的视觉表示
em表示强调文本;i是斜体,是无意义的视觉表示
视觉样式标签:b   i   u   s
语义样式标签: strong  em  ins  del  code

72、XHTML和HTML有什么区别

  • HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
    最主要的不同:
  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

73、介绍一下CSS的盒子模型?

  • 有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)。

74、简述Angular的生命周期:

1、生命周期是什么?

  1. Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用;

  2. 每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的,比如OnInit接口的钩子方法叫做ngOnInit;

  3. 没有指令或者组件会实现所有这些接口,并且有些钩子只对组件有意义。只有在指令/组件中定义过的那些钩子方法才会被Angular调用。

2、生命周期钩子:

基于指令与组件的区别来分类:
1、指令与组件共有的钩子:
ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy
2、组件特有的钩子
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked

3、Angular 2 指令生命周期钩子的作用及调用顺序:

1、ngOnChanges - 当数据绑定输入属性的值发生变化时调用
2、ngOnInit - 在第一次 ngOnChanges 后调用
3、ngDoCheck - 自定义的方法,用于检测和处理值的改变
4、ngAfterContentInit - 在组件内容初始化之后调用
5、ngAfterContentChecked - 组件每次检查内容时调用
6、ngAfterViewInit - 组件相应的视图初始化之后调用
7、ngAfterViewChecked - 组件每次检查视图时调用
8、ngOnDestroy - 指令销毁前调用

参考地址:https://www.jianshu.com/p/a2f1d54097f8 

                  https://www.cnblogs.com/fighxp/p/7509274.html