持续更新的前端面试题-----

1,web标准和w3c标准是什么?

  标签闭合,标签小写,不乱嵌套,使用外链css、js,结构行为表现的分离。

2,HTML没有单位的属性有哪些?

  font-weight:100;  z-index:999;  zoom:1;

3,form中的readonly,disabled有什么区别?

  readonly:只读,不可以修改。

  disabled:禁用,文本框显示灰色。

  另:methods:是表单提交的方式。action:是表单数据提交给后台数据库的入口。

4,行内/块级元素有哪些?

  行内:a,b, br, span,  select ,strong, input,img

  块级:div,p ,h1-h6, form,ul,dl,ol,table

5,盒模型

  content、border、 padding、 margin 

5.1,盒模型有哪两种模式?

  标准模式:box-sizing: content-box  //宽高不包括内边距和边框

  怪异模式:box-sizing: border-box

6,display 有什么属性?有什么作用?

  display:block;  //行内元素转为块级元素

  display:inline;  //块---行内

  display:inline-block;  //转为内联元素

  display:box;  //css3新增的弹性布局

6.1,延申:display: none 或者 visibility: hidden,v-if 或者 v-show。

  总结: display: none属性 和 v-if事件 都是不占位置的了。

      visibility: hidden和v-show,还占有位置,只是隐藏了。

7,css有哪些选择器?9种选择器:

  id:#, 类:.,标签:a,属性:a[ rel = external ],后代:li a,

  子选择器,ul<<li伪类,a:hover通配符,*相邻 :h1+p

  优先级:!import > 行内 > id > 类 > 标签 

10,前端由哪几层组成?作用是什么

  三层:结构html:页面的骨架 , 样式css:渲染页面, 行为js:数据交互,实现动画效果.

11,alt和title的区别

  alt:图片属性,当图片显示不了的时候显示的。

  title:是网站标题

12,什么是语义化的HTML?

  标签的语义化,标签的合理使用,对于搜索引擎的抓取有好处,所以不要一直使用div,有nav,footer,header, section等等可用于布局。

  作用:方便搜索引擎高效处理信息。有利于SEO,有助于爬虫抓取更多的有效信息。

13,五大浏览器内核

  谷歌和苹果:-webkit-   IE:-ms-   火狐:-moz-    欧朋:-o-

14,link和@import的区别

  1,加载:先加载link,再加载@import。而且link除了能加载css外,还可以RSS事务,而@import只能加载CSS

  2, 兼容:link是标签,无兼容问题。

15,label的作用和用法

  点击这个标签的时候,所绑定的元素将获取焦点,用for属性去实现:

  <label for="name">名字</label><input type="text" id="name">
16,HTML与XHTML有什么区别?
  。所有标签必须有一个结束的标签
  。标签的属性和元素必须小写,并且属性用引号括起来。
  。所有的XML必须合理嵌套。
17,cookie和session的区别?
  cookie: 数据保存在浏览器上,不安全,数据保存大小有限制,一个不能超过4K。很多浏览器只能保存20个cookie.
  session: 数据保存在内存,安全,但是会占用服务器性能。
18,优化前端的方法
  1)css放顶部,JS放底部
  2)使用console.time打印耗时
  3)异步路由
  4)减少无意意义的标签嵌套
  5)使用雪碧图
  6)AJAX
  7)缓存
  8)合并HTTP请求
  9)压缩资源
  10)优化代码,减少不必要的循环等
19,HTTP有几种请求方式?
  get:  发送一个请求来取得服务器上的某一资源
  post:  向URL指定的资源提交数据
20,Doctype的作用?还有严格模式和混杂模式的区别是啥?
  <!DOCTYPE>位于文档的前面,主要是用来告诉浏览器解析器要以哪种文档类型、规范来解析这个文档。
  严格模式:以浏览器支持的最高标准运行。
  混杂模式:会以宽松向后兼容的方式显示。
21,css中,inlineinline-blocklock,有什么区别?
  inline: 在一行显示,不能设置宽高。
  inline-block: 在一行显示,以块级的形式存在,可以设置宽高。(ie6 不支持)
  block: 不在一行显示,可以设置宽高。
22,常见的兼容性问题?
  1,各个浏览器默认的paddimg    margin不同。解决:样式开头加*{padding: 0; margin: 0;}

JS方面

1,js的数据类型有啥

  七大数据类型:3个基本:string, number,  boolean, 2个复杂object, function ,2个不含任何值的null, undefined .

  三个对象类型:object , date , array .

1-1: 数据类型转换:

  1) 使用 typeof 操作符来查看 JavaScript 变量的数据类型

  console.log(typeof "123")

  2)将数字转换为字符串:x.toString() 或则: String(x)

2,document.write和innerHTML的区别?

  document.write:

  innerHTML:

3,已知ID的input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)

  document.getElementById('id').value;

4,==和===的区别

      ==:是两个值相等但是两个值的类型不同。

  (1)两个值相等的情况:一个值是null,一个值是undefind,那么相等。

  (2)一个是字符串,一个是数值。要把字符串转为数值再比较两个是否相等。

     ===:两个值的数值和类型都相等。

     "123"="123",true=true, false=false, null=null, undefind=undefind...

5,null和 undefind的区别

  null: null类型,代表一个空值,代表一个空对象的指针,可以清空一个对象,可以认为它是一个特殊的对象值。

  undefind: 是声明了一个变量却没有赋值,输出的就是undefind.

6,get和post的区别

  (1)URL:  get,url参数可见。post, url参数不可见。

  (2)传输数据的大小:get,  数据大小不超过2k-4k。post,  可以无限大。也可以根据配置文件设定

  (3)后退页面的反应:get,  请求页面后退时,不产生影响。post,  会重新提交请求。

  (4)缓存:get, 可以缓存。post, 不可以缓存。

  (5)参数:get, 参数会被完整保留在浏览器记录里面。post, 参数不会被保留

7,从输入网址到页面呈现发生了什么?

   分为两部分

  (1)网络通讯:地址解析---解析出的域名进行 DNS 解析---通过ip寻址和arp找到服务器---服务器和浏览器进行tcp三次握手,建立链接---浏览器发送数据等待服务器响应---

    服务器处理数据做出响应---浏览器收到请求得到HTML代码。---

  (2)页面渲染:解析HTML文件,创建DOM树。---解析CSS,形成CSS对象模型。---将HTML和CSS合并创建渲染树。---布局和绘制。

8,new一个实例对象会发生什么?

  创建一个新对象---将构造函数的作用域赋给新对象(this)---执行构造函数中的代码---返回该函数。

9,箭头函数与普通函数的区别

  箭头函数的this   永远指向其上下文的this.

  普通函数的this   则指向调用它的对象

10,下面函数会输出什么?

  var a=10;

  function foo(){

  console.log(a);

  var a =20;

  console.log(this.a);

  }

  foo();

  答案:undefind.   10

  解析:1)变量提升,因为首先会执行函数内部的代码,而var  a 会提升,变成:

  function foo(){

  var a 

  console.log(a);

  a =20;

  }

  所以。。。。

  2)this相当于windows,所以是10

11,JS中怎样检测一个变量是string类型?请写出函数实现

  var a="123"

  console.log(typeof(a))

12,用正则表达式除去字符串空格

  var a=" 23 23 ";

  var b=a.replace(/s*/g,"");

  console.log(b);

13,如何获得浏览器URL查询字符串中的参数?

14,JS怎么添加、删除、查询?

  1)创建新节点:

  createDocumentFragment()  //创建一个DOM片段

  createElement()   //创建一个具体的元素//在指定节点前插入新节点

  createTextNode   //创建一个文本节点

  2)添加,删除,替换,插入

  appendChild()   //添加元素  将创建的节点添加到Id为d的div里

  removeChild()  //删除

  replaceChild()  //替换

  d.insertBefore(p,a);//参数1:要添加的元素 参数2:要放到哪个节点的前面

  3)查找

  getElementById()//根据ID

  getElementByName()//根据属性

   getElementByTagName()//根据标签名称

15,说明下面代码结果,并且说明理由。

  for(var i=1; i<10; i++){

  setTimeout(function(){

  console.log(i);

  },1000)}

  答案:输出9次10,因为setTimeout是异步操作,。。

16,返回值,下面的结果是什么

  function test(){
  console.log(123);
  return
  }
  var a=test();
  console.log(a);

  答案:undefind.没有返回值。

  如果

  function test(){
  console.log(123);
  return
  }
  var a=test();
  console.log(a);
  则返回1.
17,徒手撸一个现在时间:
  var date =new Date();
  var year = date.getFullYear();
  var month = date.getMonth()+1;
  var day = date.getDate();
  var hours = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds(); 
  console.log("现在时间是:"+year+"-"+month+"-"+day+"-"+hours+"-"+minute+"-"+second)
18,闭包是什么?有什么作用
  1)不会垃圾回收
  2)内部声明的函数可以被外部访问
  function f1(){
  var a =1;
  function f2(){
  console.log(a)
  return f2
  }
  var result=f1();
  result()
19,js的new操作符做了哪些事情?
  new操作符新建了一个空对象,这个对象原型指向构造函数的prototype, 执行构造函数后返回这个对象。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/12024108.html