原创 前端HTML面试题汇总附参考答案

前端的核心技术就是有结构、表现和行为三部分构成的，模式是HTML、CSS和JavaScript。HTML又叫超文本标记语言，HTML语言可以制作网页。对于前端面试者来说，HTML是几乎一项必考的知识点。因此小编汇总了前端的HTML面试题，希望能帮助求职者牢牢掌握这方面的知识点。

 

1.HTML5 特性有哪些？语义化的做法有哪些，具体指的什么？

新特性常用解释如下：

（1）多媒体，用于媒介回放的 video 和 audio 元素。

（2）图像效果，用于绘画的 canvas 元素，svg 元素等。

（3）离线 & 存 储 ， 对 本 地 离 线 存 储 能 够 更 好 地 支 持 ， 比 如 localstorage,Cookies 等。

（4）设备兼容特性，HTML5 提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连。

（5）连接特性，更有效的连接工作效率，使得基于页面的实时聊天， 更快速的网页游戏体验，更优化的在线交流得到了实现，同时拥有更有效的服务器推送技术，Server-Sent Event 和 WebSockets 就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据 “推送”到客户端的功能。

（6）性能与集成特性，HTML5 会通过 XML HttpRequest2 等技术，帮助 Web 应用和网站在多样化的环境中更快速地工作。

新增标签（ 常用 ）：

（1）多媒体：<audio> <video> <source><embed><track>

（2）新表单元素：<datalist> <output> <keygen>

（3）新文档节段和纲要：<header>页面头部 <section>章节 <aside> 边栏<article>文档内容 <footer>页面底部

语义化具体指以下内容：

（1）语义特性，添加<header></header><nav></nav>等标签

（2）为了在没有 css 代码时，也能呈现很好的内容结构，代码结构， 以至于达到没有编程基础的非技术人员，也能看懂其代码

2.XHTML 与 HTML 有什么区别 ？

XHTML 元素必须被正确的嵌套；XHTML 元素必须被关闭；标签名必须用小写字母；XHTML 文档必须拥有根元素。

3.为什么要在标签上使用 data-, 它有什么好处了 ？

（1）html5 规范中规定自定义属性需要添加前缀 data-,目的是提供与 渲染无关的信息

（2）使用 getAttribute（）方法以及 setAttribute()方法操作自定义属 性

（3）使用 dataset 操作自定义属性。

（4）dataset 属性的兼容性问题， Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera11.10+ Safari 6+ 以上浏览器均能很好支持，想要知道更多的兼容信息，可以访问右边的二维码。

（5）使用 data-属性选择器好处：绑定 DOM 强相关数据，js 传递数据。

4.Meta 标签，都有一些什么特性，有什么作用 ？

meta 的作用:meta 里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的 HTTP 头部内容。

5.什么是 Canvas，你使用它做个什么需求？

什么是 Canvas : Canvas 元素是 HTML5 的一部分，允许脚本语言动态渲染位图像。Canvas 由一个可绘制地区 HTML 代码中的属性定义决定高度和宽度。JavaScript 代码可以访问该地区，通过一套完整的绘 图功能类似于其他通用二维的 API，从而生成动态的图形。

Canvas 能应对以下需求：

（1）游戏：毫无疑问，游戏在 HTML5 领域具有举足轻重的地位。HTML5 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，Ohad 认为运用 Canvas 制作的图像能够令 HTML5 游戏在流畅度和跨平台方面 发挥更大的潜力。

（2）图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用 HTML/CSS 完成图标制作，但完全可以用 Canvas 来实现。当然，使用 SVG（可缩放矢量图形） 来完成图表制作也是非常好的方法。( 例如： echarts.js heightchart.js 都是基于 canvas 来绘图!)

（3）banner 广告：Flash 曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5 技术能够在 banner 广告上发挥巨大作用，用 Canvas 实现动态的广告效果再合适不过。 提示：其实还有很多领域（例如：模拟器 / 远程计算机控制 / 字 体设计 / 图像编辑器 / 其它），但是就当前来说，基于 canvas 图表 制作是我们必须要掌握的能力。

以上就是前端HTML面试题汇总，上面只是提供了一些参考答案。如果对某道问题还有疑惑，可以进一步复习相关知识点。