Web前端工程师面试题汇总（一）

时间 2019-11-10

标签 web 前端工程师面试汇总栏目 HTML 繁體版

原文原文链接

前端工程师面试题汇总

本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识须要系统学习、透彻学习，造成本身的知识链。

HTML

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

一、声明叫作文件类型定义（DTD），声明的做用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪一个规范来解析文档。声明必须在 HTML 文档的第一行，这并非一个 HTML 标签。
二、严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用本身的方式解析代码。
如何区分：浏览器解析时到底使用严格模式仍是混杂模式，与网页中的 DTD 直接相关。

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

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

• HTML5 为何只须要写 `<!DOCTYPE HTML>`？

html5不基于SGML,所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

CSS规范规定，每一个元素都有display属性，肯定该元素的类型，每一个元素都有默认的display值，好比div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素;img默认display属性值为“inline-block”，是“内联块状”元素。
经常使用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特色：
一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
二、元素的高度、宽度、行高以及顶和底边距均可设置。
三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。
经常使用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特色：
一、和其余元素都在一行上；
二、元素的高度、宽度、行高及顶部和底部边距不可设置；
三、元素的宽度就是它包含的文字或图片的宽度，不可改变。
经常使用的内联块状元素有：

<img>、<input>

inline-block元素特色：
一、和其余元素都在一行上；
二、元素的高度、宽度、行高以及顶和底边距均可设置。
知名的空元素： `<br/> <hr/> <img/> <input/> <link/> <meta/>`
不为人知的是：`<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>`

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

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面连接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：
XML/HTML代码

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

XML/HTML代码
`<style type="text/css" media="screen">`

@import url("CSS文件");

`</style>`

二者都是外部引用CSS的方式，可是存在必定的区别：

区别1：link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

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

主要分红两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。 2.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的分支)]

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

HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，好比 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes;
支持HTML5新标签：
IE8/IE7/IE6支持经过document.createElement方法产生的标签，
能够利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还须要添加标签默认的样式。
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
如何区分： DOCTYPE声明\新增的结构元素\功能元素

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

用正确的标签作正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;及时在没有样式CCS状况下也以一种文档格式显示，而且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来肯定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

• HTML5的离线储存怎么使用，工做原理能不能解释一下？

在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，经过这个文件上的解析清单离线存储资源，这些资源就会像cookie同样被存储了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储的数据进行页面展现。
　　如何使用：
　　一、页面头部像下面同样加入一个manifest的属性;
　　二、在cache.manifest文件的编写离线存储的资源;
　　CACHE MANIFEST
　　#v0.11
　　CACHE:
　　js/app.js
　　css/style.css
　　NETWORK:
　　resourse/logo.png
　　FALLBACK:
　　/ /offline.html
　　三、在离线状态时，操做window.applicationCache进行需求实现。
　　详细的使用请参考：有趣的HTML5：离线存储

• 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件，若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。
　　离线的状况下，浏览器就直接使用离线存储的资源。

• 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大;
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的存储空间;
localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 数据在浏览器关闭后自动删除。

Web前端工程师面试题汇总（一）

前端工程师面试题汇总

HTML

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

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

• HTML5 为何只须要写 <!DOCTYPE HTML>？

html5不基于SGML,所以不须要对DTD进行引用，可是须要doctype来 规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特色： 一、和其余元素都在一行上； 二、元素的高度、宽度、行高及顶部和底部边距不可设置； 三、元素的宽度就是它包含的文字或图片的宽度，不可改变。 经常使用的内联块状元素有：

<img>、<input>

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

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面连接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是： XML/HTML代码

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

XML/HTML代码 <style type="text/css" media="screen">

@import url("CSS文件");

</style>

二者都是外部引用CSS的方式，可是存在必定的区别：

区别1：link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

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

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

最开始渲染引擎和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的分支)]

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

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

绘画 canvas;

用于媒介回放的 video 和 audio 元素;

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

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

语意化更好的内容元素，好比 article、footer、header、nav、section;

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

新的技术webworker, websockt, Geolocation;

移除的元素：

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

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

支持HTML5新标签：

IE8/IE7/IE6支持经过document.createElement方法产生的标签，

能够利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还须要添加标签默认的样式。

固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分： DOCTYPE声明\新增的结构元素\功能元素

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

• HTML5的离线储存怎么使用，工做原理能不能解释一下？

• 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

• 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• HTML5 为何只须要写 `<!DOCTYPE HTML>`？

html5不基于SGML,所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

`<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>`

`<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>`

内联元素特色：
一、和其余元素都在一行上；
二、元素的高度、宽度、行高及顶部和底部边距不可设置；
三、元素的宽度就是它包含的文字或图片的宽度，不可改变。
经常使用的内联块状元素有：

`<img>、<input>`

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面连接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：
XML/HTML代码

`<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />`

XML/HTML代码
`<style type="text/css" media="screen">`

`</style>`