1.HTML5的优点与缺点？
优点：
a、网络标准统一、HTML5本身是由W3C推荐出来的。
b、多设备、跨平台
c、即时更新。
d、提高可用性和改进用户的友好体验；
e、有几个新的标签，这将有助于开发人员定义重要的内容；
f、可以给站点带来更多的多媒体元素(视频和音频)；
g、可以很好的替代Flash和Silverlight；
h、涉及到网站的抓取和索引的时候，对于SEO很友好；
i、被大量应用于移动应用程序和游戏。
缺点：
a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
b、完善性：许多特性各浏览器的支持程度也不一样。
c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
d、性能：某些平台上的引擎问题导致HTML5性能低下。
2.HTML5有哪些新特性、移除了哪些元素？
Html5新增了27个元素，废弃了16个元素，根据现有的标准规范，把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。
结构性元素主要负责web上下文结构的定义
section：在web页面应用中，该元素也可以用于区域的章节描述。
header：页面主体上的头部，header元素往往在一对body元素中。
footer：页面的底部（页脚），通常会标出网站的相关信息。
nav：专门用于菜单导航、链接导航的元素，是navigator的缩写。
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分，确保内容的有效分割。
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure：是对多个元素进行组合并展示的元素，通常与ficaption联合使用。
code：表示一段代码块。
dialog：用于表达人与人之间的对话，该元素包含dt和dd这两个组合元素，dt用于表示说话者，而dd用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监事。
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与legend交互才会显示出来。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
command：用来处理命令按钮。
3.HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
行内元素： 不换行，不占整行
块级元素：换行，占整行
空元素：没有内容的HTML元素被称为空元素
(1)行内元素
*a -锚点 * abbr -缩写
* br -换行
* cite -引用
* code -计算机代码
* em -强调
* font -字体设定(不推荐)
* i -斜体
* img -图片
* input -输入框
* kbd -定义键盘文本
* label -表格标签
* q -短引用
* select -项目选择
* small -小字体文本
* span -常用内联容器，定义文本内区块
* strike -中划线
* strong -粗体强调
* sub -下标
* sup -上标
* textarea -多行文本输入框
* tt -电传文本
* u -下划线
* var -定义变量
(2)块元素(block element)
* address -地址
* blockquote -块引用
* center - 居中对齐块
* dir -目录列表
* div -常用块级容易，也是css layout的主要标签
* dl -定义列表
* form -交互表单
* h1 -h6
* hr -水平分隔线
* menu -菜单列表
* ol -排序表单
* p -段落
* pre -格式化文本
* table -表格
* ul -非排序列表
可变元素:可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button -按钮
* del -删除文本
* iframe - inline frame
* ins -插入的文本
(3)空元素(在HTML[1]元素中，没有内容的HTML元素被称为空元素)
br hr input img link meta
4.请你描述一下 cookies，sessionStorage 和 localStorage 的区别?
sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的
cookies会发送到服务器端。其余两个不会。
区别：
- Cookie
+每个域名存储量比较小（各浏览器不同，大致4K）
+所有域名的存储量有限制（各浏览器不同，大致4K）
+有个数限制（各浏览器不同）
+会随请求发送到服务器
- LocalStorage
+永久存储
+单个域名存储量比较大（推荐5MB，各浏览器不同）
+总体数量无限制
- SessionStorage
+只在Session内有效
+存储量更大（推荐没有限制，但是实际上各浏览器也不同）
5.什么是WebGL,它有什么优点?
WebGL（全写Web Graphics Library）是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
WebGL完美地解决了现有的Web交互式三维动画的两个问题：
第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;
第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
通俗说WebGL中canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，这些库多数用于HTML5游戏开发。
6.说说你对HTML语义化的理解?
(1)什么是HTML语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
(2)为什么要语义化？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
7.link和@import的区别?
<link rel='stylesheet' rev='stylesheet' href='CSS文件' type='text/css' media='all' />
<style type='text/css' media='screen'>
@import url('CSS文件');
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
8.说说你对SVG理解?
SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。
特点：
(1)任意放缩
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
(2)文本独立
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件
总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
(4)超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制
SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
(6)交互X和智能化。SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。
浏览器支持：
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一个插件-如Adobe SVG浏览器，这是免费提供的。
9.说说超链接target属性的取值和作用？
target这个属性指定所链接的页面在浏览器窗口中的打开方式。
它的参数值主要有：
a、_blank：在新浏览器窗口中打开链接文件
b、_parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一。
c、_self：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。但是我不太理解。
d、_top：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。
10.`data-`属性的作用是什么？
`data-`为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的`dataset`属性获取，不支持该属性的浏览器可以通过`getAttribute`方法获取:
需要注意的是：`data-`之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。
即：当没有合适的属性和元素时，自定义的data属性是能够存储页面或App的私有的自定义数据。
JQuery用法：
Some awesome datavar myid=$("#awesome").data('myid'); console.log(myid);Some awesome datavar gameStatus= $("#awesome-json").data('awesome').game; console.log(gameStatus);JS方法：
var tree = document.getElementById("tree"); //getAttribute()取值属性 console.log(tree.getAttribute("data-leaves")); ; //setAttribute()赋值属性 tree.setAttribute("data-leaves","48"); //data-前缀属性可以在JS中通过dataset取值，更加方便console.log(tree.dataset.leaves); //赋值 tree.dataset.plantHeight = "3m";tree.dataset.leaves--; //新增data属性 tree.dataset.age = "100"; //删除，设置成null，或者delete tree.dataset.leaves = null; delete tree.dataset.age;
11.HTML全局属性(global attribute)有哪些?
MDN: html global attribute或者W3C HTML global-attributes accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素 class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素 contenteditable: 指定元素内容是否可编辑 contextmenu: 自定义鼠标右键弹出菜单内容 data-*: 为元素增加自定义属性 dir: 设置元素文本方向 draggable: 设置元素是否可拖拽 dropzone: 设置元素拖放类型： copy, move, link hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果 id: 元素id，文档内唯一 lang: 元素内容的的语言 spellcheck: 是否启动拼写和语法检查 style: 行内css样式 tabindex: 设置元素可以获得焦点，通过tab可以导航 title: 元素相关的建议信息 translate: 元素和子孙节点内容是否需要本地化
12.Label的作用是什么，是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
注意:label的for属性值要与后面对应的input标签id属性值相同
13.如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker；
也可以调用localstorage、cookies等本地存储方式；
localstorage另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari在无痕模式下设置localstorge值时会抛出QuotaExceededError的异常；
if (typeof(Storage) !== "undefined") { // Store localStorage.setItem("lastname", "Gates"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); } else { document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ..."; }
14.title与h3的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。
i内容展示为斜体，em表示强调的文本；
Physical Style Elements --自然样式标签
b, i, u, s, pre
Semantic Style Elements --语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签,但不能滥用,如果不能确定时首选使用自然样式标签。
15.简述一下src与href的区别？
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。