前端常见面试题

最新推荐文章于 2024-10-10 11:15:29 发布

MrFano

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量442

点赞数

分类专栏：前端文章标签： html 面试题

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1.Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

声明不是html标签，它是指示web浏览器关于页面使用哪个HTML版本进行的指令。告知浏览器的解析器用声明文档标准来解析这个文档。Doctype不存在或者错误会导致文档以兼容模式呈现。

在整个脚本中启用严格模式，在顶部添加"use strict"；它是一个编译指示。用于告诉支持的javascript引擎切换到严格模式。

在函数内部的上方包含这条编译指示，也可以指定函数在严格模式下执行。

严格模式（标准模式）的排版和js运行模式都是以浏览器最高标准运行，在混杂模式中，页面以宽松的向后兼容的方式显示，模式老实浏览器的行为防止站点无法运行。

2.HTML5 为什么只需要写 <!DOCTYPE HTML>

声明引用DTD,因为HTML4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。

html5不基于SGMl,所以不需要引用DTD。

html5的doctype，现代浏览器都认识它。

03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

块级元素：
<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>

行内元素：
<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>

空元素（void）：
<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>

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

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

05、介绍一下你对浏览器内核的理解？

06、常见的浏览器内核有哪些？


　　主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

分类功能

渲染引擎

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

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的分支）]`

07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件，calendar、date、time、email、url、search

9. 新的技术webworker, websocket, Geolocation

移除的元素：

1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

2. 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

1. IE8/IE7/IE6支持通过 document.createElement

方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5

新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

如何区分：

DOCTYPE声明新增的结构元素、功能元素

广义的HTML5，是包括了HTML5、CSS3以及新的API。因为新特性或多或少会存在浏览器的兼容问题，所以在使用新特性时检测浏览器是否支持此特性是非常必要的。当浏览器不支持新特性时，可以做合适的向后兼容处理。目前，并没有一个统一的方法检测新特性的支持，有些新特性有对应的API可以识别，有些新特性则只能通过一些技巧来识别。好在国外有热心的工程师们开发了多个检测新特性的框架，其中检测准确率和使用率较高的是Modernizr。

Modernizr框架的原理是自动检测浏览器是否支持新特性，并在<html>标签上添加对应的类。如果浏览器支持某个特性，则会添加一个以特性名称命名的类，反之，则添加一个以“no-”为前缀加上特性名称命名的类。同时也会生成一个名为modernizr的对象，通过判断此对象上的代表各特性的属性值，可以知道当前浏览器是否支持此新特性。Modernizr框架同时也包含了html5shim框架的功能，即可以让IE8及以下浏览器支持新标签。

08、如何区分 HTML 和 HTML5？

1、HTML5仍然是一个制定中的标准

这第一个区别显而易见，但是也是非常重要的一个，我们从它开始。你也许已经看到了到处都有很多关于HTML5很酷的言论，但是这些都无法改变HTML5依然是一个制定中的标准的事实。HTML4也许已经超过10岁了，但是，它作为正式标准的事实一直没变。

另一方面，HTML5仍然处在初级阶段，预期会发生很多变化。你必须把这些因素考虑进来，因为你在网站上使用的这些新增加或修改的网页元素会每年都会发生多次变化，你需要不停的更新升级你的网站，这可不是你希望的。这就是为什么到目前为止，最好在产品里使用HTML4，只在实验里使用HTML5的原因。

2、简化的语法

更简单的doctype声明是HTML5里众多新特征之一。现在，只需要写 <!doctype html>就好了。HTML5的语法兼容HTML4和XHTML1，但不兼容SGML。

3、新的<canvas>标记代替flash

对于Web用户来说，Flash既是惊喜也是一种痛苦。所以，一些开发人员对HTML5威胁Flash的做法不满，但对于那些忍受着要花好久才能加载和运行的臃肿的Flash视频的人来说，用新的 <canvas> 标记渲染图像的技术已经梦想成真。

目前， <canvas> 标记并不能提供所有的Flash具有的功能，但假以时日，其必将Flash从web上淘汰！我们拭目以待，因为很多人对此表示怀疑。

4、新的<header>与<footer>标记

HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么一些像<header>和<footer> 这样的新标记会出现，它们是专门为标志网站的这些部分设计的。

在开发网站时，你不再需要用<div>标记来标注网页的这些部分。

5、新的<section>与<article>标记

跟<header>与<footer>标记相似，HTML5中引入的新的<section> 和 <article> 标记可以让开发人员更好的标注页面上的这些区域。

据推测，除了让代码更有组织外，它也能改善SEO效果，能让搜索引擎更容易的分析你的页面。

6. 新的 <menu> 和 <figure> 标记
新的<menu>标记可以被用作普通的菜单，也可以用在工具条和右键菜单上，虽然这些东西在页面上并不常用。

同样，新的 <figure> 标记是一种更专业的管理页面上文字和图像的方式。当然，你可以用样式表来控制文字和图像，但使用HTML5内置的这个标记更适合。

7. 新的 <audio> 和 <video> 标记

新的<audio> 和 <video> 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称，它们是用来嵌入音频和视频文件的。

除此之外还有一些新的多媒体的标记和属性，例如<track>，它是用来提供跟踪视频的文字信息的。有了这些标记，HTML5使Web2.0特征变得越来越友好。问题在于，在HTML5还未被广泛的接受之前，Web2.0还是原来的Web2.0。

8. 表单的全新水平

新的 <form> 和 <forminput> 标记对原有的表单元素进行的全新的修改，它们有很多的新属性(以及一些修改)。如果你经常的开发表单，你应该花时间更详细的研究一下。

9. 不再使用 <b> 和 <font> 标记

对我个人来说，这是一个让我不太理解的改动。我并不认为去除 <b> 和 <font>标记会带来多大的好处。我知道，官方的指导说这些标记可以通过CCS来做更好的处理，但这样一来，为了在文章一两个地方出现的这种标记，你就需要在独立的css和文本两个地方来实现这一的功能，岂不笨拙。也许我们以后会习惯这种方法。

10. 不再使用 <frame>, <center>, <big> 标记

事实上，我已经记不清曾经何时用过这些标记了，所以，我并不为去除这些标记感到悲哀。相同的原因，有更好的标记能实现它们的功能——这很好，任何作废的标记从标准中剔除都是受欢迎的。

这10个HTML5和HTML4之间的不同只是整个新的规范中的一小部分。除了这些主要的变动外，我还可以略提一下一些次要的改动，比如修改了<ol> 标记的属性，让它能够倒排序，对<u>标记也做了修改。

所有这些次要的改动数量众多。而且新的修改也在不断的增加，因此，如果你想实时跟踪最新的动向，你需要经常的查看w3.org的HTML4 和 HTML5之间的不同这个页面。如果你很心急，想在你的工作中使用这些新的标记和属性，我劝告你最好只是做实验，原因已经说的很清楚了，这些新标记和新属性在将来也许会有很大的改变，所以，除非你不断的更新你的代码，它们很可能会过期失效。

09、简述一下你对HTML语义化的理解？

1、什么是HTML语义化？

基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。