常见的HTML5⾯试题（附答案）
常见的HTML5⾯试题(附答案)
怎么把字符串转换成数字1、HTML5有哪些新特性？移除了哪些元素？
HTML5的新特性如下：
1、拖放（ Drag and drop）APIlweb前端基础面试题
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引⼊该框架
<！--[if1t IE9]>
<script>src="lecode/svn/trunk/htm15.js</script>
<！[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等，嵌⼊⽅式如下。
<audio controls>
<source src="icketang.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
11、如何在HTML5页⾯中嵌⼊视频？
和嵌⼊⾳频⽂件⼀样，HTML5定义了嵌⼊视频的标准⽅式，⽀持的格式包括MP4、WebM和Ogg等，嵌⼊⽅式如下。
< video width=”450” height=”340” contro1s>
<source src="icketang.mp4" type="video/mp4">
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 manifest="example. appcache">
......
</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。
23、HTML5标准提供了哪些新的API？
HTML5提供很多新的AP1，包括 Media APl、 Text Track API、 Application Cache API、 User InteractionAPI、 Data Transfer API、 Command APl、 Constraintion Validation API和 History API
24、请你说⼀下 Web Worker和 WebSocket的作⽤。
Web Worker的作⽤如下：
（1）通过 worker= new Worker（url）加载⼀个 JavaScript⽂件，创建⼀个 Worker，同时返回⼀个 Worker实例
（2）⽤ worker.postMessage（data）向 Worker发送数据
（3）绑定 ssage接收 Worker发送过来的数据
（4）可以使⽤ inate()终⽌⼀个 Worker的执⾏。
WebSocket的作⽤如下。
它是Web应⽤程序的传输协议，提供了双向的、按序到达的数据流。它是HTML5新増的协议， WebSocket的连接是持久的，它在客户端和服务器之间保持双⼯连接，服务器的更新可以及时推送到客户端，⽽不需要客户端以⼀定的时间间隔去轮询。
25、如何实现浏览器内多个标签页之间的通信？
在标签页之间，调⽤ localstorge、 cookies等数据存储，可以实现标签页之间的通信
26、如何让 Websocket兼容低版本浏览器？php工程师是啥
使⽤ 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⽤于持久化本地存储，除⾮主动删除数据，否则数据是永远不会过期的。
29、localStorage和 cookie的区别是什么？
localStorage的概念和cookie相似，区别是 localStorage是为了更⼤容量的存储设计的。cookie的⼤⼩是受限的，并且每次请求⼀个新页⾯时， cookie都会被发送过去，这样⽆形中浪费了带宽。另外， cookie还需要指定作⽤域，不可以跨域调⽤。
除此之外， localStorage拥有 setlten, getItem、 removeltem、 clear等⽅法， cookie则需要前端开发者⾃⼰封装 setCookie和 get Cookie。但 cookie也是不可或缺的，因为 cookie的作⽤是与服务器进⾏交互，并且还是HTP规范的⼀部分，⽽ localStorage仅因为是为了在本地“存储”数据⽽已，⽆法跨浏览器使⽤。
30、请你谈谈 cookie的特点。
cookie虽然为持久保存客户端数据提供了⽅便，分担了服务器存储的负担，但是有以下局限性。
（1）每个特定的域名下最多⽣成20个 cookie。
（2）IE6或更低版本最多有20个 cookie。
（3）IE7和之后的版本最多可以有50个 cookie。
（4） Firefox最多可以有50个 cookie。
（5） Chrome和 Safari没有做硬性限制。
IE和 Opera会清理近期最少使⽤的 cookie, Firefox会随机清理 cookie。
cookie最⼤为4096字节，为了兼容性，⼀般不能超过4095字节。
IE提供了⼀种存储⽅式，可以让⽤户数据持久化，叫作 userdata，从IE5.0就开始⽀持此功能。每块数据最多128KB，每个域名下最多
1MB。这个持久化数据放在缓存中，如果缓存没有被清理，就会⼀直存在。
优点如下：
（1）通过良好的编程，控制保存在 cookie中的 session对象的⼤⼩。
（2）通过加密和安全传输技术（SSL），降低 cookie被破解的可能性。
（3）只在 cookie中存放不敏感数据，即使被盗也不会有重⼤损失。
（4）控制 cookie的⽣命周期，使之不会永远有效。数据偷盗者很可能得到⼀个过期的 cookie。
缺点如下：
（1）“ cookie”的数量和长度有限制。每个 domain最多只能有20条 cookie，每个cookie的长度不能超过4KB，否则会被截掉。
（2）安全性问题。如果 cookie被别⼈拦截了，就可以取得所有的 session信息。即使加密也于事⽆补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie就可以达到⽬的。
（3）有些状态不可能保存在客户端。例如，为了防⽌重复提交表单，我们需要在服务器端保存⼀个计数器。如果把这个计数器保存在客户端，那么它起不到任何作⽤
nodejs事件循环31、cookie和 session的区别是什么？
区别如下：
（1） cookie数据存放在客户的浏览器上， session数据存放在服务器上。
perl编程语言ppt（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 xmlns=/2000/svg version="1.1">
<rect height=200" width="400"></rect>
</svg>
使⽤ Canvas绘制矩形的代码如下。
<canvas id="myCanvas" width=500" height="500"></canvas>
var ElementById（'mycanvas'）；
var ctx= Context（'2d'）；
<（100,100,300,200）；
ctx fillstyle ='pink '
ctx.fill()
35、本地存储的数据有⽣命周期吗？
本地存储的数据没有⽣命周期，它将⼀直存储数据，直到⽤户从浏览器清除或者使⽤ JavaScript代码移除。
36、HTML5中如何实现应⽤缓存？
电脑一启动就进入setup⾸先，需要指定“ manifest”⽂件，" manifest”⽂件帮助你定义缓存如何⼯作以下是“ manifest”⽂件的结构。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论