Question

前端面试需要掌握哪些html问题？

Answer 1

程序员技术面试是永远都不会缺席的，所以为了能够让大家顺利的通过面试，我们今天就一起来了解一下，与html相关的一些面试题都有哪些。

1、什么是盒子模型?

有些面试官会问你对盒子模型的理解，在我们平时看到的网页中，内部的每一个标签元素它都是有几个部分构成的：内容(content)、外边距(margin)、内边距(padding)、边框(border)，四个部分组成，当你说完这些面试官是不会满意这个答案的，因为还有一个重点(IE盒模型和标准盒模型的区别)———IE盒模型的content包括border、padding

本文由@IT·平头哥联盟-席填坑官?苏南分享

2、页面导入样式时有几种方法，它们之间有区别?

link标签引入，也是当下用的多的一种方式，它属于XHTML标签，除了能加载css外，还能定义rel、type、media等属性;

@import引入，@import是CSS提供的，只能用于加载CSS;

style嵌入方式引入，减少页面请求(优点)，但只会对当前页面有效，无法复用、会导致代码冗余，不利于项目维护(缺点)，此方式一般只会项目主站页使用(腾讯、淘宝、网易、搜狐)等大型网站主页，之前有看到过都是这种方式，但后来有些也舍弃了

小结：link页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载,且link是XHTML标签，无兼容问题;link支持动态js去控制DOM节点去改变样式，而@import不支持，

3、简单讲述一下块元素、内联元素、空元素有哪些，它们之间的区别?

行内元素有：a、b、span、img、input、select、textarea、em、img、strong(强调的语气);

块级元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4p、section、div、form等;

空元素：inputtype="hidden"/>、br>、hr>、link>、meta>;

小结：块元素总是独占一行，margin对内联元素上下不起作用;

4、说说cookies，sessionStorage、localStorage你对它们的理解?

cookie是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)，cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

大小：cookie数据大小不能超过4k,sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

时效：localStorage存储持久数据，电脑培训发现浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存;sessionStorage数据在当前浏览器窗口关闭后自动删除。