经典web前端面试题，让你在面试中脱颖而出

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。

WEB前端开发虽然前景好，但竞争也不小。尤其是前端这种技术岗位，会经历几轮面试，想要从众多候选人中脱颖而出并不容易。接下来，给大家分享10个最常见的web前端面试及答案，助你顺利过面试。

Q：什么是 HTML5?

A：HTML5是HTML（超文本标记语言）的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。

WHATWG（Web超文本应用技术工作组）另一次W3C个人聚会认为，W3C没有认真考虑当前方言的现实改进需求，它已经开始处理HTML-HTML5的新确定。因此，HTML5是HTML 4.01和XHTML 1.0的另一种改编，它集中于Web应用程序设计者的必要性上，并且还倾向于在当前细节中发现的问题。

Q：什么是<！DOCTYPE >？是否需要在HTML5中使用？

A：<！DOCTYPE>是关于页面写入了什么版本的HTML的指令。<！DOCTYPE>标记没有结束标记，它不区分大小写。

<！DOCTYPE>声明必须是HTML5文档中的第一行，在标记之前。如HTML 4.01，全部<！DOCTYPE>声明需要引用文档类型定义（DTD），因为HTML 4.01是基于标准通用标记语言（SGML）的。而HTML5并不基于SGML，因此不需要对文档类型定义（DTD）的引用。

Q：HTML5有哪些的新特性？

A：HTML5中最有趣的新特性：

• 二维画图中的元素

• 媒体播放的 和元素

• 支持本地存储

• 新的内容特定元素，如

  ，

  ，

  ，

  ，

  ，

Q：HTML5的优势有哪些？

A：一些网络研究的前5名似乎提供了以下HTML5特性；

• 相关性

• 标记/代码简洁

• 语义清晰

• 简明的表单和网络应用程序

• 缓存式离线应用程序

Q：Canvas是什么？怎样写Canvas？

A：Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。

如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。

Q：HTML5地理定位是什么？如何使用？

A：HTML5 地理定位用于定位用户的位置

HTML5 地理定位API用于获取用户的地理位置。

由于这会侵犯用户隐私，除非用户批准，否则该位置不可用。

使用 getCurrentPosition() 方法获取用户的位置。

下面的示例是返回用户位置的纬度和经度的简单地理定位示例：

Q：使用HTML5需要遵守哪些规则？

A：* 新的特性应该基于HTML、CSS、DOM和JavaScript

• 减少对外部插件的需求（如Flash）

• 更好的错误处理

• 更多的替换脚本的标记

• HTML5应与设备无关

• 开发过程必须可视化

Q：HTML5中的Session storage存储对象是什么？如何创建和访问？

A：Session storage 存储对象存储一个会话的数据。当用户关闭浏览器窗口时，数据将被删除。如下所示，我们可以在这里创建“blogName”作为会话并访问Session storage

Q：Html5应用程序缓存和Html浏览器缓存有什么区别？

A：新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产，如HTML文件、图像、CSS、JavaScript等。对于获取此内容，用户以前没有必要访问此内容。换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规浏览器缓存中不可用。预取文件可以加速站点的性能，尽管您最初使用带宽下载这些文件。

Q：简要描述下最新的HTML5标准中的API是什么？

A：下面是HTML 5标准提供的新API列表。

• Canvas ：Canvas 由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域，这与其他常见的2DAPI类似，因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。

• 定时媒体回放

• 离线存储数据库

• 文档编辑

• 拖放

• 跨文档消息传递

• 浏览器历史管理

• MIME类型和协议处理程序注册