常见的HTML5面试题(附答案)编程频道|福州电脑网

2023年11月25日发(作者：)

常见的HTML5⾯试题（附答案）

常见的HTML5⾯试题(附答案)

1、HTML5有哪些新特性？移除了哪些元素？

HTML5的新特性如下：

1、拖放（ Drag and drop）APIl

2、语义化更好的内容标签（ header、nav、 footer、 aside、 article、 section）

3、⾳频、视频（ audio、 video）API

4、画布（ Canvas）API

5、地理（ Geolocation）APl

6、本地离线存储（ localStorage），即长期存储数据，浏览器关闭后数据不丢失。

7、会话存储（ sessionStorage），即数据在浏览器关闭后⾃动删除

8、表单控件包括 calendar、date、time、 email、url、 search。

9、新的技术包括 webwork、 websocket、 Geolocation

移除的元素如下：

1、纯表现的元素，包括 basefont,big、 center、font、s, strike,t、u

2、对可⽤性产⽣负⾯影响的元素，包括 frame、 frameset、 Noframes

2、如何处理HTML5新标签的浏览器兼容问题？

IE8、IE7、IE6⽀持⽤ document. create Element产⽣标签，可以利⽤这⼀特性让这些浏览器⽀持HTML5新标签。浏览器⽀持新标签

后，还需要添加标签默认的样式（最好的⽅式是直接使⽤成熟的框架，使⽤最多的是 html5shim框架），可以⽤ IE hack引⼊该框架

<！--[if 1t IE 9]>

<！[end if]-->

3、如何区别HTML和HTML5？

⽤ DOCTYPE声明新增的结构元素和功能元素来区别它们。

4、什么是HTML5？

HTML5是最新的HTML标准，它的主要⽬标是提供所有内容，⽽不需要任何Flash、 SilverLight等的额外插件，这些内容来⾃动画、视

频、富GUI等

HTML5是万维⽹联盟（W3C）和⽹络超⽂本应⽤技术⼯作组（ WHATWG）合作输出的。

5、新的HTML5⽂档类型和字符集是什么？

HTML5⽂档类型是<！doctype html>。

HTML5使⽤的字符集< meta charset=“UTF8”>。

6、HTML5 Canvas元素有什么作⽤？

Canvas元素⽤于在⽹页上绘制图形，该元素标签的强⼤之处在于可以直接在HTML上进⾏图形操作。

7、HTML5新增了哪些功能AP？

新增的功能API包括 Media APl、 Text Track API、 Application Cache API、User Interaction、 Data Transfer API、 Command

API、 Constraint Validation API、 History API

8、HTML5的离线存储有哪些？

有以下离线存储localStorage，可长期存储数据，即浏览器关闭后数据不丢失session Storage，数据在浏览器关闭后⾃动删除，

9、HTML5的form如何关闭⾃动补全功能？

将不想要提⽰的frm元素下的 Input元素的 autocomplete属性设置为off

10、如何在HTML5页⾯中嵌⼊⾳频？

HTML5包含了嵌⼊⾳频⽂件的标准⽅式，⽀持的格式包括MP3、Wav和Ogg等，嵌⼊⽅式如下。

Your browser does'nt support audio embedding feature.

audio>

11、如何在HTML5页⾯中嵌⼊视频？

和嵌⼊⾳频⽂件⼀样，HTML5定义了嵌⼊视频的标准⽅式，⽀持的格式包括MP4、WebM和Ogg等，嵌⼊⽅式如下。

< video width=”450” height=”340” contro1s>

Your browser does'nt support video embedding feature.

video>

12、HTML5引⼊了哪些新的表单属性？

新增表单属性包括 datalist、 datetime、 output、 keygen、date、 month、week、time、 number、 range、 emailurl

13、如何显⽰我们⾃⼰画的⼀个弹框？

可以⽤⼀个简单的⽅法，在页⾯上单击⼀个按钮，弹出⼀个弹框，⽽弹框也是⾃⼰写的⼀个div。单击前，先把弹框隐藏， onclick事件发⽣

之后就会显⽰出来

14、HTML5应⽤缓存和常规的HTML浏览器缓存有什么差别？

HTML5应⽤缓存最关键的就是⽀持离线应⽤，可获取少数或者全部⽹站内容，包括HTML、CSS、图像和 JavaScript脚本并存在本地。该

特性提升了⽹站的性能，可通过如下⽅式实现。

<！doctype html>

......

html>

与传统的浏览器缓存⽐较，该特性并不强制要求⽤户访问⽹站。

15、为什么HTML5⾥⾯不需要DTD（ Document Type Definition，⽂档类型定义）？如果不放⼊<！doctype html>标

签，HTML5还会⼯作吗？

HTML5没有使⽤SGML或者 XHTML，它是⼀个全新的类型，因此不需要参考DTD。对于HTML5，仅须放置下⾯的⽂档类型代码，让浏

览器识别HTML5⽂档。

如果不放⼊<！doctype html>标签，HTML5不会⼯作。浏览器将不能识别出它是HTML⽂档，同时HTML5的标签将不能正常⼯作。

16、哪些浏览器⽀持HTML5？

⼏乎所有的浏览器（如 Safari、 Chrome、 Firefox、 Opera、IE）都⽀持HTML5

17、本地存储和会话（事务）存储之间的区别是什么？

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。

18、HTML5中的应⽤缓存是什么？

HTML5应⽤缓存的最终⽬的是帮助⽤户离线浏览页⾯。换句话说，如果⽹络连接不可⽤，打开的页⾯就来⾃浏览器缓存，离线应⽤缓存可

以帮助⽤户达到这个⽬的。

应⽤缓存可以帮助⽤户指定哪些⽂件需要缓存，哪些不需要

19、如果把HTML5看成⼀个开放平台，它的构建模块有哪些？

如果把HTML5看成⼀个开放平台，它的构建模块⾄少包括以下⼏个，如

< nav >< header >< section >< footer >。

< nav >标签⽤来将具有导航性质的链接划分在⼀起，使代码结构在语义化⽅⾯更加准确

< header>标签⽤来定义⽂档的页眉。

< section>标签⽤来描述⽂档的结构。

< footer>标签⽤来定义页脚。在典型情况下，该元素会包含⽂档作者的姓名、⽂档的创作⽇期和联系信息

20、HTML5为什么只需要写<！doctype htm>？

HTML5不基于SGML，因此不需要对DTD进⾏引⽤，但是需要 DOCTYPE来规范浏览器的⾏为（让浏览器按照它们的⽅式来运⾏）。⽽

HTM4.01基于SGML，所以需要对DTD进⾏引⽤，才能告知浏览器⽂档所使⽤的类型。

21、HTML5应⽤程序缓存为应⽤带来什么优势？

应⽤程序缓存为应⽤带来3个优势。

（1）离线浏览，让⽤户可在应⽤离线时（⽹络不可⽤时）使⽤它们。

（2）速度，让已缓存资源加载得更快。

（3）减少服务器负载，让浏览器将只下载服务器更新过的资源。

22、与HTML4⽐较，HTML5废弃了哪些元素？

废弃的元素包括 frame、frameset、 noframe、 applet、big、 center和 basefont。

使⽤ Adobe Flash Socket、 ActiveX HTMLFile（E）、 multipart编码发送XHR

与长轮询发送XHR等，可以实现不⽀持 WebSocket API的浏览器对 Web Socket的兼容。

27、HTML5为浏览器提供了哪些数据存储⽅案？

在较⾼版本的浏览器中，提供了 sessionStorage：和 globalStorage。在HTML5规范中，⽤ localStorage取代 globalStorage 。

HTML5中的 Web Storage包括两种存储⽅式，分别是 sessionStorage和 localStorage。

sessionStorage⽤于在本地存储⼀个会话（ session）中的数据，这些数据只有同⼀个会话中的页⾯才能访问，当会话结来后，数据也随

之销毀。因此 sessionStorage不是⼀种持久化的本地存储，仅仅是会话级别的存储。

localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。

localStorage和 sessionStorage都具有相同的操作⽅法，例如 setItem、 getItem和removeltem等

28、请描述⼀下 sessionStorage和 localStorage的区别。

sessionStorage⽤于在本地存储⼀个会话中的数据，这些数据只有同⼀个会话中的页⾯才能访问，当会话结束后，数据也随之销毀。因此

sessionStorage不是⼀种持久化的本地存储，仅仅是会话级别的存储。

⽽ localstorage⽤于持久化本地存储，除⾮主动删除数据，否则数据是永远不会过期的。

（1）“ cookie”的数量和长度有限制。每个 domain最多只能有20条 cookie，每个cookie的长度不能超过4KB，否则会被截掉。

（2）安全性问题。如果 cookie被别⼈拦截了，就可以取得所有的 session信息。即使加密也于事⽆补，因为拦截者并不需要知道 cookie

的意义，他只要原样转发 cookie就可以达到⽬的。

（3）有些状态不可能保存在客户端。例如，为了防⽌重复提交表单，我们需要在服务器端保存⼀个计数器。如果把这个计数器保存在客户

端，那么它起不到任何作⽤

31、cookie和 session的区别是什么？

区别如下：

（1） cookie数据存放在客户的浏览器上， session数据存放在服务器上。

（2） cookie不是很安全，别⼈可以分析存放在本地的 cookie并进⾏ cookie欺骗。考虑到安全问题应当使⽤ session。

（3） session会在⼀定时间内保存在服务器上。当访问增多时，会占⽤较多服务器的资源。为了减轻服务器的负担，应当使⽤ cookie。

（4）单个 cookie保存的数据不能超过4KB，很多浏览器都限制⼀个站点最多保存20个 cookie。

所以个⼈建议可以将登录信息等重要信息存放在 session中，其他信息（如果需要保留）可以存放在 cookie中。

32、什么是SVG？

SVG即可缩放失量图形（ Scalable Vector Graphics）。它是基于⽂本的图形语⾔，使⽤⽂本、线条、点等来绘制图像，这使得它轻便、

显⽰迅速。

33、Canvas和SvG的区别是什么？

两者的区别如下：

（1）⼀旦 Canvas绘制完成将不能访问像素或操作它；任何使⽤SVG绘制的形状都能被记忆和操作，可以被浏览器再次显⽰。

（2） Canvas对绘制动画和游戏⾮常有利；SVG对创建图形（如CAD）⾮常有利。

（3）因为不需要记住以后事情，所以 Canvas运⾏更快；因为为了之后的操作，SVG需要记录坐标，所以运⾏⽐较缓慢。

（4）在 Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。

（5） Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是⽮量图，因此与分辨率⽆关。

34、如何使⽤ Canvas和HTML5中的SVG画⼀个矩形？

使⽤SVG绘制矩形的代码如下：

svg>

使⽤ Canvas绘制矩形的代码如下。

<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、本地存储的数据有⽣命周期吗？

本地存储的数据没有⽣命周期，它将⼀直存储数据，直到⽤户从浏览器清除或者使⽤ JavaScript代码移除。

36、HTML5中如何实现应⽤缓存？

⾸先，需要指定“ manifest”⽂件，" manifest”⽂件帮助你定义缓存如何⼯作以下是“ manifest”⽂件的结构。

CACHE MANTEEST

# version 1.0

/demo. css

/demo. js

/demo.png

所有 manifest⽂件都以” CACHE MANIFEST"语句开始。

#（散列标签）有助于提供缓存⽂件的版本。

manifest⽂件的内容类型应是"text/ cache- manifest”。

创建⼀个缓存 manifest⽂件后，在HTML页⾯中提供 manifest链接，代码如下所⽰。

第⼀次运⾏以上⽂件时，它会添加到浏览器应⽤缓存中，在服务器宕机时，页⾯从应⽤缓存中获取数据。

37、如何刷新浏览器的应⽤缓存？

应⽤缓存通过变更“#”标签后的版本号来刷新，如下所⽰：

CACHE MANIFEST

# version 2.0

/icketang.css

/icketang.js

/icketang. png

NETWORK：

38、应⽤缓存中的回退是什么？

应⽤缓存中的回退会帮助你指定在服务器不可访问时，显⽰某⽂件。例如在下⾯的manifest⽂件中，如果⽤户输⼊了“/home”，同时服

务器不可到达，“404htm”⽂件应送达。

FALLBACK：

/home//404. html

39、应⽤缓存中⽹络命令的作⽤是什么？

⽹络命令描述不需要缓存的⽂件，例如以下代码中“ ”始终都不应该缓存或者离线访问。

NETWORK

40、什么是 Websql？

Websql是⼀个在浏览器客户端的结构关系数据库，是浏览器内的本地 RDBMS（关系型数据库管理系统），可以使⽤SQL查询。

41、Websql是HTML5的⼀个规范吗？

不是，许多⼈把它标记为HTML5，但是它不是HTML5规范的⼀部分，这个规范是基于 SQLite的

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"）；

常见的HTML5面试题(附答案)

发布评论取消回复

最近发表

相关推荐

标签列表

常见的HTML5面试题(附答案)

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复