2018前端必考面试题总结4
2018前端必考面试题总结4
-
介绍一下CSS的盒子模型
盒模型的组成包括:content,padding,border,margin组成。
有两种盒模型:标准盒模型和IE盒模型。
两种盒模型的主要区别是:标准盒模型的宽高是content的宽高,而IE盒模型的宽高是指content+padding+border
设置盒模型的方式是:设置box-sizing
box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型 -
对web标准以及W3C的理解和认识
web标准,简单来说就是将页面的结构、表现、行为各自独立实现(结构、表现和行为相分离原则),使他们更加模块化。但一般产生行为时,结构和表现会发生变化,这三者的界限就会变模糊。
W3C对web标准提出了规范化的要求,包含以下几点:
1.对结构的要求:(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)
(1)标签字母要小写;
(2)标签要闭合;
(3)标签不允许随意嵌套。
2.对CSS和JS 的要求:
(1)尽量使用外联CSS样式表和JS脚本,使结构、表现和行为分成三块,符合规范,同时提高页面渲染速度,提高用户体验;
(2)样式尽量少用行间样式,使结构和表现分离,标签的id和class命名要做到见名知意,标签越少,加载越快,用户体验更高,代码维护更简单,便于改版;
(3)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。 -
xhtml和HTML有什么区别?
HTML与xhtml之间的差别,粗略可以分为两大类:一个是功能上的差别,另外是书写习惯的差别。关于功能上的差别,主要是xhtml可兼容各大浏览器、手机已经PDA,并且浏览器能快速正确的编译网页。
因为xhtml的语法较为严谨,所以如果你是习惯松散结构的HTML编写者,那需要特别主要xhtml的规则。需要注意一下几条规则:
(1)所有的标签都必须小写;
(2)标签必须成对;
(3)标签顺序必须正确;
(4)所有属性都必须使用双引号;
(5)不允许使用target=“_blank”,从XHTML1.1开始全面禁止target属性,如果想要有开新窗口的功能,就必须改写为rel=”external”,并且搭配JavaScript实现此效果。 -
浏览器的内核分别是什么?
IE:Trident内核
Firefox:gecko内核
Safari:webkit内核
opera:以前是presto内核,现在改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与opera software共同开发)Trident(IE内核):该内核程序在1997年在IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到IE11,普遍称作“IE内核”。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现。
Gecko(Firefox内核):Netscape6开始采用的内核,后来的Mozilla FireFox(火狐浏览器)也采用了该内核,Gecko的特点是代码完全公开,因此,其可开放程度很高,Gecko内核的浏览器也很多,这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。
Presto(Opera内核):(已废弃)该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,然而代价是牺牲了网页的兼容性。(Opera现已改用Google Chrome的Blink内核)
Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。Webkit也是*软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。
Blink:Blink是一个由Google和Opera Software开发的浏览器排版引擎,Google计划将这个渲染引擎作为Chromium计划的一部分,并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。 -
img标签上title与alt属性的区别是什么?
alt是给搜索引擎识别,在图像无法显示时的代替文本
title是关于元素的注释信息,主要是给用户看的,当鼠标放到图片上时会显示title属性的值。
但是IE浏览器中alt起到了title的作用,变成文字提示。在定义img对象时,将alt和title属性写全,可以保证在各种浏览器中都能正常使用。