就从第一张图开始吧
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前端