前端HTML面试题个人总结

1、对web标准以及W3C的理解和认识

• 标签闭合、标签小写，不乱嵌套，使用外链css和js脚本，文件下载和页面加载速度更快，容易维护和修改，提高了网站易用性

2、xhtml和html的区别

• XHTML：可扩展超文本标记语言，XHTML元素必须被正确地嵌套，XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档中元素必须被嵌套于 根元素中。
• HTML：超文本标记语言，在HTML中允许一些不规范的写法，HTML对于各大浏览器兼容性较差，现在web前端开发的静态网页，一般都是html4.0，HTML5就另当别论了。

3、HTML5的新特性

• 标签语义化<header></header>、<footer></footer>等等
• 增加多个表单输入类型、表单元素、表单属性
• Canvas绘图，Canvas 通过 JavaScript 来绘制 2D 图形。
• SVG绘图，SVG是指可伸缩的矢量图形，SVG 是一种使用 XML 描述 2D 图形的语言。
• 地理定位，Geolocation 用于定位用户的位置
• 拖放API，任何元素都能够拖放 drag
• Web Worker，web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
• Web Storage，本地存储用户的浏览数据
• WebSocket，一种在单个 TCP 连接上进行全双工通讯的协议，浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据，当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

4、介绍cookie

• Cookie一词用在程序设计中是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。从本质上讲，它可以看作是你的身份证，硬盘中的Cookies属于文本文件，不是程序。
• cookie 常用于识别用户。cookie 是一种服务器留在用户计算机上的小文件。每当同一台计算机通过浏览器请求页面时，这台计算机将会发送 cookie。通过 PHP，您能够创建并取回 cookie 的值。
• 补充说明一下cookie的作用：
  保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
  跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

5、说一下都有哪些本地存储方式，区别是什么？

特性	cookie	sessionStorage	localStorage
生命周期	可设置失效时间，没有设置的话，默认是关闭浏览器后失效	当用户关闭浏览器窗口后，数据会被删除	数据可以永久保存，除非手动清除
存放数据大小	不能超过4KB左右	可以保存5MB的信息甚至更大	可以保存5MB的信息甚至更大
http请求	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信

6、Doctype作用?严格模式和混杂模式的区分，以及如何触发和区分这2种模式?

• Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
  严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。
  混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
• 严格模式：又称标准模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。
• 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
• 如何触发：触发标准模式或者说严格模式很简单，就是Html前申明正确的DTD，出发混杂模式可以在html文档开始不声明DTD，或者在DOCTYPE前加入XML声明。
• 如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
  1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
  2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
  3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
  4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

7、常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解

• Trident内核：IE
• Gecko内核：NETSCAPE6及以上版本，火狐
• Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]
• Webkit内核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]
  浏览器内核又可以分成两部分：渲染引擎和JS引擎。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。

8、HTML5的声明

• HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
• 所以HTML5 只需要写<!DOCTYPE>

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

• 结构层：html ；作用：由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
• 表示层:css ，作用：由 CSS 负责创建，CSS对“如何显示有关内容”的问题做出了回答。
• 行为层：js，作用：负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

10、说一下http和https

• http和https的基本概念

  • http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
  • https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性

• http和https的区别？

  • http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

  • 主要的区别如下：

    Https协议需要ca证书，费用较高。

    http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

    使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443，http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

• https协议的工作原理

  • 客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如下所示：

    客户使用https url访问服务器，则要求web 服务器建立ssl链接。

    web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。

    客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。

    客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。

    web服务器通过自己的私钥解密出会话密钥。

    web服务器通过会话密钥加密与客户端之间的通信。

• https协议的优点

  • 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
  • HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
  • HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
  • 谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

• https协议的缺点

  • https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。
  • https缓存不如http高效，会增加数据开销。
  • SSL证书也需要钱，功能越强大的证书费用越高。
  • SSL证书需要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种消耗。

11、WebSocket的理解

• 什么是WebSocket?

  WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个

• WebSocket是什么样的协议，具体有什么优点？

  HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。

  WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现，基本是2个属性，upgrade，connection。

12、说一下HTML5 drag API

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发.
• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
• dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
• dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

13、基本状态码

• 100 Continue 继续。客户端应继续其请求
• 101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到 更高级的协议，例 如，切换到HTTP的新版本协议
• 200 OK 请求成功。一般用于GET与POST请求
• 201 Created 已创建。成功请求并创建了新的资源
• 202 Accepted 已接受。已经接受请求，但未处理完成
• 203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在 原始的服务器，而 是一个副本
• 204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下， 可确保浏览器继续 显示当前文档
• 205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文 档视图。可通过此 返回码清除浏览器的表单域
• 206 Partial Content 部分内容。服务器成功处理了部分GET请求
• 300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特 征与地址的列表用 于用户终端（例如：浏览器）选择
• 301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息 会包括新的URI，浏 览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
• 302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原URI
• 303 See Other 查看其它地址。与301类似。使用GET和POST请求查看
• 304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回 任何资源。客户端通 常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回 在指定日期之后修改的资源
• 305 Use Proxy 使用代理。所请求的资源必须通过代理访问
• 306 Unused 已经被废弃的HTTP状态码
• 307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向
• 400 Bad Request 客户端请求的语法错误，服务器无法理解
• 401 Unauthorized 请求要求用户的身份认证
• 402 Payment Required 保留，将来使用
• 403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
• 404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站 设计人员可设置"您 所请求的资源无法找到"的个性页面
• 405 Method Not Allowed 客户端请求中的方法被禁止
• 406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
• 407 Proxy Authentication Required 请求要求代理的身份认证，与401类似，但请求 者应当使用代理进行 授权
• 408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
• 409 Conflict 服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生 了冲突
• 410 Gone 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永 久删除了可使用410 代码，网站设计人员可通过301代码指定资源的新位置
• 411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息
• 412 Precondition Failed 客户端请求信息的先决条件错误
• 413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝起请 求。为防止客户端 的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理， 则会包含一个Retry-After的响应信息
• 414 Request-URI Too Large 请求的URI过长（URI通常为网址），服务器无法处理
• 415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
• 416 Requested range not satisfiable 客户端请求的范围无效
• 417 Expectation Failed 服务器无法满足Expect的请求头信息
• 500 Internal Server Error 服务器内部错误，无法完成请求
• 501 Not Implemented 服务器不支持请求的功能，无法完成请求
• 502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接 收到了一个无效的响应
• 503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请 求。延时的长度可包含 在服务器的Retry-After头信息中
• 504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
• 505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理

14、 fetch发送2次请求的原因

• fetch发送post请求的时候，总是发送2次，第一次状态码是204，第二次才成功，是因为 用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否 支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

15、说一下web worker

• 在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

• 如何创建web worker：

  检测浏览器对于web worker的支持性

  创建web worker文件（js，回传函数等）

  创建web worker对象

16、iframe是什么？有什么缺点？

• iframe元素会创建包含另一个文档的内联框架，可以将提示文字放在<iframe></iframe>之间，来提示某些不支持iframe的浏览器

• 缺点：

  会阻塞主页面的onload事件

  搜索引擎无法解读这种页面，不利于SEO

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