认识达内从这里开始

程序员技术面试是永远都不会缺席的，所以为了能够让大家顺利的通过面试，我们今天就一起来了解一下，与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、h4…p、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数据在当前浏览器窗口关闭后自动删除。

cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭部分面试官可能还会再深入一些：

1)、如何让cookie浏览器关闭就失效?——不对cookie设置任何正、负或0时间的即可;

2)、sessionStorage在浏览器多窗口之间(同域)数据是否互通共享?——不会，都是独立的，localStorage会共享;

3)、能让localStorage也跟cookie一样设置过期时间?答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较详细可看我之前写的另一篇分享(小程序项目总结)。

5、简述一下你对HTML语义化的理解?

语义化是指根据内容的类型，选择合适的标签(代码语义化),即用正确的标签做正确的事情;html语义化让页面的内容结构化，结构更清晰，有助于浏览器、搜索引擎解析对内容的抓取;语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。