HTTP、HTML、WEB综合面试题

一、HTTP的几种请求方法用途

1、GET方法 发送一个请求来取得服务器上的某一资源

2、POST方法 向URL指定的资源提交数据或附加新的数据

3、PUT方法 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有

4、HEAD方法 只请求页面的首部

5、DELETE方法 删除服务器上的某资源

6、OPTIONS方法 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息

7、TRACE方法 TRACE方法被用于激发一个远程的，应用层的请求消息回路

8、CONNECT方法 把请求连接转换到透明的TCP/IP通道

二、如何进行网站性能优化

进行网站性能优化有：1、content方面，减少HTTP请求，减少DNS查询，避免重定向；2、Server方面，使用CDN，使用Gzip压缩，避免空src的img标签；3、cookie方面，减小Cookie。

1、Content方面

（1）减少HTTP请求：合并文件、CSS精灵、inline image

（2）减少DNS查询： DNS查询完之前浏览器不能从这个主机下载任何文件、方法：DNS缓存、讲资源分布到恰当的数量的主机名，平衡并行下载和DNS查询

（3）避免重定向 ： 多余的中间访问

（4）使用AJAX缓存

（5）非必须组件延迟加载

（6）未来所需组件预加载

（7）减少DOM元素数量

（8）将资源放到不同的域下面：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量

（9）减少iframe数量

2、Server方面

（1）使用CDN

（2）添加Expires或者Cache-Control： 当Cache-Control和Expires同时存在时，Cache-Control会覆盖Expires。相关链接

（3）使用Gzip压缩

（4）配置Etag

（5）Flush Buffer Early

（6）Ajax使用GET进行请求

（7）避免空src的img标签

3、Cookie方面

（1）减小Cookie

（2）引入资源的域名不要包含cookie

4、CSS方面

（1）将样式表放到顶部

（2）不要使用CSS表达式

（3）不使用@import

（4）不使用IE的Filter

5、JavaScript

（1）将脚本放到页面的底部

（2）将JavaScript和CSS从外部引入

（3）压缩JavaScript和CSS

（4）删除不需要的脚本

（5）减少DOM的查询

（6）合理设计事件监听器

6、图片方面

（1）优化图片： 根据实际颜色需要选择色深、压缩

（2）优化CSS精灵

（3）不要在HTML中拉伸图片

（4）保证favicon、ico小并且可缓存

7、移动方面

（1）保证组件小于25K

（2）Pack Components into a Multipart Document

三、HTTP状态码及其含义

一些常见的状态码为：

200 - 服务器成功返回网页

404 - 请求的网页不存在

503 - 服务器超时

四、htmI5有哪些新特性、移除了那些元素?

新特性：

（1） HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加 （2）拖拽释放(Drag and drop) API

（3） 语义化更好的内容标签（header,nav,footer,aside,article,section）

（4）音频、视频API(audio,video)

（5）画布(Canvas) API

（6）地理(Geolocation) API

（7）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

（8） sessionStorage 的数据在页面会话结束时会被清除

（9） 表单控件，calendar、date、time、email、url、search

（10） 新的技术webworker, websocket等

移除的元素：

（1） 纯表现的元素：basefont，big，center, s，strike，tt，u

（2）对可用性产生负面影响的元素：frame，frameset，noframes

五、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

（1）在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 ​

（2）离线的情况下，浏览器就直接使用离线存储的资源。

六、请描述一下 cookies,sessionStorage 和 localStorage的区别?

相同点： 都是在客户端保存数据的，存储数据的类型都是字符串

不同点： 生命周期：

1）、cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后， cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。

2）、localStorage的生命周期是永久的，除非主动删除数据，否则数据永远不会消失。

3）、sessionStorage，可以理解成没有设置有效期的cookie，也是会话级别的，只要浏览器窗口不关 闭，数据就会一直存在

大小限制：

cookie大小限制在4KB，非常小；webstorage在5M

网络流量：

cookie的数据每次都会发给服务器端，webstorage不会与服务器端通信，所以，webstorage更加节约网络流量。

安全性： WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会 担心截获。

使用方便性上： WebStorage提供了一些方法，数据操作比cookie方便；

七、iframe有那些缺点?

1、iframe会阻塞主页面的Onload事件；

⒉、iframe和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载；

⒊、使用iframe之前需要考虑这两个缺点，如果需要使用iframe，最好是通过JavaScript；

⒋、动态给iframe添加src属性值，这样可以可以绕开以上两个问题

⒌、不利于seo

⒍、代码复杂，无法一下被搜索引擎索引到

7、iframe框架页面会增加服务器的http请求，对于大型网站不可取

⒏、很多的移动设备无法完全显示框架，设备兼容性差

八、WEB标准以及W3C标准是什么?

web标准：将结构、表现、行为分离，使其更具有模块化。

w3c标准：标签字母要小写，双标签要闭合，标签不允许随意嵌套。 　　　　尽量使用外部样式和外链js，使结构、表现、行为分为三块，这样可以提高页面渲染速度。 　　　　样式尽量少用行内样式，id和class名要做到见名知意。 　　　　不需要变动页面内容，便可提供打印版本，不需要提供复制内容，提高网站易用性。

九、xhtml和 html有什么区别?

1、其基础语言不同

（1）XHTML是基于可扩展标记语言（XML）。

（2）HTML是基于标准通用标记语言（SGML）。

2、语法严格程度不同

（1）XHTML语法比较严格，存在DTD定义规则。

（2）HTML语法要求比较松散，这样对网页编写者来说，比较方便。

3、可混合应用不同

（1）XHTML可以混合各种XML应用，比如MathML、SVG。

（2）HTML不能混合其它XML应用。

4、大小写敏感度不同

（1）XHTML对大小写敏感，标准的XHTML标签应该使用小写。

（2）HTML对大小写不敏感。

5、公布时间不同

（1）XHTML是2000年W3C公布发行的。

（2）HTML4.01是1999年W3C推荐标准。

十、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

1、Doctype作用是什么？​

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。​

2、严格模式与混杂模式如何区分？它们有何意义？

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式） 2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式） 4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

十一、行内元素有哪些?块级元素有哪些?空(void)元素有那些?行内元素和块级元素有什么区别?

行内元素有哪些？

• a - 锚点

• em - 强调

• img - 图片

• font - 字体设定 ( 不推荐 )

• i - 斜体

• input - 输入框

块级元素有哪些？

• address - 地址

• blockquote - 块引用

• center - 举中对齐块

• dir - 目录列表

• div - 常用块级容易，也是 css layout 的主要标签

• fieldset - form控制组

• p - 段落

空(void)元素有哪些？

• 换行

• ​分隔线​

• <input> 文本框等

• <img> 图片

• <link> <meta>

行内元素和块级元素有什么区别？

• 区别一：

　　　　块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度

　　　　行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

• 区别二：

　　　　块级：块级元素可以设置宽高

　　　　行内：行内元素不可以设置宽高

• 区别三：

　　　　块级：块级元素可以设置margin，padding

　　　　行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

• 区别四：

　　　　块级：display:block;

　　　　行内：display:inline;

可以通过修改display属性来切换块级元素和行内元素

十二、Canvas 和 SVG有什么区别?

svg是什么？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 用来定义用于网络的基于矢量的图形。 SVG 使用 XML 格式定义图形。 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。 SVG 是万维网联盟的标准。 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

canvas是什么？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

知道了svg和canvas是什么之后，我们就来比较一下canvas和svg。

canvas和svg的区别比较：

首先我们从时间上看canvas与svg的区别：

canvas是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，已经有十几年了。

svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

其次我们从功能上看canvas与svg的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

最后我们来看canvas与svg技术应用上的比较：

canvas依赖分辨率。 canvas支持事件处理器。 canvas最适合带有大型渲染区域的应用程序（比如谷歌地图）。 canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。 canvas不适合游戏应用。

svg不依赖分辨率。 svg不支持事件处理器。 svg弱的文本渲染能力。 svg能够以 .png 或 .jpg 格式保存结果图像。 svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

十三、HTML5为什么只需要写<!DOCTYPE HTML>?

html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。