关于H5的20道面试题及答案

1 DOCTYPE有什么做用？标准模式与混杂模式如何区分？它们有何意义?

告诉浏览器使用哪一个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会致使HTML文档以混杂模式呈现。

标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

2 HTML5为何只须要写 ？

HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），所以不须要对DTD（DTD 文档类型定义）进行引用，可是须要DOCTYPE来规范浏览器行为。

HTML4.01基于SGML，因此须要引用DTD。才能告知浏览器文档所使用的文档类型，以下：

3 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a span img input select 

块级元素：div ul ol li dl dt dd h1 p

空元素：

---

 

4 页面导入样式时，使用link和@import有什么区别？

相同的地方，都是外部引用CSS方式，区别：

link是xhtml标签，除了加载css外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS

link引用CSS时候，页面载入时同时加载；@import须要在页面彻底加载之后加载，并且@import被引用的CSS会等到引用它的CSS文件被加载完才加载

link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持

link支持使用javascript控制去改变样式，而@import不支持

link方式的样式的权重高于@import的权重

import在html使用时候须要标签

5 无样式内容闪烁（FOUC）Flash of Unstyle Content

@import导入CSS文件会等到文档加载完后再加载CSS样式表。所以，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。

解决方法：使用link标签加载CSS样式文件。由于link是顺序加载的，这样页面会等到CSS下载完以后再下载HTML文件，这样先布局好，就不会出现FOUC问题。

6 介绍一下你对浏览器内核的理解？

主要分红两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并无区分的很明确，后来JS引擎愈来愈独立，内核就倾向于只指渲染引擎。

7 常见的浏览器内核有哪些？

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器

Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey

Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)

Webkit：Safari Chrome

8 HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5

新增长了图像、位置、存储、多任务等功能。

新增元素：

canvas

用于媒介回放的video和audio元素

本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

语意化更好的内容元素，好比 article footer header nav section

位置API：Geolocation

表单控件，calendar date time email url search

新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其余脚本，不会影响页面的性能。您能够继续作任何愿意作的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket

拖放API：drag、drop

移除的元素：

纯表现的元素：basefont big center font s strike tt u

性能较差元素：frame frameset noframes

区分：

DOCTYPE声明的方式是区分重要因素

根据新增长的结构、功能来区分

9 简述一下你对HTML语义化的理解？

去掉或丢失样式的时候可以让页面呈现出清晰的结构。

有利于SEO和搜索引擎创建良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来肯定上下文和各个关键字的权重。

方便其它设备解析。

便于团队开发和维护，语义化根据可读性。

10 HTML5的文件离线储存怎么使用，工做原理是什么？

在线状况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，若是是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。若是已经访问过而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不会作任何操做，若是文件改变了，那么就会从新下载文件中的资源，而且进行离线存储。例如，

在页面头部加入manifest属性

 

在cache.manifest文件中编写离线存储的资源

CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:Resourse/logo.pngFALLBACK://offline.html

11 cookies，sessionStorage和localStorage的区别？

共同点：都是保存在浏览器端，且是同源的。

区别：

cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。

存储大小的限制不一样。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。

数据的有效期不一样。cookie在设置的cookie过时时间以前一直有效，即便窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭以前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用做长久数据保存。

做用域不一样。cookie在全部的同源窗口都是共享；sessionstorage不在不一样的浏览器共享，即便同一页面；localstorage在全部同源窗口都是共享

12 iframe框架有那些优缺点？

优势：

iframe可以原封不动的把嵌入的网页展示出来。

若是有多个网页引用iframe，那么你只须要修改iframe的内容，就能够实现调用的每个页面内容的更改，方便快捷。

网页若是为了统一风格，头部和版本都是同样的，就能够写成一个页面，用iframe来嵌套，能够增长代码的可重用。

若是遇到加载缓慢的第三方内容如图标和广告，这些问题能够由iframe来解决。

缺点：

搜索引擎的爬虫程序没法解读这种页面

框架结构中出现各类滚动条

使用框架结构时，保证设置正确的导航连接。

iframe页面会增长服务器的http请求

13 label的做用是什么? 是怎么用的?

label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是很是有用的, FOR和ACCESSKEY。 

FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，

姓名

ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如，

姓名

14 HTML5的form如何关闭自动完成功能？

HTML的输入框能够拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你之前的同名输入框的历史记录中查找出相似的内容并列在输入框下面，这样就不用所有输入进去了，直接选择列表中的项目就能够了。但有时候咱们但愿关闭输入框的自动完成功能，例如当用户输入内容的时候，咱们但愿使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

方法：

在IE的internet选项菜单中里的自动完成里面设置

设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能

15 如何实现浏览器内多个标签页之间的通讯?

WebSocket SharedWorker

也能够调用 localstorge、cookies 等本地存储方式。 localstorge 在另外一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，咱们经过监听事件，控制它的值来进行页面信息通讯。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

16 webSocket如何兼容低浏览器？

Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR

引用WebSocket.js这个文件来兼容低版本浏览器。

16 页面可见性（Page Visibility）API 能够有哪些用途？

经过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

在页面被切换到其余后台进程时，自动暂停音乐或视频的播放。

17 如何在页面上实现一个圆形的可点击区域？

map+area或者svg

border-radius

纯js实现，一个点不在圆上的算法

18 实现不使用 border 画出1px高的线，在不一样浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

 

19 网页验证码是干吗的，是为了解决什么安全问题？

区分用户是计算机仍是人的程序;

能够防止恶意破解密码、刷票、论坛灌水；

20 title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响

strong标明重点内容，语气增强含义；b是无心义的视觉表示

em表示强调文本；i是斜体，是无心义的视觉表示

视觉样式标签：b i u s

语义样式标签：strong em ins del code

21 元素的alt和title有什么异同？

在alt和title同时设置的时候，alt做为图片的替代文字出现，title是图片的解释文字。