前端面试题目--01

最新推荐文章于 2024-09-20 20:51:56 发布

watin_csdn

最新推荐文章于 2024-09-20 20:51:56 发布

阅读量205

点赞数 1

分类专栏：面试题

面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、浏览器页面有哪三层组成，分别是什么，作用是什么？

构成：结构层，表示层，行为层

分别是：HTML、CSS、JavaScript

作用：HTML实现页面结构，CSS完成页面的表现和风格JavaScript实现一些客户端的功能与业务。

2、Doctype作用，严格模式与混杂模式如何区别，他们有何意义？

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。其中，DTD，例如xhtml-trasitional.dtd叫做文档类型定义，里面包含了文档的规则，浏览器就会根据你定义的DTD来解释你页面的标识，并展现出来。HTML 4.01 和 XHTML 都基于 SMGL，所以需要在文档开头声明引用一个 DTD。

　　<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
　　<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
　　在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML（标准通用标记语）。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

HTML 和 XHTML 的DOCTYPE 声明都有 strict/transitional/frameset 三种模式：

1》HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

2》HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

3》HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

、严格模式与混杂模式的语句解析不同点有哪些？

1）盒模型的高宽包含内边距padding和边框border

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。

2）可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

body{text-align:center};#content{text-align:left}

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

3、主流浏览器的内核是什么？

参考非常好的一篇博客：https://www.iplaysoft.com/browsers-engine.html

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

Rendering Engine，顾名思义，就是用来渲染网页内容的，将网页的代码转换为最终你看得见的页面。因为是排版，所以肯定会排版错位等问题。为什么会排版错位呢？有的是由于网站本身编写不规范，有的是由于浏览器本身的渲染不标准。

现在有几个主流的排版引擎，因为这些排版引擎都有其代表的浏览器，所以常常会把排版引擎的名称和浏览器的名称混用，比如常的说IE内核、Chrome内核。其实这样子是不太合理的，因为一个完整的浏览器不会只有一的排版引擎，还有自己的界面框架和其它的功能支撑，而排版引擎本身也不可能实现浏览器的所有功能。下面罗列一下几款主流的排版引擎和浏览器。

1、Trident 内核（Windows）
Trident 就是大名鼎鼎的 IE浏览器所使用的内核，也是很多浏览器所使用的内核，通常被称为IE内核。基于Trident内核的浏览器非常多，这是因为Trident内核提供了丰富的调用接口。老的Trident内核（比如常说的IE6内核）一直是不遵循W3C标准的，但是由于当时IE6的市场份额最大，所以后果就是大量的网页专门为IE6等老Trident内核编写，在IE6下显示很正常，但其实这些网页的代码并不符合W3C标准，于是，完全依据W3C标准写的网页在老的Trident内核下面又出现偏差，这就是为什么很多人觉得后来的IE9的网页排版有时会乱了，而IE6则正常，其实不是浏览器兼容性差了，而是你访问的网页不符合新的标准。目前可供调用的最新版的Trident内核是IE9所用的内核，相较之前的版本对W3C标准的支持增强了很多。

Trident内核的常见浏览器有：
IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；
世界之窗、 360安全浏览器、傲游；搜狗浏览器；腾讯TT；阿云浏览器（早期版本）、百度浏览器（早期版本）、瑞星安全浏览器、Slim Browser； GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器；闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器；
其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。

2、Gecko（跨平台）
Netscape6 启用的内核，现在主要由Mozilla基金会进行维护，是开源的浏览器内核，目前最主流的Gecko内核浏览器是Mozilla Firefox，所以也常常称之为火狐内核。因为Firefox的出现，IE的霸主地位逐步被削弱，Chrome的出现则是加速了这个进程。非Trident内核的兴起正在改变着整个互联网，最直接的就是推动了编码的标准化，也使得微软在竞争压力下不得不改进IE。不过比较可惜的是，虽然是开源的，也开发了这么多年，基于Gecko的浏览器并不多见，除了一些简单的改动（坑爹的X浏览器）或者是重新编译（绫川ayakawa、tete009），深度定制或者增强型外壳的还比较少见。另外就是有一些其它软件借用了Gecko内核，比如音乐管理软件SongBird。常见的Gecko内核的浏览器：Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon

3、KHTML（Linux）
KDE开发的内核，速度快捷，容错度低。这个内核可能不见得很多人知道，但是后面再看下去你就明白了。常见的KHTML内核的浏览器：Konqueror

4、WebKit（跨平台）
由KHTML发展而来，也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核，火热倒不是说市场份额，而是应用的面积和势头。因为是脱胎于KHTML，所以也是具有高速的特点，同样遵循W3C标准。从目前看来，WebKit 内核是最有潜力而且是已经有相当成绩的新兴内核，性能非常好，而且对W3C标准的支持很完善，本人非常看好它。

webkit 当前发展势头最强劲的WebKit内核

常见的WebKit内核的浏览器：Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

5、Chromium（跨平台）
其实 Chromium 就是 WebKit，维基百科里面并没有将Chromium从WebKit分出来，这个区分完全是基于我个人的恶趣味。记得以前看过一个大牛的博文说过，Chromium把WebKit的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。这个我自己也没有考究过，但是估计可信。这个也能解释为什么Gecko和WebKit出来了这么久，第三方编译、定制的版本并不多，但是由Chromium衍生出来的浏览器早就满坑满谷了。

常见的Chromium内核的浏览器：Google Chrome、Chromium、SRWare Iron、Comodo Dragon

6、Presto（跨平台）
Opera 所采用的内核，准确地说，是Opera 7.0及以后版本的内核，Opera 3.5-6.1版本使用的内核叫做Elektra。不用说，Presto对W3C标准的支持也是很良好的。虽然我很喜欢Opera，但是我对Presto的渲染速度一直有保留态度。之前在OperaChina论坛看见有人说过，Presto优先解析文字，保证可阅读性，媒体资源的渲染放后。常见的Presto内核的浏览器：Opera

7、更多其它内核可以参考维基百科

4、对WEB标准以及W3C的理解与认识？

WEB标准不是某一个标准，而是一系列标准的集合，web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）。标签字母要小写

2）。标签要闭合

3）。标签不允许随意嵌套

2.对于css和js来说

1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。