经典前端面试题总结！！！

爱创乐育知识速递

于 2021-04-26 16:47:03 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏：前端前端面试题文章标签：面试题 js css css3 前端Web

本文链接：https://blog.csdn.net/icktpxcls/article/details/116160852

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

前端面试题

9 篇文章

订阅专栏

本文深入探讨前端开发中的关键概念，包括DOCTYPE的三种类型，CSS选择符及其优先级算法，以及CSS3新增的伪类选择器。同时，解释了HTTP和HTTPS的区别与安全性，特别是HTTPS在数据传输中的保护作用。此外，详细阐述了AJAX的工作流程，以及作用域链在JavaScript中的应用。最后，对比了XML和JSON在数据体积、交互性、描述性和传输速度上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

二、CSS 选择符有哪些？优先级算法如何计算？ CSS3新增伪类有那些？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（lia）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

优先级为:
!important > id > class > tag
important 比内联优先级高,但内联比 id 要高
CSS3新增伪类举例：
p:first-of-type选择属于其父元素的首个p元素的每个 p 元素。
p:last-of-type 选择属于其父元素的最后p元素的每个p元素。
p:only-of-type 选择属于其父元素唯一的p元素的每个p元素。
p:only-child 选择属于其父元素的唯一子元素的每个p元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

三、HTTP和HTTPS

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。

为什么HTTPS安全？
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性，所以HTTPS比HTTP安全。

四、说一下创建ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

五、说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

六、XML和JSON的区别？

(1).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。

今天的分享就到这里了，想学习前端、了解前端知识，欢迎大家关注，私信我！！！