2016最新H5面试题（及答案）
1. HTML5 为什么只需要写 ？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2. 页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
3. 浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
4. html5有哪些新特性? 移除了那些元素? 如何处理HTML5新标签的浏览器兼容问题? 如何区分 HTML 和HTML5？
1) 新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
2) 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
3) 支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
4) 如何区分： DOCTYPE声明\新增的结构元素\功能元素
5. html语义化的理解？
用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
6. 什么是HTML5的离线储存？如何使用？
LocalStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
7. HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或下某个input 设置为 autocomplete=off。
8. 如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
9. CSS3新增伪类举例：
:first-of-type p:first-of-type 选择属于其父元素的首个
2. 2种方式，实现某DIV元素以50px每秒的速度左移100px。
方法一 使用 jQuery
$('div').animate({'left': 100}, 2000);
方法二 js + css3
div {
transition: all 2s linear; // linear 规定以相同速度开始至结束的过渡效果
}
div.style.left = (div.offsetLeft + 100) + 'px';
3. 用DIV+CSS实现三栏布局（左右固定200px，中间自适应）。
HTML
左边
右边
CSS
.container > div {
height: 200px;
}
.container {
padding: 0 200px;
}
.main,
.left,
.right {
position: relative;
float: left;
}
.left,
.right {
width: 200px;
}
.main {
width: 100%;
background-color: yellow;
}
.left {
background-color: blue;
margin-left: -100%;
left: -200px;
}
.right {
background-color: green;
margin-left: -200px;
left: 200px;
}
5. 使用Bootstrap完成模态框的编写，调用方式使用“data-”方式和“JS”方式两种
1>通过data属性
不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指向特定的模态框即可。
例子：
2>通过JavaScript调用
只需一行JavaScript代码，即可通过id myModal调用模态框：
$('#myModal').modal(options)
方法
.modal(options)
将你指定的内容作为模态框启动。其接受一个可选的object类型的参数。
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
手动启动或隐藏模态框。
$('#myModal').modal('toggle')
手动打开一个模态框。
$('#myModal').modal('show')
手动隐藏一个模态框。
$('#myModal').modal('hide')
例子：
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2. 页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
3. 浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
4. html5有哪些新特性? 移除了那些元素? 如何处理HTML5新标签的浏览器兼容问题? 如何区分 HTML 和HTML5？
1) 新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
2) 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
3) 支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
4) 如何区分： DOCTYPE声明\新增的结构元素\功能元素
5. html语义化的理解？
用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
6. 什么是HTML5的离线储存？如何使用？
LocalStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
7. HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或下某个input 设置为 autocomplete=off。
8. 如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
9. CSS3新增伪类举例：
:first-of-type p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
:last-of-type p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个
元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个
元素的每个
元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个
元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个
元素（包括文本节点）。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 元素。
:disabled input:disabled 选择每个禁用的 元素
:checked input:checked 选择每个被选中的 元素。
10.如何居中div？如何居中一个定位元素？
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个定位元素
.div {
Width:500px ;
Margin: 0 0 0 -250px;
position:relative;
background-color:pink;
left:50%;
top:50%;
}
11. 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1. position取值
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2. 定位原点
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative
生成相对定位的元素，相对于其正常位置进行定位。
3. CSS3有哪些新特性？
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
12. 你有哪些性能优化的方法？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
20.你使用过meidia queries（媒体查询）吗（如何使用？），或者移动网站相关的CSS布局？
@media 用宽度( width ) 判断
下面的语法，是最常用到的Media Queries：（下方为同一档案之内容）
@media screen and (min-width: 1200px) {
// 如果视窗宽度 >= 1200px，將会加载此 CSS。
}
@media screen and (min-width: 768px) and (max-width: 979px) {
// 如果视窗宽度介于 768px ~ 979px，将会载入此 CSS。
}
@media screen and (max-width: 767px) {
// 如果视窗宽度 <= 768px，将会载入此 CSS。
}
@media screen and (max-device-width: 480px) {
// 若视窗宽度 <= 480px，则载入此CSS。
}
在 Media Queries 中，我们最常使用min-width 和max-width 来判断使用者的视窗宽度，而max-device-width 则是使用者「装置」的最大宽度。 width 和device-width 差在哪里？
width : 因为浏览器可以自由调整宽度，所以这边指的是该浏览视窗的宽度。
device-width : 就算你把浏览器视窗弄到符合最大(小)宽度，还是不会生效。 因为，device-width 指的是使用者的「装置」最大宽度，而不是浏览器视窗。 所以，device-width 常用在判断手机上。
所以，你也可以自己加上其他的条件下去。 要注意的是，每一个条件之间请用and 来分隔，并要适时加上括号以免错误。
min-width 是最小宽度；max-width 是最大宽度，可以用来表示一定的范围。
编程题
1. 一个满屏 品 字布局 如何设计?
2. 2种方式，实现某DIV元素以50px每秒的速度左移100px。
方法一 使用 jQuery
$('div').animate({'left': 100}, 2000);
方法二 js + css3
div {
transition: all 2s linear; // linear 规定以相同速度开始至结束的过渡效果
}
div.style.left = (div.offsetLeft + 100) + 'px';
3. 用DIV+CSS实现三栏布局（左右固定200px，中间自适应）。
HTML
左边
右边
CSS
.container > div {
height: 200px;
}
.container {
padding: 0 200px;
}
.main,
.left,
.right {
position: relative;
float: left;
}
.left,
.right {
width: 200px;
}
.main {
width: 100%;
background-color: yellow;
}
.left {
background-color: blue;
margin-left: -100%;
left: -200px;
}
.right {
background-color: green;
margin-left: -200px;
left: 200px;
}
5. 使用Bootstrap完成模态框的编写，调用方式使用“data-”方式和“JS”方式两种
1>通过data属性
不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指向特定的模态框即可。
例子：
2>通过JavaScript调用
只需一行JavaScript代码，即可通过id myModal调用模态框：
$('#myModal').modal(options)
方法
.modal(options)
将你指定的内容作为模态框启动。其接受一个可选的object类型的参数。
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
手动启动或隐藏模态框。
$('#myModal').modal('toggle')
手动打开一个模态框。
$('#myModal').modal('show')
手动隐藏一个模态框。
$('#myModal').modal('hide')
例子：