【前端高频面试】干货、无废话

全是面试精心整理的，供大家参考！

display几种方式以及原理

1. Block（块级元素）：块级元素通常以新行的形式开始，占据整个可用的宽度，可以设置宽度、高度、内外边距等属性。块级元素可以包含其他块级元素或行内元素。常见的块级元素有 div、p、h1-h6 等。
2. Inline（行内元素）：行内元素不会以新行开始，只占据它对应标签的边框所包含的空间，无法设置宽度、高度、内外边距等属性。行内元素只能包含文本或其他行内元素。常见的行内元素有 span、a、img、input 等。
3. Inline-block（行内块元素）：行内块元素具有行内元素的特点，但可以设置宽度、高度、内外边距等属性。行内块元素可以包含其他行内块元素或行内元素。常见的行内块元素有 button、input[type="button"]、input[type="checkbox"] 等。
4. Flex（弹性盒子布局）：弹性盒子布局是一种响应式布局方式，可以方便地实现元素的对齐、排列、分布等。弹性盒子布局可以设置主轴方向、主轴对齐方式、交叉轴对齐方式等属性。常见的弹性盒子布局属性有 display: flex、justify-content、align-items、flex-direction 、flex-wrap等。
5. Grid（网格布局）：网格布局是一种二维布局方式，可以方便地实现元素的对齐、排列、分布等。网格布局可以设置行、列、单元格大小、位置等属性。常见的网格布局属性有 display: grid、grid-template-columns、grid-template-rows、grid-column、grid-row 等。

CSS3新特性

1. 选择器：CSS3 引入了一些新的选择器，如属性选择器、伪类选择器、伪元素选择器等，可以更精确地选中需要的元素。
2. 盒模型：CSS3 中的盒模型引入了 box-sizing 属性，可以更方便地控制元素的盒模型，包括 content-box（默认值）、border-box 等。
3. 边框：CSS3 中引入了 border-image 属性，可以让开发者使用图片来定义元素的边框样式。
4. 颜色：CSS3 引入了 HSL 和 HSLA 颜色模式，可以更方便地定义颜色。
5. 渐变：CSS3 中引入了渐变，包括线性渐变（background: linear-gradient(to right, red, blue)）和径向渐变（background: radial-gradient(circle, red, blue)），可以让开发者更方便地实现元素的背景渐变效果。
6. 文字：CSS3 中引入了 text-shadow 属性，可以让开发者为文字添加阴影效果。
7. 动画：CSS3 中引入了动画效果，包括 transition 属性和 animation 属性，可以让开发者更方便地实现元素的动画效果。
8. 布局：CSS3 中引入了弹性布局（Flexbox）和网格布局（Grid），可以更方便地实现元素的布局效果。
9. 媒体查询：CSS3 中引入了媒体查询，可以根据不同设备的屏幕大小、分辨率等特性，为不同设备提供不同的样式。

属性选择器是一种在CSS中使用的一种选择元素的方法。它允许你根据元素的属性值来选择并应用样式。

属性选择器有以下几种形式：

1. [attribute]：选择具有指定属性的所有元素。 例如：a[href] 将选择所有具有 href 属性的 <a> 元素。
2. [attribute=value]：选择具有指定属性和值的元素。 例如：input[type=text] 将选择所有 type 属性为 text 的 <input> 元素。
3. [attribute^=value]：选择具有以指定值开头的属性值的元素。 例如：img[src^=https] 将选择所有 src 属性以 https 开头的 <img> 元素。
4. [attribute=value]：选择具有以指定值结尾的属性值的元素。 例如：`a[href=value]：选择具有以指定值结尾的属性值的元素。例如：‘a[href=.pdf]将选择所有href属性以.pdf结尾的<a>` 元素。
5. [attribute*=value]：选择具有包含指定值的属性值的元素。 例如：input[name*=user] 将选择所有 name 属性包含 user 的 <input> 元素。

属性选择器可以与其他选择器组合使用，以进一步精确地选择特定的元素。

CSS 中的可继承属性

CSS 中的可继承属性是指在父元素上设置某个属性时，该属性可以被子元素继承并应用于子元素。

以下是一些常见的 CSS 可继承属性：

1. 字体相关属性：font、font-family、font-size、font-style、font-weight等。
2. 文本相关属性：text-align、text-indent、line-height、color等。
3. 元素盒模型属性：margin、padding、border等。
4. 列表属性：list-style、list-style-type、list-style-position等。
5. 表格属性：border-collapse、border-spacing等。
6. 元素可见性属性：visibility。
7. 元素的基线属性：vertical-align。
8. 元素的文本装饰属性：text-decoration等。

需要注意的是，并非所有的属性都是可继承的。例如，背景相关属性（background）和定位属性（position）就不是可继承的。

DOM和BOM

1. DOM（document object model）是一个页面结构的api

文档对象类型，获取或设置文档标签的属性

Js可以通过DOM获取哪些标签，标签有哪些属性，内容有哪些

DOM操作的对象是文档，和浏览器无关，关注网页本身内容

1. 获取标签名：document.getElementByTagName()
2. 获取类名：document.getElementByClassName()
3. 获取id属性名：document.getElementById()
4. 获取选择器名：document.querySelector()
5. 通过父元素获取子元素：可以使用 DOM 元素的 children 属性获取其所有子元素，返回一个类数组对象。

1. BOM（browser object model）控制浏览器行为的api

浏览器对象模型，提供独立于内容与浏览器窗口进行交互的对象

管理窗口与窗口之间的通讯，核心对象是window,比如打开关闭窗口、收藏等操作

location(用于url相关的操作)、history(用于历史相关的操作)、navigator(包含浏览器相关的信息)

HTML5增添了哪些新特性

1. 新元素

H5增加了新的元素，这些元素可以更好地描述文档结构，提高可访问性和语义性，同时也有助于SEO优化

<header>和<footer>：用于定义页面或者文章的头部和底部，通常包含网站的标志、导航栏、版权信息等。

<nav>：用于定义导航栏，通常包含站点的主要导航链接。

<section>：用于将文档分成一个个独立的部分，通常包含一组相关的内容，如文章的章节、博客的文章列表等。

<article>：用于定义独立的文章或者内容块，通常包含一篇文章、一段新闻、一组评论等。

<aside>：用于定义页面或文章的侧边栏内容，通常包含一些与主要内容相关的补充信息，如广告、标签云、相关文章等。

<main>：用于定义页面或文章的主要内容区域，一个页面只能有一个<main>元素。

<figure>和<figcaption>：用于定义一组相关的媒体内容，如图片、音频或视频，<figcaption>用于为<figure>元素添加标题。

<time>：用于标记时间，可以显示日期、时间、日期和时间的组合，还可以使用datetime属性指定时间的精度。

<progress>：用于显示进度条，可以用于显示下载进度、表单提交进度等。

<meter>：用于显示某个值的度量，如电池电量、音量、温度等。

1. 表单控件

H5提供新的表单控件，例如<input type="color"> 选填email、date、time、number、file等，可以更好的与用户交互

1. 视频和音频

H5增加了新的视频和音频元素，可在不需要插件的情况下在网页中播放音视频

1. 图像绘制

H5提供canvas元素，允许开发者在网页上绘制2D元素

1. 本地存储

H5提供本地存储功能，可让网页上应用不连接服务器的情况下存储数据

1. 地理定位

提供了地理定位功能（Geolocation）可获取用户位置信息

1. WebSocket

HTML5引入了WebSocket API，可以在浏览器和服务器之间建立实时的双向通信，提高应用程序的性能和响应速度。

应用场景：

Cookie：

1. 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。
2. 保存上次登录的时间、页面等信息。
3. 浏览计数

localStorage：

1. 长期登录，判断用户是否已登录
2. 历史搜索记录
3. 用户习惯

sessionStorage：

1. 网上商城中的购物车
2. 保存用户登录信息
3. 将某些数据放入session中，供同一用户的不同页面使用
4. 敏感账号一次性登录