前端HTML面试题我的总结

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

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

二、xhtml和html的区别

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

三、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 事件来接收服务器返回的数据。

四、介绍cookie

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

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

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

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

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

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

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

八、HTML5的声明

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

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

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

十、说一下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资源支持不了这种消耗。

十一、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。

十二、说一下HTML5 drag API

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

1三、基本状态码

• 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协议的版本，没法完成处理

1四、 fetch发送2次请求的缘由

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

1五、说一下web worker

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

• 如何建立web worker：

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

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

  建立web worker对象

1六、iframe是什么？有什么缺点？

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

• 缺点：

  会阻塞主页面的onload事件

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

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