前端面试考题

原创已于 2022-05-05 17:53:32 修改 · 831 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

于 2022-04-12 18:06:39 首次发布

本文整理了前端面试中常见的HTML、CSS3和HTTP相关问题，包括HTML语义化理解、CSS选择器、优先级算法、display属性、position属性、浮动与清除、媒体查询、响应式设计、JavaScript以及HTTP协议的工作原理和常见状态码等，旨在帮助开发者巩固基础知识，提升面试准备效果。

一、html的面试题

1、简述一下你对 HTML 语义化的理解？

1. 用正确的标签做正确的事情。

2. html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

3 .搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO;

4. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2、Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

两种用法：一种是 id 绑定，一种是嵌套

3、iframe 框架有那些优缺点？

优点：

①iframe 能够原封不动的把嵌入的网页展现出来。

②如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每

一个页面内容的更改，方便快捷。

③网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe来

嵌套，可以增加代码的可重用。

④如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。

缺点：

①框架结构中出现各种滚动条

②iframe 会阻塞主页面的 Onload 事件

③搜索引擎的检索程序无法解读这种页面，不利于 SEO

④iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的

并行加载。

4、HTML 与 XHTML 二者有什么区别，你觉得应该使用哪一个并说出理由。

在使用XHTML,因为XHTML是xL重写了HTML的规范，比HTML更加严格，表现加下:
1、XHTML中所有的标记都必须有一个相应的结束标签;
2、XHTML所有标签的元素和属性的名字都必须使用小写;
3、所有的ML标记都必须合理嵌套;
4、所有的属性都必须用引号“括起来;
5、把所有<和&特殊符号用编码表示;
6、给所有属性附一个值;
7、不要在注释内容中使用“--”;
8、图片必须使用说明文字。

5、HTML5 的 form 如何关闭自动完成功能？

将不想要自动完成的 form 或 input 设置为 autocomplete = off

6、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

title 与 h1 的区别：

title用于网站信息标题，突出网站标题或关键字，一个网站可以有多个title,

h1概括的是文章主题，一个页面最好只用一个h1，title标签高于h1标签
b 与 strong 的区别：

b为了加粗而加粗，b这个标签对应bold, 即文本加粗，其目是为了加粗显示文本，

strong为了标明重点而加粗，

i 与 em 的区别

i 为了斜体而斜体，em为了标明重点而斜体，且对于搜索引擎来说strong和em比b和i 要重视的多

7、每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前；doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。

8、简述一下 src 与 href 的区别

src 用于引用资源，替换当前元素；href 用于在当前文档和引用资源之间确立联系。

href：href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和页面关联，是在当前元素和引用资源之间建立联系

src：src 表示引用资源，替换当前元素，用在 img，script，iframe 上，src 是页面内容不可缺少的一部分

9、前端页面有哪三层构成，分别是什么？作用是什么？

前端页面分成：结构层、表示层、行为层。

1. 结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

2. 表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

3. 行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

10、为什么用多个域名存储网站资源更有效？

1、CDN 缓存更方便

2、突破浏览器并发限制

3、节约 cookie 带宽

4、节约主域名的连接数，优化页面响应速度

5、防止不必要的安全问题

11、div+css 的布局较 table 布局有什么优点？

分离方便改版快清晰简洁

12、请谈一下你对网页标准和标准制定机构重要性的理解

降低开发难度及开发成本，减少各种 BUG、安全问题，提高网站易用性

13、对 WEB 标准以及 W3C 的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

14、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>

15、简述一下你对HTML语义化的理解？

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

二、css3的面试题

1、CSS选择器有哪些？哪些属性可以继承？

CSS选择器：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)

相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

2、CSS优先级算法如何计算？

元素选择符： 1、class选择符： 10、id选择符：100、元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。

如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低。

3、display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

4、position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

5、display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

6、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

7、position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型； float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

8、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

1、父元素的高度无法被撑开，影响与父元素同级的元素

2、与浮动元素同级的非浮动元素（内联元素）会跟随其后

3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1、父级div定义height

2、最后一个浮动元素后加空div标签并添加样式clear:both。

3、包含浮动元素的父标签添加样式overflow为hidden或auto。

4、父级div定义zoom

9、移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

在html中：

在css中写入：

@media only screen and (max-device-width:480px) {/css样式/}

10、CSS优化、提高性能的方法有哪些？

1、避免过度约束

2、避免后代选择符

3、避免链式选择符

4、使用紧凑的语法

5、避免不必要的命名空间

6、避免不必要的重复

7、最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

8、避免！important，可以选择其他选择器

9、尽可能的精简规则，你可以合并不同类里的重复规则

11、style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

12、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。

13、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

1、参数是scroll时候，必会出现滚动条。
2、参数是auto时候，子元素内容大于父元素时出现滚动条。
3、参数是visible时候，溢出的内容出现在父元素之外。
4、参数是hidden时候，溢出隐藏。

14、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？

1、单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

2、::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

15、什么是层叠？

层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

三、js的面试题

四、http协议面试题

1、HTTP工作原理？

HTTP协议工作于客户端-服务端架构上，浏览器作为HTTP客户端通过URL向HTTP 服务端发送所有请求。
web服务器有：Apache 服务器、lls服务器等；
HTTP默认端口号为80，但是也可以改为8080或者其他端口；

2、HTTP的优点和缺点？

优点：

支持客户/服务器模式；
应用广泛且跨平台；
简单快速、灵活；

缺点：

无连接：
无状态：无状态可以减轻服务器负担，但进行关联操作时繁琐，Cookie正好可以解决这个问题
明文传输：调试便利的同时带来了信息易被窃取
不安全:（HTTPS通过引入SSL/TLS层，解决了这个隐患）

3、请求类型Get与Post之间的区别？

1. get重点在从服务器上获取资源，post重点在向服务器发送数据；
2. get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等； post比get安全性较高；
3. get传输数据是通过URL请求，以field（字段）= value的形式，置于URL后，并用"?"连接，多个请求数据间用"&"连接，
post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；
4. Get传输的数据量小，因为受URL长度限制，但效率较高； Post可以传输大量数据，所以上传文件时只能用Post方式；
5. get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。 post支持标准字符集，可以正确传递中文字符。

4、HTTP与HTTPS的区别？

HTTPS：是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于 TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。

区别：

HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。HTTP和HTTPS 使用完全不同的连接方式，所用的端口不同，前者是80 端口，后者是 443端口

5、HTTP常见的字段有哪些？

1. URI 和 URL

URI：统一资源标识符，不仅可以标识http，ftp等其他的网络资源
URL：统一资源定位符

2. 请求头

GET ：获取一个资源，同时参数直接跟在URL后面,url长度受限制2048字节
POST：不仅可以获取资源，还可以提交资源（譬如上传文件），参数放在请求体中，包大小4G
HEAD：只要响应头，没有响应体，通常用于测试URL是否存在
DELETE：删除一个资源
PUT：通常修改一个资源

3. 响应头

Content-Length：响应体的长度
Server：服务器的信息
Content-Type：内容的类型，text／html，xml等
Last-Modified ：最有的修改日期，通常跟缓存相关 20151108
Location：新的地址

4. 响应码

200 OK 访问正常
206 跟断点续传相关
3XX 重定向：Location
304 缓存有效
307 临时重定向
4XX 客户端问题
401 代表没有权限访问
404 代表访问的资源不存在
5XX 通常服务器内部处理的问题

6、常见HTTP的状态码有哪些？

200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误

7、什么是HTTP？

HTTP 协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议；
HTTP 是一个基于TCP/IP通信协议来传递数据(HTML文件、图片文件、查询结果等)；

8、什么是长连接、短连接？

短链接：

在HTTP/1.0中默认使⽤短连接。也就是说，客户端和服务器每进⾏⼀次HTTP操作，就建⽴⼀次连接，任务结束就中断连接。再次访问时浏览器就会重新建⽴⼀个HTTP会话。

长连接：

从HTTP/1.1起，默认使⽤长连接。使⽤长连接的HTTP协议，会在响应头加⼊这⾏代码：Connection:keep-alive
在使⽤长连接的情况下，当⼀个⽹页打开完成后，客户端和服务器之间⽤于传输 HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使⽤这⼀条已经建⽴的连接。Keep-Alive不会永久保持连接，它有⼀个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都⽀持长连接。

9、Cookie 和 Session 的区别？

Cookie数据存放在客户的浏览器上，Session数据放在服务器上。 Session中保存的是对象，cookie中保存的是字符串。 Cookie的安全性⼀般，他⼈可通过分析存放在本地的Cookie并进⾏Cookie欺骗。在安全性第⼀的前提下，选择Session更优。Session 可以放在⽂件、数据库或内存中。

10、HTTP注意事项
HTTP是⽆连接的，含义是限制每次连接只处理⼀个请求。服务端处理完客户的请求之后，并且受到回复之后就断开连接。
HTTP是媒体独⽴的。只要客户端和服务端知道如何处理数据内容，任何类型的数据都可以通过HTTP发送
HTTP是⽆状态的，HTTP协议是⽆状态协议，指的是对事务处理没有记忆能⼒。缺少状态意味着如果后续处理需要前⾯的数据就必须重传。