说到面试题，我们见惯了千篇一律的面试题库，刷题似乎并不能完全解决我们遇到的问题，在面试中得到面试官的青睐，更多的还是要有自己独立思考的能力，结合面试题中的答案，反馈总结出一套自己的答案标准。下面我们为大家精心挑选了4道HTML面试题，我们一睹为快吧：

1.div+css的布局较table布局有什么优点？

1.改版的时候更方便 只要改css文件；

2.页面加载速度更快、结构化清晰、页面显示简洁；

3.表现与结构相分离；

4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

2.请描述一下cookie，sessionStorage和localStorage的区别？　

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

3.简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

4.清除浮动的几种方法

(1)给父元素添加高度height，防止父元素无法获取高度的问题（防止父元素高度变为0），只建议高度固定的布局

(2)结尾处加空div标签给 clear:both

(3)父级div定义 伪类 :after 和 zoom

div:after{
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:hidden;
    clear:both; 
}
div{
    zoom:1;
}

(4) 父级div定义 overflow:hidden或auto

(5)（只做了解,不推荐使用）父级div 也一起浮动

(6)（只做了解,不推荐使用）父级div定义 display:table

看完了这4道高质量的面试题，我们是否发现了与其他面试题的区别呢，我个人觉得还是要因人而异，培养自己举一反三的能力，才能真正意义上的做对题。我们也可以在动力节点在线的面试专题中进行题海战术，多做题总是没错的，熟能生巧。