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属性写全，可以保证在各种浏览器中都能正常使用。