2.5　面试与笔试试题解析

前端开发是创建Web页面或App等前端界面呈现给用户的过程，通过HTML、CSS和JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。随着互联网技术的发展和HTML 5、CSS 3的应用，现代网页更加美观，交互效果显著，功能更加强大。下面将会介绍一些精选面试与笔试题解析，可以帮助读者了解和熟悉面试与笔试题类型。

2.5.1　怎样区分HTML 5、HTML和XHTML

题面解析：本题主要考查应聘者对HTML 5、HTML和XHTML之间的熟练程度。看到此问题，应聘者应该对三者的定义以及使用时的关键注意点来区分它们之间的不同之处。

解析过程：

了解HTML 5、HTML和XHTML之间的基本概念，然后对三者进行比较。

基本概念如下。

·　HTML 5：是HTML、XHTML和HTML DOM的新标准。HTML 5是最先由WHATWG（Web超文本应用技术工作组）命名的一种超文本标记语言，随后和W3C的xhtml 2.0相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 = HTML + CSS 3 + html +JavaScript + API。

·　HTML：超文本标记语言，是一种基本的Web网页设计语言。

·　XHTML：可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从本质上来说，XHTML是一个过渡技术，结合了部分XML的强大功能以及大多数HTML的简单特性。

特性区别如下。

·　HTML 5：①用于绘画的canvas元素。②用于媒介回放的video和audio元素。③对本地离线存储有更好的支持。④新的特殊内容元素，如article、footer、header、nav、section。⑤新的表单控件，如calendar、date、time、email、url、search。⑥在语义上有很大的优势，提供了一些新的标签，如<header><article><footer>提供了语义化标签，可以更好地支持搜索引擎的读取，便于SEO的蜘蛛的爬行。

·　HTML：①标识文本，如定义标题文本、段落文本、列表文本、预定义文本。②建立超链接，便于页面链接的跳转。③创建列表，把信息有序地组织在一起以方便浏览。④在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。⑤可以制作表格，以便显示大量数据。⑥可以制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。⑦没有体现结构语义化的标签，通常都是这样来命名的：<div id="header"></div>，表示网站的头部。

·　XHTML：①要求正确嵌套。②所有元素必需关闭。③区分大小写。④属性值要用双引号。⑤用id属性代替name属性。⑥特殊字符的处理。⑦可以很好地处理各大浏览器的兼容问题。

2.5.2　请阐述你对W3C的理解

题面解析：本题是对W3C知识点的考查，应聘者在回答该问题时，不能按照定义直接背出来，而是要阐述自己对W3C概念的理解。

解析过程：

下面从Web的标准规范、脚本语言和样式等来进行阐述。

（1）Web标准规范要求：书写标签必需闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索概率。

（2）建议使用外链CSS和JavaScript脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。

（3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。遵循W3C制定的Web标准，能够使用户浏览者更方便，使网页开发者之间有更好的交流。

（4）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问和更广泛的设备所访问，使用更少的代码和组件，从而降低维护成本，且改版更为方便。

2.5.3　HTML文档中的DOCTYPE有什么作用

题面解析：本题主要考查应聘者对HTML文档中的DOCTYPE的作用的了解程度，每次在编写前端页面的时候都会存在DOCTYPE，细心的读者可能已经了解其作用，那么不了解的读者可以跟着这道面试题进行简单的了解。

解析过程：

（1）DOCTYPE的定义。DOCTYPE是DocumentType的简写，它并不是HTML标签，也没有结束标签。它是一种标记语言的文档类型声明，即告诉浏览器当前HTML是用什么版本编写的。

☆注意☆　DOCTYPE的声明必须是HTML文档的第一行，位于HTML标签之前。大多数Web文档的顶部都有DOCTYPE声明，它是在新建一个文档时，由Web创作软件草率处理的众多细节之一。很少人会去注意DOCTYPE，但在遵循标准的任何Web文档中，它都是一项必需的元素。DOCTYPE会影响代码验证，并决定了浏览器最终如何显示用户的Web文档。

（2）DOCTYPE的作用。DOCTYPE在Web设计中用来声明文档类型。在所有HTML文档中规定DOCTYPE是非常重要的，这样浏览器就能了解预期的文档类型，告诉浏览器要通过哪一种规范（DTD）解析文档（如HTML或XHTML规范）。

2.5.4　DOCTYPE文档类型有几种

题面解析：本题主要考查在使用页面编写代码时出现的DOCTYPE的相关内容，在不同的版本中规定的类型也是不同的。下面简单介绍在HTML标签中可以声明的三种类型。

解析过程：

标签可声明三种DTD类型，分别表示严格版本（Strict）、过渡版本（Transitional）以及基于框架（Frameset）的HTML文档。

HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。

XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

2.5.5　Quirks模式是什么？它和Standards模式的区别

题面解析：本题主要考查HTML的DTD类型中Quirks模式和Standards模式，应聘者可以简单介绍Quirks和Standards的定义是什么，然后再回答两者之间的区别。

解析过程：

（1）Quirks模式的定义。

在写程序时，程序员会经常遇到这样的问题：如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE 6以前的页面一般都不会去写DTD，所以IE 6就假定如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

（2）区别如下。

·　盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度；在Quirks模式下，IE的宽度和高度还包含了padding和border。

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

·　设置行内元素的高宽：在Standards模式下，给行内元素设置width和height都不会生效，而在Quirks模式下，则会生效。

·　设置水平居中：使用margin:0 auto在Standards模式下可以使元素水平居中，但在Quirks模式下却会失效。

2.5.6　HTTP状态码

试题题面：在HTTP中，总共有5类状态码，请简单介绍一下这5类状态码。

题面解析：本题主要考查应聘者对状态码的了解。应聘者可以根据自己在项目练习时遇到的状态码进行回答。

解析过程：

通过HTTP状态码可以很方便地了解请求的状态。状态码是面试题中经常出现的，所以很有必要总结一下，对读者今后的面试会很有帮助。

HTTP状态码分为5大类。

（1）以1开头：信息状态码，如表2-4所示。

表2-4　信息状态码

（2）以2开头：成功状态码，如表2-5所示。

表2-5　成功状态码

（3）以3开头：重定向状态码，如表2-6所示。

表2-6　重定向状态码

（4）以4开头：客户端错误状态码，如表2-7所示。

表2-7　客户端错误状态码

（5）以5开头：服务端错误状态码，如表2-8所示。

表2-8　服务端错误状态码

2.5.7　什么是IP地址

题面解析：本题主要考查应聘者是否了解协议，了解计算机，每台计算机都会有一个IP地址，甚至通过IP地址可以让两台计算机进行连接。

解析过程：

了解IP地址之前，先了解IP协议。

·　IP协议：了解IP地址，先了解IP协议。IP协议是为计算机网络相互连接进行通信而设计的协议。IP协议中有一个非常重要的内容，那就是给因特网上的每台计算机和其他设备都规定了一个唯一的地址，叫作“IP地址”。

·　IP地址：IP地址（Internet Protocol Address）是指互联网协议地址，又译为网际协议地址。IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。

2.5.8　浏览器内核

试题题面：常见的浏览器内核有哪些？简单介绍一下你对浏览器内核的理解？

题面解析：本题主要考查应聘者对浏览器以及浏览器内核是否了解。建议应聘者可以关注一下这方面的知识点，做到应聘时游刃有余。

解析过程：

浏览器内核的英文是Rendering Engine，中文翻译有很多种，如排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核。

浏览器内核就是用来渲染网页内容的，将开发者写的代码转换为用户可以看见的完美页面。由于会牵扯到排版问题，可能会出现排版错位等问题。有的是由于网站本身编写不规范，有的是由于浏览器本身的渲染不标准。现在有几个主流的排版引擎，因为这些排版引擎都有其代表的浏览器，所以常常会把排版引擎的名称和浏览器的名称混用，如常说的IE内核、Chrome内核。因为一个完整的浏览器不会只有一个排版引擎，还有自己的界面框架和其他的功能相辅相成，而排版引擎本身也不可能实现浏览器的所有功能。

下面讲解几款主流的浏览器和浏览器内核，如表2-9所示。

表2-9　主流的浏览器和浏览器内核

浏览器内核的理解：渲染引擎（layout engineer或Rendering Engine）和JavaScript引擎。

（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。

（2）JavaScript引擎：解析和执行JavaScript来实现网页的动态效果。一开始，渲染引擎和Java Script引擎并没有很明确的区分，后来JavaScript引擎越来越独立，内核就倾向于只指渲染引擎。

2.5.9　行内元素和块级元素

试题题面：行内元素有哪些？块级元素有哪些？行内元素和块级元素有什么区别？

题面解析：本题主要考查应聘者对基本的HTML语言是否了解，在平时编写前端页面代码的时候都会对行内元素和块级元素进行使用。应聘者在回答之前可以先回答行内元素和块级元素分别常用的有哪些，然后回答它们之间的区别。

解析过程：

行内元素大多数为描述性标记，如表2-10所示。

表2-10　常见的行内元素

块级元素大多数为结构性标记，如表2-11所示。

表2-11　常见的块级元素

行内元素和块级元素之间的区别如下。

·　块级元素会独占一行，其宽度自动填满其父元素宽度。行内元素不会独占一行，相邻的行内元素会排列在同一行里，在一行不能完全排列时，才会换行，其宽度随元素的内容而变化。

·　一般情况下，块级元素可以设置width和height属性，行内元素设置width和height无效。块级元素可以设置margin和padding，行内元素的水平方向的padding-left、padding-right、margin-left和margin-right都产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top和margin-bottom都不会产生边距效果（水平方向有效，竖直方向无效）。

☆注意☆　块级元素即使设置了宽度，仍然是独占一行的。

2.5.10　link和@import

试题题面：页面导入样式时，使用link和@import有什么区别？

题面解析：本题主要考查应聘者对前端页面编写时使用链接link和导入包import之间的区别，应聘者可以先想什么情况下使用link，什么情况下使用import，然后从中找出它们之间的不同之处。

解析过程：

link和@import的区别有以下几点。

·　从属关系区别：@import是CSS提供的语法规则，只有导入样式表的作用。link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、REL连接属性等。

·　加载顺序区别：加载页面时，link标签引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后被加载。

·　兼容性区别：@import是CSS 2.1才有的语法，故只可在IE 5+才能识别，link标签作为HTML元素，不存在兼容性问题。

·　DOM可控性区别：可以通过JavaScript操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

2.5.11　HTML 5新特性和浏览器兼容

试题题面：HTML 5中有哪些新特性？如何处理HTML 5新标签的浏览器兼容问题？

题面解析：本题主要考查应聘者对HTML 5的新特性的了解，以及编写代码时会遇到的浏览器有时不兼容的问题。

解析过程：

HTML 5新特性有以下几点。

·　离线缓存，可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。

·　音频、视频自由嵌入，多媒体形式更为灵活。

·　地理定位。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，较为灵活。

·　Canvas绘图，提升移动平台的绘图能力。使用Canvas API可以简单绘制热点图收集用户体验资料，支持图片的移动、旋转、缩放等常规编辑。

·　丰富的交互方式。提升互动能力，拖曳、撤销历史操作、文本选择等。

·　开发及维护成本低，这是相对于原生App开发来说的。更低的开发及维护成本使页面变得更小，减少了用户不必要的支出；而且，性能更好使耗电量更低。

·　CSS 3视觉设计师的辅助利器的支持。CSS 3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。

·　HTML 5调用手机摄像头和手机相册、通讯录等功能。

当在页面中使用HTML 5新标签时，可能会得到三种不同的结果。

·　结果1：新标签被当作错误处理并被忽略，在DOM构建时会当作这个标签不存在。

·　结果2：新标签被当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素。

·　结果3：新标签被识别为HTML 5标签，然后用DOM节点对其进行替换。

解决办法有以下两种。

方法一：实现标签被识别。

通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。

方法二：JavaScript解决方案。

使用HTML 5 shim：

在<head>中调用以下代码：

     <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

当然也可以直接把这个文件下载到自己的网站上，但这个文件必须在head标签中调用。

使用kill IE 6：

在</body>之前调用以下代码：

2.5.12　如何实现浏览器内多个标签页之间的通信

题面解析：本题主要考查应聘者对数据库存储的知识是否了解。数据存储有本地和服务器存储两种方式，对前端开发来讲，只需要讲解用本地存储的方式来解决就好。当然如果知道服务器端的方式更好。本题的难易程度一般，只要能够说出思路就可以，至少说出两种解决方法。

解析过程：

实现浏览器内多个标签页之间的通信有以下两种方法。

（1）使用localStorage：在一个标签页里面使用localStorage.setItem(key,value)，可监听添加、修改、删除的动作，即可得到localstorge存储的值，实现不同标签页之间的通信。

语法代码如下所示：

（2）使用cookie+setInterval()：将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

语法代码如下所示：

2.5.13　元素的alt和title有什么异同

题面解析：本题主要考查应聘者对基本元素alt和title的使用及功能定义是否完全了解，从而找出它们的相同和不同之处。

解析过程：

（1）alt和title相同之处：都会飘出一个小浮层，显示文本内容。

（2）alt和title不同之处如下。

·　alt是img的必要属性，只能用在img、area和input元素中；title不是img的必要属性，任何元素都可以使用title属性。

·　alt只能是元素的属性，而title既可以是元素的属性，也可以是标签，如<title>标题</title>。

·　通常容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中，鼠标指针经过图像时显示的提示文字是alt的内容，而忽略了title属性，这个会发生误导。因此，如果想在IE中显示title的内容，要么title属性和alt一致，要么alt内容为空（""，空格也不能有）。不过，在新版的IE（IE 8及以上）中，已不会出现这种情况了。

·　当a标签内嵌套img标签时，起作用的是img的title属性。

2.5.14　CSS和JavaScript的文件和图片

试题题面：如果要制作一个访问量很高的大型网站，如何管理所有的CSS、JavaScript文件和图片？

题面解析：本题主要考查应聘者是否接触过大型的项目，是否会有效合理地利用资源，让代码和文件进行合理的布局。

解析过程：

大型网站涉及人手、分工、同步等。

·　团队必需确定好全局样式（globe.css）和编码模式（utf-8）等。

·　编写习惯必需一致（例如都采用继承式的写法，单样式都写成一行）。

·　标注样式编写人，各模块都及时标注（标注关键样式调用的地方）。

·　页面进行标注（如页面、模块、开始和结束）。

·　CSS和HTML分文件夹并行存放，命名必须统一（如index.css）；JavaScript分文件夹存放命名，以该JavaScript功能为准的英文翻译；图片采用整合的image.png格式文件，尽量将所有的文件整合在一起，这样方便将来的管理。

2.5.15　网页中的乱码原因

试题题面：网页中的文字出现乱码可能是什么原因造成的？

题面解析：在编写代码的时候常常会遇到乱码的情况，如果遇到这个问题，应聘者可以按照平时出现乱码时，自己如何解决的来回答就可以。

解析过程：

乱码原因有以下几点。

·　不同编码内容混杂：HTML乱码是由HTML编码问题造成的（常见的是gb2312与utf-8两种编码内容同时存在）。

·　未设置HTML编码：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />未设置，这里设置的是utf-8。

·　使用记事本编辑HTML：使用记事本直接编辑HTML也容易照成HTML编码乱码。

·　浏览器不能自动检测网页编码，造成网页乱码。

2.5.16　在目标窗口中打开超链接页面的两种方式是什么

题面解析：本题主要考查应聘者对超链接的使用是否熟悉，对写过前端代码的应聘者来说，这个问题相对是比较简单的。

解析过程：

在HTML文件中，使用标记<a>来定义超链接，具体链接对象通过标记中的href属性来设置。定义超链接的语法格式为<a href="url" target="target-windows">链接标题</a>，target属性指定用于打开链接的目标窗口，默认方式是原窗口。属性值说明parent当前窗口的上级窗口，一般在框架中使用blank在新窗口中打开self，和默认值top一致在浏览器的整个窗口中打开。

打开超链接有以下两种方式。

（1）直接使用超链接：在这里要用到iframe标签，将target指向iframe的name属性。

关键代码如下所示：

（2）使用JavaScript：这种方式不需要使用超链接，而是定义一个标签，然后标签中用JavaScript响应鼠标单击事件，在JavaScript中通过window.open()方式打开超链接以及打开的位置。

关键代码如下所示：