就从第一张图开始吧

1.0 第一张图

1.1 页面导入样式时，使用link和@import有什么区别？

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

1.2 介绍一下你对浏览器内核的理解？

主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行JavaScript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

1.3常见的浏览器内核有哪些？

Trident内核：IE，360，搜过浏览器；

Gecko内核：Netscape6及以上版本，

Presto内核：Opera

Blink内核：Opera；

Webkit内核：Safari，Chrome

1.4 html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签浏览器兼容性问题

新特性

增强了图形渲染(canvas)、影音(video，audio)、数据存储(sessionStorage。lcoalStorage)、新的技术webworker(专用线程)、 websocketsocket通信、Geolocation 地理定位

语意化更好的内容元素，比如article、footer、header、nav、section;

表单控件，calendar、date、time、email、url、search;

移除了哪些元素

纯表现元素

默认字体，不设置字体，以此渲染

字体标签

水平居中

下划线

大字体

中横线

文本等宽

框架集

如何处理html5新标签的兼容性

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式。

当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架

html5.js cdn 地址：点我

1.5 请描述一下cookie、sessionStorage和localStorage的区别？

相同点：都存储在客户端

不同点：

1.存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3.数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

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

1.6 实现不使用border画出1px高的线。在不同浏览器Quirksmode和csscompat模式下都能保持同一效果

1.7 网页验证码是干嘛的。是为了解决什么安全问题？

验证码是为了防止一些人使用软件恶意注册、发帖等行为而设的。

它的存在是为了确保登陆网站的是一个坐在电脑面前的真人，而不是一个自动登陆的软件。

1.8 title和h1的区别。b和strong的区别、i与em的区别

title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：

b会重读，而 是展示强调内容。

i内容展示为斜体

em 表示强调的文本；

1.9 介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

标准的css盒子模型宽高就是内容区宽高；

低端IE css盒子模型宽高 内边距﹢边界﹢内容区；

1.20 css选择符有哪些？哪些属性可以继承？

css选择器

类型选择符(body)、群组选择符(h1，h2，h3，span)、包含选择符(h2 span)、ID选择符(#id)、Class选择符(.content)

哪些可以继承

class属性，伪类A标签，列表ul、li、dl、dd、dt可以继承

拓展：css优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

更多技术分享欢迎关注微信公众号：node前端