今天跟H5班的一个同学聊面试。
我已经成功一半了。。。
怎么说？
我这边已经认可公司了，就等公司认可我。
哈，这种心态太好了。面试是一个很消耗元气的事情，不管你本身的技能怎么样，作为一个初出茅庐的学生，在找工作的过程中，都会遇到各种问（刁）题（难）。
我们应该用乐观积极的态度、满满的正能量去面对所有的事情。调整心态，全力以赴，属于你的work.right就在不远处等着你。
下面是小鸥整理的HTML5面试常见问题和答案，仅供参考，仅供参考，仅供参考。这些问题并不能保证你一定能得到心仪的Offer，但是可以肯定的是，看过它，面试的时候你心里一定不会那么方。
只许看，不许背
心理第一，答案第二
开始吧
☟
1谈谈你对HTML5的理解。
答案解析：
绝大多数人心中的HTML5仅仅是HTML的第5个版本，认为H5只不过是增加了一些新标签，如<header>、<section>、<canvas>或者增加了动画、渐变之类的炫酷效果。实际上这种理解是极其肤浅的，完全是外行人看热闹！H5从广义上说是前端开发中各种最新技术的总称，包含了HTML5、CSS3、JavaScript、ES6和各种开源框架等最新前端开发技术的总和。H5广泛而深入地吸收了移动互联网时代的技术精髓，再加上其自身跨平台、免安装、更新快的技术优势，自2014年底发布以来，已经逐渐成为现代互联网和移动互联网开发的核心技术，逐渐发展成为各行各业进入互联网+的首选开发技术。
2目前哪些浏览器支持HTML5？
答案解析：
几乎所有的浏览器都支持HTML 5，例如Safari，Chrome，火狐，Opera，IE等。
3HTML5中的DataList是什么？
答案解析：
HTML 5中的DataList控件元素有助于提供自动完成功能的文本框，如下图所示。
DataList控件功能的HTML代码：
<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>
4SVG是什么？
答案解析：
SVG表示（scalable vector graphics）可缩放矢量图形。这是一个基于文本的图形语言，它可以绘制使用文本、线、点等的图形，因此可以轻巧又快速地渲染。
5能否使用HTML5举个简单的SVG例子？
答案解析：
比方说，我们想要使用HTML 5 SVG显示下面简单的线条。
下面是HTML 5代码，你可以看到SVG标签封闭了多边形标签用来显示星星图形。
<svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="http://www.w3.org/2000/svg">
<line style="stroke: rgb(255, 0, 0); stroke-width: 2px;" y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]">
</line>
6HTML5中canvas是什么？
答案解析：
Canvas是你在HTML中可以绘制图形的区域。
7我们如何使用Canvas来画一条简单的线？
答案解析：
三步走：
1、定义Canvas区域
2、获取访问canvas上下文区域
3、绘制图形
定义Canvas区域
定义Canvas区域你需要使用下面的HTML代码，这定义了你能进行绘图的区域
<canvas id="mycanvas" width="600" height="500"></canvas>
获取画布区域的访问
在画布上进行绘图我们首先需要获取上下文区域的关联，下面是获取画布区域的代码。
var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");绘制图形
现在一旦你获取了访问上下文，我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始，使用线条方法绘制线条然后使用stroke方法结束。
以下是完整的代码：
输出结果：
8Canvas和SVG图形的区别是什么？
答案解析：
从前面的两个问题中我们可以看到Canvas和SVG都可以在浏览器上绘制图形。所以在这个问题上面试官可能会要你回答什么时候用哪个。
SVGCanvas绘制后记忆，换句话说任何使用SVG绘制的形状都能被记忆和操作，浏览器可以再次显示Canvas则是绘制后忘记，一旦绘制完成你就不能访问像素和操作它SVG对于创建图形例如CAD软件是良好的，一旦东西绘制，用户就想去操作它Canvas则用于绘制和遗忘类似动漫和游戏的场画。为了之后的操作，SVG需要记录坐标，所以比较缓慢。因为没有记住以后事情的任务，所以Canvas更快。我们可以用绘制对象的相关事件处理我们不能使用绘制对象的相关事件处理，因为我们没有他们的参考分辨率独立分辨率依赖
9HTML5中我们如何实现应用缓存？
答案解析：
首先我们需要指定”manifest”文件，“manifest”文件帮助你定义你的缓存如何工作。以下是”mainfest”文件的结构：
所有manifest文件都以“CACHE MANIFEST”语句开始。
#（散列标签）有助于提供缓存文件的版本。
CACHE 命令指出哪些文件需要被缓存。
Mainfest文件的内容类型应是“text/cache-manifest”。
以下是如何在ASP.NET C#使用manifest缓存：
创建一个缓存manifest文件以后，接下来的事情实在HTML页面中提供mainfest连接，如下所示：
当以上文件第一次运行，他会添加到浏览器应用缓存中，在服务器宕机时，页面从应用缓存中获取。
10本地存储和cookies（储存在用户本地终端上的数据）之间的区别是什么？
答案解析：
CookiesLocal storage客户端/服务端客户端和服务端都能访问数据。Cookie的数据通过每一个请求发送到服务端。只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器。大小每个cookie有4095byte。每个域5MB。过期Cookies有有效期，所以在过期之后cookie和cookie数据会被删除。没有过期数据，无论最后用户从浏览器删除或者使用Javascript程序删除，我们都需要删除。
11HTML5 为什么只需要写 <!DOCTYPE HTML>？
答案解析：
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
12行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
答案解析：
行内元素：a b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>
13页面导入样式时，使用link和@import有什么区别？
答案解析：
link属于XHTML标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
link方式的样式的权重高于@import的权重。
14html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
答案解析：
新特性，新增元素：
内容元素：article、footer、header、nav、section
表单控件：calendar、date、time、email、url、search
控件元素：webworker，websockt，Geolocation
移除元素：
显现层元素：basefont，big，center，font，s，strike，tt，u
性能较差元素：frame，frameset，noframes
处理兼容问题有两种方式：
IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
15如何区分 HTML 和 HTML5？
答案解析：
在文档类型声明上不同：
HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>
16简述一下你对HTML语义化的理解？
答案解析：
用正确的标签做正确的事情
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。
17HTML5的离线储存怎么使用，工作原理能不能解释一下？
答案解析：
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
18iframe有那些缺点？
答案解析：
在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面
框架结构有时会让人感到迷惑，页面很混乱
19Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
答案解析：
<!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
20常见兼容性问题？
png24位的图片在IE6浏览器上出现背景
解决方案：做成PNG8
浏览器默认的 margin 和 padding 不同
解决方案：加一个全局的*{margin:0;padding:0;}来统一
IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;} 这种情况下IE6会产生200px的距离。
解决方法：加上_display：inline，使浮动忽略
IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性； Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性。
IE下，even对象有x，y属性，但是没有pageX，pageY属性，但是没有x，y属性；
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决
超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；
解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
21如何实现浏览器内多个标签页之间的通信？
答案解析：
调用localstorge、cookies等本地存储方式
22webSocket如何兼容低浏览器？
答案解析：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
23支持HTML5新标签
答案解析：
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式；
当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
24如何区分：DOCTYPE 声明\新增的结构元素\功能元素，语义化的理解？
答案解析：
用正确的标签做正确的事情；
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利用 SEO ；
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
25介绍一下 CSS 的盒子模型？
答案解析：
有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。
26CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？
答案解析：
id 选择器（#myid）
类选择器（.myclassname）
标签选择器（div，h1，p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（* ）
属性选择器（ a[rel = "external"]）
伪类选择器（a: hover, li: nth - child）
27可继承的样式有哪些？
font-size
font-family color,
UL
LI
DL
DD
DT
28不可继承的样式有哪些？
border
padding
margin
width
height
29优先级就近原则
解析答案：
同权重情况下样式定义最近者为准
30载入样式
解析答案：
以最后载入的定位为准;
优先级为: !important > id > class > tag ； important 比 内联优先级高
31CSS3新增伪类举例：
答案解析：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素；
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素；
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素；
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素；
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素；
:enabled :disabled 控制表单控件的禁用状态；
:checked 单选框或复选框被选中。
32如何居中div？ 如何居中一个浮动元素？
答案解析：
给div 设置一个宽度，然后添加 margin:0 auto 属性；div{width:200px; margin:0 auto; }
33居中一个浮动元素
答案解析：
确定容器的宽高 宽500 高300的层，设置层的外边距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；头：50%}
34css3有哪些新特性？
答案解析：
CSS3 实现圆角（border-radius:8px;）
阴影（box-shadow:10px）
对文字加特效（text-shadow）
线性渐变（gradient）
旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)//旋转，缩放，定位，倾斜
增加了更多的 css 选择器 多背景 rgba
35display:inline-block 什么时候会显示间隙？
答案解析：
移除空格，使用margin 负值、使用 font-size:0、letter-spacing 、word-spacing
36使用 CSS 预处理器吗？喜欢哪个？
答案解析：
SASS
37什么是盒子模型？
答案解析：
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。
这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
38CSS实现垂直水平居中
答案解析：
一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：
<div class="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
39简述一下src与href的区别
答案解析：
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
40简述同步和异步的区别
答案解析：
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
41px和em的区别
答案解析：
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
42浏览器的内核分别是什么?
答案解析：
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
