每日五道前端面试题（三）

一、请写出至少5个HTML5新增的标签，并说明其语义和应用场景？

<header>：主要用于定义内容的介绍展示区域，描述了文档的头部区域，比如定义文章的头；
<nav>：定义导航链接的部分；
<section>：定义了文档中的节，比如章节、页眉、页脚或文档中的其他部分；
<article>：定义独立的内容；
<aside>：定义页面主区域之外的内容，如侧边栏；
<figure>：定义独立的流内容，比如图形、图标、照片、代码等；
<footer>：定义文档的底部区域，描述文档的页脚，比如作者、著作权信息、联系方式等；

二、简单描述 DOCTYPE 的作用？严格模式与混杂模式如何区分？它们有何意义？

DOCTYPE 的作用：DOCTYPE声明在文档的最前面，位于根元素HTML的起始标签之前，这样一来，在浏览器解析HTML文档之前就可以确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对CSS代码甚至JavaScript脚本的解析。

严格模式和混杂模式的区别：

• 严格模式：严格模式的排版和JS运作模式是以浏览器支持的最高标准运行
• 混杂模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作

当DOCTYPE不存在或者格式不正确时，会导致文档以混杂模式呈现

三、简介盒子模型

1. 盒子模型的概念
   盒子模型（box model）：把HTML中元素看作为一个矩形盒子，每个元素都占有一定的空间，无论是div、h1~h6、还是p标签，都可以看成是盒子。
2. 盒子模型的组成
   一个元素占有空间的大小由几个部分构成，包括：
   ① 元素的内容（content）
   ② 元素的内边距（padding），内容与边框之间的距离
   ③ 元素的边框（border）
   ④ 元素的外边距（margin），边框与外部元素之间的距离

padding和margin分别有上下左右四个方向，注意：两者都不允许取负值
border：border-syle有多种取值，常见的为：solid dotted double dashed ; 分别代表实线、点状线、双线、虚线

3. 盒子模型的分类
   盒模型分为 ： W3C标准盒子 、IE盒子
   ① W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容，不包含padding与margin，并且盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素.
   
   ②IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。
   

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
简单来说就是可以通过box-sizing的取值来切换盒模型，它的取值可以为content-box、border-box；
box-sizing的默认属性是content-box。

四、解释下css sprites原理以及优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。

• 优点：

减少网页的http请求

• 缺点：

1.在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂
2.CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
3.在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

五、浅谈你对浏览器内核的理解？常见的浏览器内核有哪些？

浏览器内核主要分成两个部分： 渲染引擎(Render Engine) 和JS引擎。

• 渲染引擎
  负责对网页语法的解释（如标准通用标记语言下的一个应用 HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

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

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

常见浏览器内核：
Trident 内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称 MSHTML]
Gecko 内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等。
Presto 内核：Opera7 及以上。 [Opera 内核原为：Presto，现为、Blink;]
Webkit 内核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]
EdgeHTML 内核：Microsoft Edge。 [此内核其实是从 MSHTML fork 而来，删掉了几
乎所有的 IE 私有特性]