就从第一张图开始吧
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;
移除了哪些元素
纯表现元素
<basefont> 默认字体,不设置字体,以此渲染
<font> 字体标签
<center> 水平居中
<u> 下划线
<big> 大字体
<strike> 中横线
<tt> 文本等宽
框架集
<frameset>
<noframes>
<frame>
如何处理html5新标签的兼容性
支持HTML5新标签:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式。
当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv
框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
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模式下都能保持同一效果
<div style="height:1px;overflow:hidden;background:red"></div>
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前端
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。