web前端经典面试题整理_web前端面试-CSDN博客

   #parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

web前端经典面试题整理

一、如何区分 HTML 和 HTML5？

DOCTYPE声明\新增的结构元素\功能元素

二、CSS 选择符有哪些？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.子选择器（ul > li）

5.后代选择器（li a）

6.通配符选择器（ * ）

7.属性选择器（a[rel = "external"]）

8.伪类选择器（a: hover, li:nth-child）

三、简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li; 行内元素 : span,a,label,input,img,strong,em;

四，解释css sprites ，如何使用？

五、解释下浮动和它的工作原理？清除浮动的方法

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

2.使用after伪对象清除浮动

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

3.设置overflow为hidden或者auto

4.浮动外部元素

六、CSS隐藏元素的几种方法（至少说出三种）

七、请描述一下cookies，sessionStorage和localStorage的区别？

八、session与窗口的关系

每个session对象都与浏览器一一对应 重新开启一个浏览器，相当于重新创建一个session对象重新开启一个IE窗口，直接访问系统首页面 通过超链接打开的新窗口，新窗口的session与其父窗口的session相同

九、Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout 只执行一次 setInterval 会一直重复执行

十、document.write和innerHTML的区别

十一、前端性能优化的方式

1、减少DOM操作 2、部署前，图片压缩，代码压缩 3、优化js代码结构，减少冗余代码 4、减少http请求，合理设置HTTP缓存 5、使用内容分发cdn加速 6、静态资源缓存 7、图片延迟加载

十二、js有几种数据类型，其中基本数据类型有哪些

五种基本类型: Undefined、Null、Boolean、Number和String。 引用类型: Object、Array和Function。 作者：编码梦想家 https://www.bilibili.com/read/cv10115331/ 出处：bilibili

十三，怎样添加、移除、移动、复制、创建和查找节点？

（1）创建新节点

createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入

appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 （3）查找

getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性

十四、display:none和visibility:hidden区别？

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果， 在文档流中占位，浏览器会解析该元素；

十五、$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。 (2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

十六、xhtml和html的区别

XHTML：可扩展超文本标记语言，XHTML元素必须被正确地嵌套，XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档中元素必须被嵌套于 根元素中。

HTML：超文本标记语言，在HTML中允许一些不规范的写法，HTML对于各大浏览器兼容性较差，现在web前端开发的静态网页，一般都是html4.0。

十七、前端页面有哪三层构成，分别是什么，作用是什么?

表示层:css ，作用：由 CSS 负责创建，CSS对“如何显示有关内容”的问题做出了回答。

行为层：js，作用：负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

**6.通配符选择器（ * ）**

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

　该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

每个session对象都与浏览器一一对应重新开启一个浏览器，相当于重新创建一个session对象重新开启一个IE窗口，直接访问系统首页面通过超链接打开的新窗口，新窗口的session与其父窗口的session相同

五种基本类型: Undefined、Null、Boolean、Number和String。引用类型: Object、Array和Function。作者：编码梦想家 https://www.bilibili.com/read/cv10115331/ 出处：bilibili

createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点（2）添加、移除、替换、插入

appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入（3）查找

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

XHTML：可扩展超文本标记语言，XHTML元素必须被正确地嵌套，XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档中元素必须被嵌套于根元素中。