自己整理的一些前端面试笔试题（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