HTML5为我们提供了更多语义化的标签、更丰富的元素属性、以及更多精彩的功能。 但在面试中，HTML5面试题主要考验考生对API的掌握程度。 这就是HTML5的重点，也正是这些API推动了前端的发展。
这些新技术已经在许多大型项目中得到应用。
有些人认为HTML5只是增加了一些新的语义HTML标签，或者HTML5只是扩展了HTML，我们只需要了解HTML相关知识是不正确的。
今天我们给大家分享42道HTML5相关面试题。
1. HTML5有哪些新特性？ 哪些元素被删除了？
HTML5的新特性如下：
删除的元素如下：
2. HTML5新标签的浏览器兼容性问题如何处理？
IE8、IE7 和 IE6 支持使用 . 来生成标签。 可以利用这个功能让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签的默认样式（最好的方式是直接使用成熟的框架，最常用的框架） ，可以使用IE hack来引入框架
<！--[if 1t IE 9]><！[end if]-->
3.如何区分HTML和HTML5？
使用新结构元素和功能元素的声明来区分它们。
4.什么是HTML5？
HTML5 是最新的 HTML 标准，其主要目标是提供动画、视频、丰富的 GUI 等所有内容，而不需要任何额外的插件（如 Flash 等）。
HTML5 是万维网联盟 (W3C) 和 Web 超文本应用技术工作组 ( ) 的协作成果。
5. 新的 HTML5 文档类型和字符集是什么？
HTML5 文档类型是 .
HTML5 使用的字符集 <meta="UTF8">。
6. HTML5元素有哪些作用？
用于在网页上绘制图形。 这个元素标签的强大之处在于它可以直接在HTML上进行图形操作。
7. HTML5新增了哪些功能AP？
新功能API包括Media API、Text Track API、Cache API、User、Data API、API、API、API
8、HTML5的离线存储有哪些？
还有下面的离线存储，可以长期存储数据，即浏览器关闭后数据不会丢失，浏览器关闭后数据会自动删除。
9、如何关闭HTML5表单的自动完成功能？
将不想提示的frm元素下的Input元素的属性设置为off
10.如何在HTML5页面中嵌入音频？
HTML5 包含嵌入音频文件的标准方法。 支持的格式包括 MP3、Wav 和 Ogg。 嵌入方法如下。
Your browser does'nt support audio embedding feature.
11.如何在HTML5页面中嵌入视频？
就像嵌入音频文件一样，HTML5 定义了嵌入视频的标准方法。 支持的格式包括MP4、WebM和Ogg等。嵌入方法如下。
< video width=”450” height=”340” contro1s>Your browser does'nt support video embedding feature.video>
12. HTML5引入了哪些新的表单属性？
新的表单属性包括, , , ,日期, 月, 周, 时间, ,范围,
13、如何显示我们自己画的弹框？
可以用一个简单的方法，点击页面上的一个按钮，弹出一个弹框，弹框也是自己写的一个div。点击之前，隐藏弹框，点击之后显示事件发生。
14. HTML5应用程序缓存和常规HTML浏览器缓存有什么区别？
HTML5应用程序缓存最重要的是支持离线应用程序，可以获取少量或全部网站内容，包括HTML、CSS、图像和脚本，并将其存储在本地。 该功能提高了网站的性能，可以通过以下方式来实现。
<！doctype html><html manifest="example. appcache">......html>
与传统浏览器缓存相比，该功能不会强制用户访问网站。
15、为什么HTML5中不需要DTD（Type，文档类型定义）？ 如果我不放入标签，HTML5 还能工作吗？
HTML5不使用SGML或XHTML，它是一个全新的类型，因此不需要引用DTD。 对于 HTML5，只需放置以下文档类型代码即可让浏览器识别 HTML5 文档。
如果不放入标签，HTML5 将无法工作。浏览器将无法将其识别为 HTML 文档，HTML5 标签将无法正常工作。
16.哪些浏览器支持HTML5？
几乎所有浏览器（如 、 、 Opera、IE）都支持 HTML5
17. 本地存储和会话（事务）存储有什么区别？
本地存储的数据将永久保留，但会话存储会在浏览器打开时持续存在，并且会话会在浏览器关闭时重置存储的数据。
18. HTML5中的应用程序缓存是什么？
HTML5应用程序缓存的最终目的是帮助用户离线浏览页面。 换句话说，如果网络连接不可用，打开的页面来自浏览器缓存，离线应用程序缓存可以帮助用户实现这一目的。
应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要
19. 如果 HTML5 被视为一个开放平台，那么它的构建模块是什么？
如果将 HTML5 视为一个开放平台，那么它的构建模块至少包括以下内容，例如
。
≤nav> 标签用于将导航链接分组在一起，以使代码结构在语义上更加准确。
< > 标签用于定义文档的标题。
<>标签用于描述文档的结构。
< > 标签用于定义页脚。通常，该元素将包含文档作者的姓名、文档创建日期以及联系信息
20、为什么HTML5只需要写？
HTML5并不是基于SGML，因此它不需要引用DTD，但它确实需要规范浏览器行为（让浏览器按照自己的方式运行）。 HTM4.01是基于SGML的，因此需要引用DTD来告诉浏览器文档中使用的类型。
21. HTML5应用程序缓存给应用程序带来了哪些优势？
应用程序缓存为应用程序带来了 3 个优势。
(1) 离线浏览允许用户在离线时（网络不可用时）使用应用程序。
(2)速度，让缓存的资源加载得更快。
(3)减轻服务器负载，使浏览器只下载服务器更新的资源。
22、与HTML4相比，HTML5放弃了哪些元素？
已弃用的元素包括frame、、、、big、和。
23. HTML5标准提供了哪些新的API？
HTML5提供了很多新的API，包括Media API、Text Track API、Cache API、User API、Data API、API、API和API
24. 请告诉我 Web 和 .
Web 的作用如下：
(1)通过=new(url)加载一个文件，创建一个，同时返回一个实例
(2) 使用.(data)发送数据到
(3) 约束力。 接收发送的数据
(4) 可以使用.()来终止其中一个的执行。
其功能如下。
它是一种用于 Web 应用程序的传输协议，提供双向、有序的数据流。 它是 HTML5 的新协议。 连接是持久的。 它在客户端和服务器之间维护双工连接。 来自服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔进行轮询。 。
25、如何实现浏览器中多个Tab之间的通信？
选项卡之间调用、存储其他数据可以实现选项卡之间的通信。
26.如何兼容低版本浏览器？
使用 Adobe Flash 发送 XHR，(E)，编码
使用长轮询发送 XHR 可以实现不支持 API 的浏览器的 Web 兼容性。
27. HTML5为浏览器提供了哪些数据存储解决方案？
在较新的浏览器中，两者都可用： 和 。 在 HTML5 规范中，替换为 .
HTML5中的Web包括两种存储方式，分别是 和 。
用于在本地存储会话（）中的数据。 这些数据只能由同一会话中的页面访问。 当会话结束时，数据也会被销毁。 所以它不是持久性本地存储，只是会话级存储。
用于持久性的本地存储。 除非主动删除数据，否则数据永远不会过期。
并具有相同的操作方法，例如，等等。
28.请描述和的区别。
用于在本地存储会话中的数据。 该数据只能由同一会话中的页面访问。 当会话结束时，数据也会被销毁。 所以它不是持久性本地存储，只是会话级存储。
对于持久化本地存储来说，除非主动删除数据，否则数据永远不会过期。
29. 和 有什么区别？
概念类似，但不同的是它是为更大容量的存储而设计的。 的大小是有限的，每次请求新页面时都会发送，浪费带宽。 另外需要指定范围，不允许跨域调用。
另外，如果有、、、clear等方法，需要前端开发者自己封装获取。 但它也是不可或缺的，因为它的作用是与服务器交互，它也是HTP规范的一部分，但只是因为它是在本地“存储”数据，不能跨浏览器使用。
30.请谈谈它的特点。
虽然它为持久化客户端数据提供了便利并分担了服务器存储的负担，但它具有以下局限性。
(1) 每个具体域名最多生成20个。
(2) IE6以下版本最多20个。
(3) IE7及以上版本最多可以有50个。
(4) 最多可达 50 个。
(5)并且没有硬性限制。
IE和Opera会清理最近最少使用的文件，并且随机清理它们。
最大为 4096 字节。 为了兼容性，一般不能超过4095字节。
IE提供了一种可以持久化用户数据的存储方式，称为IE。 从IE5.0开始支持该功能。 每条数据最大可达128KB，每个域名最大可达1MB。 这个持久化数据放在缓存中，如果不清除缓存，就会一直存在。
优点如下：
(1)通过良好的编程，控制保存的对象的大小。
(2)通过加密和安全传输技术(SSL)降低被破解的可能性。
（3）里面只存储非敏感数据，即使被盗也不会有重大损失。
(4)控件的生命周期，使其不会永远有效。 数据窃贼很可能会得到过期的数据。
其缺点如下：
(1)“ ”的数量和长度受到限制。 每个条目最多只能有 20 个条目，每个条目的长度不能超过 4KB，否则会被截断。
(2)安全问题。 如果被别人截获，就能得到所有的信息。 即使加密也无济于事，因为拦截者不需要知道含义，他只需按原样转发就可以达到目的。
(3) 有些状态无法保存在客户端。 例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果在客户端保存这个计数器，则没有任何作用
31. 和 有什么区别？
差异如下：
(1)数据存储在客户端浏览器上，数据存储在服务器上。
(2)不太安全。 其他人可以分析本地存储的数据并欺骗它。 使用时应考虑安全问题。
(3) 会在服务器上保存一段时间。 当访问量增加时，会占用更多的服务器资源。 为了减轻服务器的负载，应该使用它。
(4) 单个保存数据不能超过4KB。 许多浏览器限制一个站点最多保存 20 个。
因此，我个人建议您将登录信息等重要信息存储在 中，其他信息（如果需要保留）可以存储在 中。
32.什么是SVG？
SVG 可以使用可变图形进行缩放 ( )。 它是一种基于文本的图形语言，使用文本、线、点等来绘制图像，这使其轻量级且显示速度快。
33.它和SvG有什么区别？
两者的区别如下：
(1)一旦绘制完成，就无法访问该像素或对其进行操作； 使用 SVG 绘制的任何形状都可以被记住和操作，并且可以由浏览器再次显示。
（2）对于绘制动画、游戏非常有利； SVG 对于创建图形（例如 CAD）非常有利。
（3）因为不需要记住以后的事情，所以跑得更快； 由于SVG需要记录坐标以供后续操作，因此运行速度较慢。
(4)相关事件不能绑定到SVG中的绘图对象上； 相关事件可以绑定到SVG中的绘图对象。
（5）绘制的是位图，所以与分辨率有关； SvG绘制的是矢量图像，因此与分辨率无关。
34.如何在HTML5中使用SVG绘制矩形？
使用SVG绘制矩形的代码如下：
<svg xmlns=http://www.w3.org/2000/svg version="1.1"><rect style="fill:rgb（255,100，0）；"height=200" width="400">rect>svg>
绘制矩形的代码如下。
<canvas id="myCanvas" width=500" height="500">canvas>var canvas=document.getElementById（'mycanvas'）；var ctx= canvas.getContext（'2d'）；ctx.rect（100,100,300,200）；ctx fillstyle = 'pink 'ctx. fill()
35、本地存储的数据有生命周期吗？
本地存储的数据没有生命周期。 它将存储数据，直到用户从浏览器中清除数据或使用代码将其删除。
36. HTML5中如何实现应用程序缓存？
首先，您需要指定“ ”文件。 “ ”文件帮助您定义缓存的工作方式。 以下是“ ”文件的结构。
CACHE MANTEEST# version 1.0/demo. css/demo. js/demo.png所有 manifest文件都以” CACHE MANIFEST"语句开始。#（散列标签）有助于提供缓存文件的版本。manifest文件的内容类型应是"text/ cache- manifest”。
创建缓存文件后，在 HTML 页面中提供带有代码的链接，如下所示。
上述文件第一次运行时，会被添加到浏览器的应用程序缓存中，当服务器宕机时，页面会从应用程序缓存中获取数据。
37.如何刷新浏览器的应用程序缓存？
通过更改“#”标签后面的版本号来刷新应用程序缓存，如下图：
CACHE MANIFEST# version 2.0/icketang.css/icketang.js/icketang. pngNETWORK：login. php
38. 什么是应用程序缓存中的回退？
应用程序缓存中的回退将帮助您指定在服务器无法访问时应显示的文件。 例如，在以下文件中，如果用户输入“/home”并且服务器无法访问，则应传递“”文件。
FALLBACK：/home//404. html
39. 网络命令在应用程序缓存中的作用是什么？
网络命令描述不需要缓存的文件。 例如，以下代码中的“login.php”不应被缓存或离线访问。
NETWORKlogin. php
40.什么是？
它是浏览器客户端上的结构化关系数据库。 它是浏览器中的本地RDBMS（关系数据库管理系统），可以使用SQL进行查询。
41. 是HTML5的规范吗？
不，很多人将其标记为 HTML5，但它并不是 HTML5 规范的一部分，HTML5 规范基于
42、HTML5如何实现跨域功能？
在服务器端设置允许其他域名下访问，例如允许所有域名访问以下内容。
response.setHeader（"Access-Control-Allow-Origin"，"*"）；response.setHeader （"Access-Control-Allow-Methods"，"POST"）；response.setHeader（"Access-Control-Allow-Headers"，"x-requested-with, content-type"）；
文章结束~
扫一扫在手机端查看
我们凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为4000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求，请立即点击咨询我们或拨打咨询热线： 13761152229，我们会详细为你一一解答你心中的疑难。
客服1 