前端面试题总结之html+css面试题

小职 2021-07-08 来源：CSDN「霸总女友带球跑」阅读 824 评论 0

摘要：本文主要介绍了前端面试题总结之html+css面试题，通过具体的内容向大家展现，希望对大家前端开发的学习以及面试有所帮助。

本文主要介绍了前端面试题总结之html+css面试题，通过具体的内容向大家展现，希望对大家前端开发的学习以及面试有所帮助。

前端面试题总结之html+css面试题

1.浏览器组成：

shell部分：

Shell是指浏览器的外壳：例如菜单，工具栏等。

功能：主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。

内核部分：内核是基于标记语言显示内容的程序或模块。

渲染引擎(layout engineer或者Rendering Engine)

JS引擎

JS引擎是解析Javascript语言，执行javascript语言来实现网页的动态效果。

2.浏览器的结构

用户界面。包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。

浏览器引擎。在用户界面和呈现引擎之间传送指令。

渲染引擎。负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

网络。用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。

用户界面后端。用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

JavaScript 解释器。用于解析和执行 JavaScript 代码。

数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

3.浏览器页面结构有哪3层？

结构层：HTML （实现页面结构）

表示层: CSS （完成页面的表现与风格）

行为层: JavaScript （实现一些客户端的功能与应用）

4.主流浏览器及其内核

IE浏览器内核：Trident内核，也是俗称的IE内核；

Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核

Firefox浏览器内核：Gecko内核，俗称Firefox内核；

Safari浏览器内核：Webkit内核；

Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

360浏览器、猎豹浏览器内核：IE+Chrome双内核；

搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

百度浏览器、世界之窗内核：IE内核；

2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

浏览器内核主要指的是浏览器的渲染引擎。

2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。

5.浅谈HTML5 和优点缺点？

HTML5 指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务。HTML5 是 HTML 最新版本，2014 年 10 月由万维网联盟（W3C）完成标准制定。

HTML5 增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便

优点：

网络标准统一、HTML5本身是由W3C推荐出来的；

多设备、跨平台；

被大量应用于移动应用程序和游戏；

绘图画布，HTML5的canvas元素使得浏览器无需Flash或Silverlight等插件就能直接显示图形或动画图像。

通过增加了、两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，而无需第三方插件（如Flash）就可以实现音视频的播放功能；

地理定位，HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的定位功能，定位更加准确、灵活。通过HTML5进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定位信息；

数据存储，允许在客户端实现较大规模的数据存储；HTML5支持DOM Storage和Web SQL Database 两种存储机制。其中，DOM Storage 适用于具有key/value对的基本本地存储；而WebSQLDatabase是适用于关系型数据库的存储方式，开发者可以使用SQL语法对这些数据进行查询、插入等操作。

多线程，HTML5新增加了一个WebWorkerAPI，利用Web Worker将Web应用程序从原来的单线程业界中解放出来，通过创建一个Web Worker对象就可以实现多线程操作。

缺点：

安全：像之前 Firefox4 的 web socket 和透明代理的实现存在严重的安全问题，同时 web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料；

完善性：许多特性各浏览器的支持程度也不一样；

性能：某些平台上的引擎问题导致 HTML5 性能低下；

浏览器兼容性：最大缺点，IE9 以下浏览器几乎全军覆没；

6.对 WEB 标准以及 W3C 的理解与认识?

结构上：

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率；

表现上：

使用外链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问；

行为上：

样式尽量少用行间样式表，使结构与表现分离；

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

7.HTML语义化的理解

语义化: 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化?

为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构;

有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重;

便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。

8.收集的用户信息怎么传递给服务器？

通过form表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

每个表单都应该有自己表单域。ajax 后台交互的时候，必须需要form表单域。

前端面试题总结之html+css面试题

GET 和 POST 的区别

GET在浏览器回退时是无害的，而POST会再次提交请求。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里更不安全，参数直接暴露在URL上，所以不能用来传递敏感信息，而POST中的参数不会被保留，在页面地址栏中被提交的数据是不可见的。

GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

1.何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

**注释：**GET 最适合少量数据的提交。浏览器会设定容量限制1024B。

2.何时使用 POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

css面试题

1. 请你讲一讲 CSS 的权重和优先级

权重：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GTdbxtqa-1624196839396)(D:\web\note\img\22.png)]

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找bug变得更加困难了。

优先级：

权重相同，写在后面的覆盖前面的

使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

2.盒模型

1.介绍盒模型

CSS 盒子模型就是在网页设计中经常用到的 CSS 技术所使用的一种思维

模型。

标准的 css 盒子模型：宽度=内容的宽度+边框的宽度+加上内边框的宽度。

box-sizing: content-box|border-box|inherit;是CSS3新增属性，高版本浏览器支持

* {

box-sizing: border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

}

/*box-sizing: border-box;是CSS3新增属性浏览器支持

通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）

如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）

简化了计算位置的问题，更符合我们日常对盒子的认识*/

/* 正方形是父元素的宽度的一半*/

.father{

width: 400px;

height: 600px;

background-color: black;

}

.son{

width: 50%;

/* padding-bottom: 50%;*/

height: 50%;

background-color: red;

}

正方形是父元素的宽度的一半

2.css选择器类型，以及用法

基础的选择器、组合选择器、属性选择器、伪类、伪元素

基础的选择器：

前端面试题总结之html+css面试题

组合选择器：

前端面试题总结之html+css面试题

3. 介绍 Flex 布局

1.认识Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

行内元素也可以使用Flex布局。

Webkit内核的浏览器，必须加上-webkit前缀。

.box{

display: flex;

}

.box{

display: -webkit-flex; /* Safari，Chrome */

display: inline-flex;

}

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

2.容器的属性

Document

3.flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

//flex-grow:规定某个 flex 项目相对于其余 flex 项目将增长多少

//flex-shrink:规定某个 flex 项目相对于其余 flex 项目将收缩多少。

//flex-basis 属性规定 flex 项目的初始长度。

当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：

.item {flex: none;} .

item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }

4.flex响应式布局：

Page Title

请调整浏览器窗口来查看响应效果。

我的网站

拥有弹性布局。

Link

关于我

我的照片：

图像

Some text about me in culpa qui officia deserunt mollit anim..

More Text

Lorem ipsum dolor sit ame.

图像

标题

标题描述，2021 年 1 月 1 日

图像

一些文本..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.