前端工程师面试题1

最新推荐文章于 2024-08-15 20:53:53 发布

甜岛和星

最新推荐文章于 2024-08-15 20:53:53 发布

阅读量273

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_48196628/article/details/107340529

版权

01、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 没有严格和混杂之分）****
****意义：****严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

02、HTML5 为什么只需要写？

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

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

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

行内元素与块级元素的区别：

1.一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效

2.块级元素可以设置margin,padding属性，行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

3.块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化

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

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

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

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

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

主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

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

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

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

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

Trident内核：IE，360，搜过浏览器；

Gecko内核：Netscape6及以上版本，

Presto内核：Opera

Blink内核：Opera；

Webkit内核：Safari，Chrome

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

新增的元素

有绘画 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。

处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。 2.使用是html5shim框架

08、如何区分 HTML 和 HTML5？

1、在文档类型声明上

HTML声明：
　
HTML5声明：<!doctype html>

上面的两种声明,HTML5声明简洁方便人们的记忆，HTML声明太长了并且很难记住这段代码。

2、在结构语义上

HTML:没有体现结构语义化的标签，通常都是这样来命名的

，这样表示网站的头部。

HTML5:在语义上却有很大的优势，提供了一些新的HTML5标

比如: article、footer、header、nav、section，这些通俗易懂。

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

(1)HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

(2)即使在没有样式 CSS 的情况下也能以一种文档格式显示，并且是容易阅读的;

(3)搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，有利于 SEO;

(4)使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

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

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

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

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