web前端面试题集锦及答案解析资源-CSDN下载

5星 · 超过95%的资源需积分: 17 93 浏览量 2016-05-10 23:19:20 上传评论 2 收藏 454KB PDF 举报

### Web前端面试题集锦及答案解析 #### HTML与HTTP相关知识点 1. **SEO优化技巧**： - **合理的Title、Description、Keywords**：在搜索引擎优化中，这三者的重要性逐渐递减。Title应强调重点，关键词重复次数不超过两次且需置于前面，不同页面的Title应有所差异。Description需简明扼要地概括页面内容，避免过度堆砌关键词，不同页面的Description也应有所不同。Keywords只需列出重要的关键词即可。 - **语义化的HTML代码**：采用符合W3C规范的语义化代码有助于搜索引擎更好地理解网页内容。 - **重要内容HTML代码优先放置**：搜索引擎抓取HTML文档时遵循自上而下的顺序，部分搜索引擎可能对抓取长度有限制，因此确保重要内容能被完整抓取至关重要。 - **重要内容不宜使用JavaScript输出**：许多爬虫不执行JavaScript来获取内容，因此关键信息应直接包含在HTML文档中。 - **减少iframe的使用**：搜索引擎往往不抓取iframe中的内容。 - **非装饰性图片添加alt属性**：对于非装饰性的图片，必须为其添加有意义的alt属性，以提高可访问性和搜索引擎的识别度。 - **提高网站加载速度**：网站响应速度是影响搜索引擎排名的重要因素之一。 2. **Web会话跟踪方法**： - **Cookie**：一种存储于客户端的小型文本文件，常用于用户认证和状态管理。 - **Session**：服务器端存储的一种机制，用于跟踪用户的会话信息。与cookie相比，它更安全但效率较低。 - **URL重写**：通过修改URL参数来传递会话信息，适用于不支持cookie的情况。 - **隐藏表单字段**：将会话ID嵌入HTML表单中的隐藏字段内，适合表单提交场景。 - **IP地址**：根据用户的IP地址来追踪会话，这种方法不太准确且容易受攻击。 3. **`<img>`标签的Title与Alt属性的区别**： - **Title属性**：用于提供额外的辅助信息，当鼠标悬停在元素上时通常会显示出来。 - **Alt属性**：专用于`<img>`标签，提供图片内容的替代描述。在图片无法加载时显示，对于屏幕阅读器用户非常重要，同时也有助于提高网站的搜索引擎优化效果。 4. **Doctype的作用与常见类型**： - **作用**：`<!doctype>`位于HTML文档的头部，在`<html>`标签之前，用于告知浏览器当前文档使用的HTML版本。 - **特点**： - HTML5中的`<!doctype>`不区分大小写。 - 不是一个HTML标签，而是一个指令。 - 浏览器通过`<!doctype>`决定使用兼容模式还是标准模式来渲染文档。 - 在HTML4.01中，`<!doctype>`指向一个DTD（Document Type Definition），因为HTML4.01基于SGML，DTD定义了文档的结构和语法。 - HTML5不基于SGML，因此无需指定DTD。 - **常见类型**： - **HTML4.01 Strict**：禁止使用表现性或废弃元素（例如`<font>`），不允许使用`frameset`。示例：`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">` - **HTML4.01 Transitional**：允许使用表现性或废弃元素（例如`<font>`），但不允许使用`frameset`。示例：`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">` - **HTML4.01 Frameset**：允许使用表现性元素、废弃元素及`frameset`。示例：`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">` - **XHTML 1.0 Strict**：不允许使用表现性或废弃元素，要求文档为良好的XML格式。示例：`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">` - **XHTML 1.0 Transitional**：允许使用表现性或废弃元素，但不允许使用`frameset`，同样要求文档为良好的XML格式。示例：`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` - **XHTML 1.0 Frameset**：允许使用表现性或废弃元素及`frameset`，同样要求文档为良好的XML格式。示例：`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">` - **HTML5**：示例：`<!DOCTYPE html>`，简洁明了，无需额外的DTD引用。通过上述知识点的总结，我们可以看到这些基础概念和技术细节对于前端开发者来说是非常重要的。在实际项目开发过程中，了解并掌握这些技术能够帮助开发者编写出更加高效、安全、易于维护的代码。此外，对于SEO优化的关注也有助于提升网站的用户体验和搜索引擎排名。

资源推荐

资源详情

资源评论

前端面试题集锦及答案解析

FE-interview

个人收集的前端知识点、面试题和答案，参考答案仅代表个人观点，方便复习。

HTML，， HTTP，，web综合问题综合问题

常见排序算法的时间复杂度常见排序算法的时间复杂度,空间复杂度空间复杂度

前端需要注意哪些前端需要注意哪些SEO

1. 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键

词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度

合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3. 重要内容HTML代码放在最前：搜索引擎抓取HTMl顺序是从上到下，有的搜索引擎对抓取长度有限

制，保证重要内容一定会被抓取

4. 重要内容不要用js输出：爬虫不会执行js获取内容

5. 少用iframe：搜索引擎不会抓取iframe中的内容

6. 非装饰性图片必须加alt

7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

web开发中会话跟踪的方法有哪些开发中会话跟踪的方法有哪些

1. cookie

2. session

3. url重写

4. 隐藏input

5. ip地址

<img>的的title和和alt有什么区别有什么区别

1. title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的

时候显示。

2. alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图

片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

doctype是什么是什么,举例常见举例常见doctype及特点及特点

1. <!doctype>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写

2. <!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令

3. 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏

览器有一个接近标准模型。

4. 在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则

以保证浏览器正确渲染内容

5. HTML5不基于SGML，所以不用指定DTD

常见常见dotype：：

1. HTML4.01 strict：不允许使用表现性、废弃元素（如font）以及frameset。声明：<!DOCTYPE HTML

PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. HTML4.01 Transitional:允许使用表现性、废弃元素（如font），不允许使用frameset。声

明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

3. HTML4.01 Frameset:允许表现性元素，废气元素以及frameset。声明：<!DOCTYPE HTML PUBLIC "-

//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

4. XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声

明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

5. XHTML1.0 Transitional:允许使用表现性、废弃元素，不允许frameset，文档必须是结构良好的XMl文

档。声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6. XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset，文档必须是结构良好的XML文档。声

明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

frameset.dtd">

7. HTML 5:<!doctype html>

HTML全局属性全局属性(global attribute)有哪些有哪些

参考资料：MDN: html global attribute或者W3C HTML global-attributes

accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素

class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素

contenteditable: 指定元素内容是否可编辑

contextmenu: 自定义鼠标右键弹出菜单内容

data-*: 为元素增加自定义属性

dir: 设置元素文本方向

draggable: 设置元素是否可拖拽

dropzone: 设置元素拖放类型： copy, move, link

hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果

id: 元素id，文档内唯一

lang: 元素内容的的语言

spellcheck: 是否启动拼写和语法检查

style: 行内css样式

tabindex: 设置元素可以获得焦点，通过tab可以导航

title: 元素相关的建议信息

translate: 元素和子孙节点内容是否需要本地化

什么是什么是web语义化语义化,有什么好处有什么好处

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。

HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构

css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合

规则的class描述信息

为什么需要语义化：

去掉样式后页面呈现清晰的结构

盲人使用读屏器更好地阅读

搜索引擎更好地理解页面，有利于收录

便团队项目的可持续运作及维护

HTTP method

1. 一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可

2. GET是最常用的方法，通常用于请求服务器发送某个资源。

3. HEAD与GET类似，但服务器在响应中值返回首部，不返回实体的主体部分

4. PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经

存在的话，就用干这个主体替代它

5. POST起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据

通常会被送给服务器，然后由服务器将其发送到要去的地方。

6. TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主

体中携带它收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应

链。

7. OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊

资源支持哪些方法。

8. DELETE请求服务器删除请求URL指定的资源

从浏览器地址栏输入从浏览器地址栏输入url到显示页面的步骤到显示页面的步骤(以以HTTP为例为例)

1. 在浏览器地址栏输入URL

2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤

如果资源未缓存，发起新请求

如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。

检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：

HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期

HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间

3. 浏览器解析URL获取协议，主机，端口，path

4. 浏览器组装一个HTTP（GET）请求报文

5. 浏览器获取主机ip地址，过程如下：

浏览器缓存

本机缓存

hosts文件

路由器缓存

ISP DNS缓存

DNS递归查询（可能存在负载均衡导致每次IP不一样）

6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：

客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口

服务器发回SYN=1， ACK=X+1， Seq=Y的响应包

客户端发送ACK=Y+1， Seq=Z

7. TCP链接建立后发送HTTP请求

8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程

序

9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码

10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作

11. 服务器将响应报文通过TCP连接发送回浏览器

12. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如

下：

主动方发送Fin=1， Ack=Z， Seq= X报文

被动方发送ACK=X+1， Seq=Z报文

被动方发送Fin=1， ACK=X， Seq=Y报文

主动方发送ACK=Y， Seq=X报文

13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同

14. 如果资源可缓存，进行缓存

15. 对响应进行解码（例如gzip压缩）

16. 根据资源类型决定如何处理（假设资源为HTML文档）

17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺

序，以下分别解释

18. 构建DOM树：

Tokenizing：根据HTML规范将字符流解析为标记

Lexing：词法分析将标记转换为对象并定义属性和规则

DOM construction：根据HTML标记关系将对象组成DOM树

19. 解析过程中遇到图片、样式表、js文件，启动下载

20. 构建CSSOM树：

Tokenizing：字符流转换为标记流

Node：根据标记创建节点

CSSOM：节点创建CSSOM树

21. 根据DOM树和CSSOM树构建渲染树:

从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。

2)被css隐藏的节点，如display: none

对每一个可见节点，找到恰当的CSSOM规则并应用

发布可视节点的内容和计算样式

22. js解析如下：

浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时

document.readystate为loading

HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚

本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用

document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们

可以遍历和操作script和他们之前的文档内容

当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成

后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访

问自己script和之前的文档元素

当文档完成解析，document.readState变成interactive

所有difer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用

document.write()

浏览器在Document对象上触发DOMContentLoaded事件

此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有

异步脚本完成载入和执行，document.readState变为complete,window触发load事件

23. 显示页面（HTML解析过程中会逐步显示页面）

HTTP request报文结构是怎样的报文结构是怎样的

rfc2616中进行了定义：

1. 首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF

2. 首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以

CRLF结束

3. 请求头和消息实体之间有一个CRLF分隔

4. 根据实际请求需要可能包含一个消息实体

一个请求报文例子如下：

剩余81页未读，继续阅读

评论收藏

内容反馈

枭龙

2016-11-02

非常不错，看了一部分了。

臧瑟

粉丝: 0

web前端面试题集锦及答案解析

前端面试题汇总

前端面试题大全

web前端面试题(全)

前端开发面试题（含答案）

前端面试题

Web前端开发经典面试题（附参考答案）

WEB前端面试选择题解答（共36题）.pdf

JavaScript onkeydown事件入门实例(键盘某个按键被按下)

2019年前端面试宝典

前端面试题整理

web前端面试题

常见前端面试题及答案

web-topic:前端面试题目合集

2021年最新Web前端面试题精选大全及答案_HanXiaoXi_yeal的博客-CSDN博客_前端面试题2021及答案.html

百度web前端面试题

2023最新100道MySQL面试题（ 附答案解析）

前端开发面试题及答案.zip

web前端面试题(及答案).pdf

web前端面试题及答案【前端开发面试题及答案整理】.docx

经典web前端面试题

最新web前端面试题(及答案).docx

web前端5大类型面试题汇总

WEB面试题汇总

linux安装mysql数据库

2018嵌入式系统设计师软考.zip

最新资源

2023最新100道MySQL面试题（附答案解析）