2024 前端面试题（GPT回答 + 示例代码 + 解释）No.1 - No.20

本文题目来源于全网收集，答案来源于 ChatGPT 和博主（的小部分......）

格式：题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 `code`+ 解释 quote + 补充 quote

目录 No.1 - No.20

- [本文题目来源于全网收集，答案来源于 ChatGPT 和博主（的小部分......）](#本文题目来源于全网收集，答案来源于 ChatGPT 和博主（的小部分……）)
- - [格式：题目 h3 + 回答 text + 参考大佬博客补充 *text* + 示例代码 ```code```+ 解释 quote + 补充 quote](#格式：题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 code+ 解释 quote + 补充 quote)
  - [1. 简述一下你对 HTML 语义化的理解？](#1. 简述一下你对 HTML 语义化的理解？)
  - - - 补充：SEO表现
  - [2. 谈谈 Iframe ？](#2. 谈谈 Iframe ？)
  - [3. 介绍一下 CSS 的盒子模型？](#3. 介绍一下 CSS 的盒子模型？)
  - [4. 讲讲 css 选择器的优先级？](#4. 讲讲 css 选择器的优先级？)
  - [5. 垂直居中几种方式？](#5. 垂直居中几种方式？)
  - [6. CSS link 与 @import 的区别和用法？](#6. CSS link 与 @import 的区别和用法？)
  - [7. 谈谈元素的隐藏方式及其区别（display:none visibility:hidden rgba opacity）](#7. 谈谈元素的隐藏方式及其区别（display:none visibility:hidden rgba opacity）)
  - [8. relative和absolute分别是相对于谁进行定位的？](#8. relative和absolute分别是相对于谁进行定位的？)
  - [9. 画一条0.5px的直线？（个人觉得似乎有点不妥？）](#9. 画一条0.5px的直线？（个人觉得似乎有点不妥？）)
  - [10. 1rem、1em、1vh、1px、1rpx各自代表的含义？](#10. 1rem、1em、1vh、1px、1rpx各自代表的含义？)
  - [11. HTML5、CSS3 里面都新增了那些新特性？](#11. HTML5、CSS3 里面都新增了那些新特性？)
  - - [HTML5 新特性：](#HTML5 新特性：)
    - [CSS3 新特性：](#CSS3 新特性：)
  - [12. JS 数据类型有哪些? || JS 有哪些内置对象？](#12. JS 数据类型有哪些? || JS 有哪些内置对象？)
  - - [原始数据类型（Primitive data types）：](#原始数据类型（Primitive data types）：)
    - [引用数据类型（Reference data types）：](#引用数据类型（Reference data types）：)
  - [13. 基本数据类型和引用数据类型有什么区别？](#13. 基本数据类型和引用数据类型有什么区别？)
  - - [基本数据类型（Primitive data types）：](#基本数据类型（Primitive data types）：)
    - [引用数据类型（Reference data types）：](#引用数据类型（Reference data types）：)
  - [14. innerHTML 和 innerText 和 documen.write 的区别](#14. innerHTML 和 innerText 和 documen.write 的区别)
  - - `innerHTML`：
    - `innerText`：
    - `document.write()`：
  - [15. JavaScript 由哪三部分组成：](#15. JavaScript 由哪三部分组成：)
  - [16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系？](#16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系？)
  - - 区别：
    - 联系：
  - [17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?](#17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?)
  - [18. 检测浏览器版本版本有哪些方式？](#18. 检测浏览器版本版本有哪些方式？)
  - [19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么？](#19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么？)
  - [20. HTTP 请求的时候 get 和 post 方式的区别？](#20. HTTP 请求的时候 get 和 post 方式的区别？)

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

HTML语义化是指在编写网页代码时，选择恰当的HTML标签来表达文档的结构和内容含义，而不是仅仅为了实现特定的样式效果。通过使用语义化的标签，我们可以提高代码的可读性、可维护性和可访问性，同时有助于搜索引擎更好地理解页面内容。

HTML 语义化是指在编写 HTML 代码时，使用恰当的标签来传达文档结构和内容的含义、目的和作用，而不仅仅是为了呈现某种样式或布局效果。它可以提高代码的可读性、可维护性和可访问性，有助于用户和搜索引擎等对网页进行更准确和有效的解读。

具体来说，HTML 语义化的特点包括：

使用恰当的标签：根据文档结构和内容的含义，选择适合的 HTML 标签来标记元素，如 <article>、<section>、<header>、<nav>、<aside>、<footer> 等。

按重要性排序：将页面中的内容按照重要性排序，先显示最重要的内容，后显示较不重要的内容，可以使用 <h1> 到 <h6> 标签表示标题的重要性。

避免滥用无语义的标签：尽量避免使用 <div> 和 <span> 等无语义的标签来布局，而是使用具有语义含义的标签来表达意图。

使用 alt 属性：对于图片等非文本内容，应该使用 alt 属性来提供替代文本，以便于屏幕阅读器等工具能够正确地解读和呈现。

表示关联关系：使用 <a> 标签来表示链接，同时利用 href 属性来指定链接地址，title 属性来提供额外信息，rel 属性来表示关联关系等。

HTML 语义化的优点包括：

增强可读性：使用语义化的标签可以使代码更加易读易懂，更符合人类阅读习惯，也有助于其他开发者快速理解和维护代码。

提高可访问性：语义化的 HTML 代码可以提高网站的可访问性，使得视障用户、搜索引擎等能够更准确地解读网页内容。

便于 SEO：搜索引擎会根据页面内容的语义结构来评估网站的质量，因此语义化的 HTML 代码能够提高网站的 SEO 效果。

方便维护：使用语义化的 HTML 代码可以使得代码更容易维护和修改，因为代码的结构和意图更加清晰和明确。

总之，HTML 语义化是一种良好的编程实践，有助于提高网站的质量、可访问性和可维护性，值得开发者在日常工作中积极应用。

补充：SEO表现

SEO（Search Engine Optimization，搜索引擎优化）表现指的是网站在搜索引擎中的排名和展示情况。一个网站的良好SEO表现意味着它在搜索引擎结果页面（SERP）中能够获得较高的排名，吸引更多的有意向访问者。

良好的SEO表现通常包括以下几个方面：

排名优化：网站在搜索引擎中的关键词排名靠前，特别是在重要关键词上获得较高位置。

流量增长：通过搜索引擎带来的有机流量增加，即用户通过搜索引擎输入相关关键词后点击进入网站的访问量增加。

点击率提升：搜索结果中网站的标题和描述吸引用户点击的概率增加，提高搜索结果的点击率。

页面曝光：网站的页面数量被搜索引擎索引的程度增加，提高网站在搜索引擎中的曝光度。

用户满意度：网站内容质量、页面加载速度、用户体验等因素得到优化，提升用户对网站的满意度和停留时间。

这些因素综合起来，可以帮助网站获得更多的有机流量和有效的访问，从而提升网站的知名度、品牌价值和业务转化率。SEO表现不仅仅关注排名，更注重如何通过优化网站内容、结构和用户体验等方面，为用户提供有价值的信息和良好的访问体验。

2. 谈谈 Iframe ？

Iframe是HTML中的一个标签，用于在网页中嵌入其他独立的HTML文档或外部内容。可以使用Iframe来实现在网页中嵌入视频、地图、表单等内容。比如，可以通过在Iframe的src属性中指定Bilibili视频或Baidu地图的URL来将它们嵌入到网页中。此外，也可以利用Iframe来在网页中实现广告展示、内嵌其他网站的内容等功能。对于Iframe的使用，要注意设置合适的尺寸、避免对页面布局产生混乱，以及关注对网页性能、安全性和可访问性的影响。在实际开发中，要根据具体的需求和最佳实践来灵活运用Iframe，并权衡其优缺点来达到最佳的效果。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Example</title>
</head>
<body>
    <h1>嵌入视频示例</h1>
    <p>以下是一个嵌入视频的示例：</p>
    <iframe width="560" height="315" src="https://www.bilibili.com/video/BV1V3411N7a2" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Iframe（Inline Frame）是HTML中的一个标签，用于在一个网页中嵌入另一个独立的HTML文档。使用Iframe标签可以实现在当前页面内嵌入其他网页、广告、地图等内容。Iframe的优缺点如下：

优点：
可嵌入任何类型的文档：Iframe可以嵌入任何类型的文档，包括视频、音频、地图、表单等。这使得在一个网页中集成多种类型的内容变得更加容易。
让网页加载更快：Iframe可以让网页的不同部分分别加载，这样可以提高网页的响应速度和性能。
增强了页面的交互性：通过Iframe在网页中嵌入互动性的内容，例如视频、表单或游戏，可以增强网页的交互性和吸引力。
提供了一定的隔离性：由于被嵌入的文档在Iframe中运行，因此可以提供一定的隔离性，防止外部脚本或代码对主页面造成影响。

缺点：
会导致网页布局混乱：如果Iframe的尺寸没有设置好，或者被嵌入的文档尺寸发生变化，可能会导致网页布局混乱。
降低了网页的可访问性：Iframe中的内容对于搜索引擎不友好，可能会影响页面的SEO表现和可访问性。此外，屏幕阅读器等辅助技术也可能无法识别Iframe中的内容。
可能会降低网页的安全性：通过Iframe嵌入的文档可能包含恶意脚本或代码，从而导致网页的安全性受到威胁。
不利于网页的响应式设计：由于Iframe的尺寸固定，因此不容易进行响应式设计，这可能会对移动设备用户造成不便。

总的来说，Iframe是一种方便的HTML元素，可以在网页中嵌入其他类型的文档。但是，在使用它时需要权衡其优缺点，并谨慎考虑其对网站性能、安全性和可访问性的影响。

3. 介绍一下 CSS 的盒子模型？

CSS 盒子模型是指在网页布局中，将每个元素看作一个矩形的盒子，这个盒子包含内容、内边距、边框和外边距四个部分。具体来说，它包括内容区域、内边距、边框和外边距这四个部分。内容区域是盒子的实际内容，内边距是内容与边框之间的空间，边框用于界定内容区域的边界，而外边距则是盒子与相邻元素之间的空白区域。

在 CSS 中，盒子模型有两种标准：标准盒子模型和 IE 盒子模型。标准盒子模型计算元素的宽度和高度仅包括内容区域，不包括内边距、边框和外边距；而IE 盒子模型计算宽度和高度包括内容区域、内边距和边框，但不包括外边距。我们可以通过 box-sizing 属性来指定使用哪种盒子模型。

CSS 的盒子模型是指在 Web 页面中，每个元素（如文本、图像、块级元素等）都被看作是一个矩形的盒子，这个盒子包含内容、内边距、边框和外边距四个部分。这些部分的组合形成了元素在页面中所占据的空间。

盒子模型的四个部分如下：

内容区域（Content）：盒子的实际内容，例如文本或图像。

内边距（Padding）：内容区域与边框之间的空间，可以通过 CSS 属性设置。

边框（Border）：内边距之外的边框，用于界定内容区域的边界。

外边距（Margin）：盒子与相邻元素之间的空白区域，可以通过 CSS 属性设置。

在 CSS 中，可以通过设置不同的属性来控制盒子模型的各个部分，例如：

padding 属性用于设置内边距的大小；

border 属性用于设置边框的样式、宽度和颜色；

margin 属性用于设置外边距的大小。

盒子模型在页面布局和设计中起着重要作用，通过调整盒子模型的不同部分，可以控制元素之间的间距、边框样式以及元素的尺寸和位置。理解和熟练运用盒子模型是开发网页布局的基础之一。

在 CSS 中，盒子模型主要有两种标准：标准盒子模型（Content Box）和IE 盒子模型（Border Box）。它们在计算元素的宽度和高度时略有不同。

标准盒子模型（Content Box）：

元素的宽度（width）和高度（height）仅包括内容区域，不包括内边距（padding）、边框（border）和外边距（margin）。

计算公式：width/height = content width/height

IE 盒子模型（Border Box）：

元素的宽度（width）和高度（height）包括内容区域、内边距（padding）和边框（border），但不包括外边距（margin）。

计算公式：width/height = content width/height + padding + border

在 CSS 中，可以通过 box-sizing 属性来指定使用哪种盒子模型：

box-sizing: content-box;：使用标准盒子模型（默认值）

box-sizing: border-box;：使用IE 盒子模型
选择不同的盒子模型取决于布局需求和个人偏好。使用 IE 盒子模型可能更便于控制元素的尺寸，因为内边距和边框不会影响元素的实际宽度和高度，而使用标准盒子模型则更符合传统的 CSS 盒子模型定义。

4. 讲讲 css 选择器的优先级？

在 CSS 中，选择器优先级用于确定当多个选择器同时应用于同一个元素时，哪个选择器的样式规则将被应用。CSS 选择器优先级是根据选择器的特定性和重要性来计算的。

特定性是用于衡量选择器的权重的一个值，它是由选择器中各种组件的数量和类型来决定的。通常，选择器中包含的ID 选择器 的数量越多，特定性就越高，因为 ID 选择器是最具体的选择器。其次是类选择器和属性选择器 ，再其次是标签选择器 。

当特定性相等时，样式规则的顺序将起作用，后定义的规则将覆盖先定义的规则。但有一种情况例外，即使用!important声明的样式规则，它具有最高的优先级，可以覆盖其他所有规则。

大佬博客补充：通配符继承浏览器默认属性

html 复制代码

<-- CSS选择器优先级按照以下规则进行计算：-->

1. 内联样式（Inline Styles）：通过style属性直接添加到HTML元素中的样式具有最高的优先级。例如：-->
<p style="color: red;">这是一个红色的段落。</p>


2. ID选择器（ID Selectors）：使用#前缀定义的ID选择器具有较高的优先级。例如：
<style>
#myElement {
  color: blue;
}
</style>

3. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-Class Selectors）：类选择器、属性选择器和伪类选择器具有相同的优先级，它们通过.class、[attribute]或:pseudo-class来定义。
<style>
.myClass {
  color: green;
}
[type="text"] {
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}
</style>

4. 元素选择器和伪元素选择器（Element Selectors and Pseudo-Element Selectors）：元素选择器和伪元素选择器具有最低的优先级，它们通过元素名称或::pseudo-element来定义。例如：
<style>
h1 {
  font-size: 24px;
}
::first-letter {
  text-transform: uppercase;
}
</style>

5. 垂直居中几种方式？

在CSS中，有几种常见的方法可以实现垂直居中。一种常用的方法是使用Flexbox布局，通过设置父元素的display: flex; align-items: center; justify-content: center;，子元素就可以在垂直和水平方向上居中显示。

另一种方法是使用position和transform属性，可以将子元素相对于父元素进行绝对定位，并使用top: 50%; left: 50%; transform: translate(-50%, -50%);来使其在垂直和水平方向上居中。

此外，还可以使用Grid布局和表格布局来实现垂直居中。Grid布局可以通过设置父元素的display: grid; place-items: center;来实现居中，而表格布局可以使用display: table; vertical-align: middle;来实现垂直居中。

大佬博客补充：单行文本: line-height = height

html 复制代码

<-- 在CSS中，实现垂直居中可以使用多种方式，以下是一些常见的方法：-->

1. 使用Flexbox布局：Flexbox是一种现代的布局方式，可以轻松实现元素的水平和垂直居中。通过设置父元素的display: flex;以及align-items: center; justify-content: center;，子元素就可以在垂直和水平方向上居中显示。
<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px; /* 需要有明确的高度 */
}
</style>

2. 使用Grid布局：类似于Flexbox，Grid布局也可以轻松实现元素的水平和垂直居中。通过设置父元素的display: grid; place-items: center;，子元素可以在垂直和水平方向上居中显示。
<style>
.container {
  display: grid;
  place-items: center;
  height: 300px; /* 需要有明确的高度 */
}
</style>

3. 使用position和transform：可以使用绝对定位和transform属性来实现垂直居中，这种方法适用于不知道高度的情况。
<style>
.container {
  position: relative;
  height: 300px; /* 父元素需要有明确的高度 */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

4. 使用表格布局：可以将元素以表格的形式布局，然后使用vertical-align: middle;来实现垂直居中。
<style>
.container {
  display: table;
  height: 300px; /* 需要有明确的高度 */
}

.centered {
  display: table-cell;
  vertical-align: middle;
}
</style>

以上是一些常见的实现垂直居中的方法，每种方法都有其适用的场景，具体选择哪种方法取决于布局的需求和兼容性考虑。

6. CSS link 与 @import 的区别和用法？

Link 标签是 HTML 中的一个标签，用于将外部样式表链接到 HTML 文档。它支持并行加载，不会阻塞页面的渲染，并且可以定义多个 link 标签引入多个外部样式表，方便管理和维护。

@import 是 CSS 的指令，用于在 CSS 文件中引入外部样式表。它必须写在 CSS 文件的最前面，放在其他样式规则之前，并且会在页面加载时按顺序串行加载，可能导致页面加载速度较慢。

因此，一般情况下我们推荐使用 link 标签来引入外部样式表，因为它具有更好的性能表现和灵活性。而 @import 则适用于一些特殊需求，比如根据媒体查询条件加载不同的样式表。

大佬博客补充：link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持

CSS 中的 link 标签和 @import 指令都可以用来引入外部样式表，但它们有一些区别和不同的用法：

Link 标签：

Link 标签是 HTML 中的一个标签，在 head 部分使用，用于将外部样式表链接到 HTML 文档。

通过 link 标签引入的样式表会以并行方式加载，不会阻塞页面的渲染。

可以定义多个 link 标签引入多个外部样式表，方便管理和维护。
<link rel="stylesheet" type="text/css" href="styles.css">

@import 指令：

@import 是 CSS 的一个指令，用于在 CSS 文件中引入外部样式表。

@import 必须写在 CSS 文件的最前面，放在其他样式规则之前。
通过 @import 引入的样式表会在页面加载时按顺序串行加载，可能会导致页面加载速度较慢。
@import url("styles.css");

主要区别：

Link 标签在 HTML 中使用，而 @import 是 CSS 的一部分，写在 CSS 文件中。
-Link 标签支持并行加载，@import 会串行加载。

Link 标签没有特定的加载顺序要求，而 @import 必须写在 CSS 文件的最前面。

一般来说，推荐使用 link 标签来引入外部样式表，因为它具有更好的性能表现和灵活性。而 @import 则适用于一些特殊需求，比如根据媒体查询条件加载不同的样式表。

7. 谈谈元素的隐藏方式及其区别（display:none visibility:hidden rgba opacity）

首先，display: none可以完全移除元素并且不占据文档流中的位置。它对其他元素的布局没有影响，同时元素也不可见，无法与用户交互。

其次，visibility: hidden也可以隐藏元素，但仍然保留了元素在文档流中的位置。虽然元素不可见，但它仍然会影响其他元素的布局。

此外，我们还可以使用 rgba来设置元素的背景色为透明。通过将背景颜色的 rgba值的 alpha 通道设为 0，可以实现元素的隐藏。这种方式下，元素仍然占据位置，但不可见。与 visibility: hidden不同，元素可以与用户交互。

最后，opacity属性可以通过设置元素的透明度来隐藏元素。与前面的方法不同，opacity不会移除元素或改变其位置。元素仍然存在于文档流中，占据位置，但是变得透明不可见。与其他方式相比，opacity可以实现渐变效果的隐藏，同时仍然可以与用户交互。

html 复制代码

示例测试代码：
<!DOCTYPE html>
<html>
<head>
  <style>
    #myButton {
      /* opacity: 0; */
      /* visibility: hidden; */
      display: none;
    }
  </style>
</head>
<body>
  <button id="myButton" onclick="alert('按钮被点击了！')">点击我</button>
  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      alert('按钮被点击了！');
    });
  </script>
</body>
</html>

8. relative和absolute分别是相对于谁进行定位的？

position: relative定位是相对于元素自身在文档流中的位置进行定位。换句话说，元素的定位参考点是自身，通过设置 top、right、bottom 和 left 属性来调整元素的位置，但不会影响其他元素的布局。

position: absolute定位是相对于元素最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初包含它的块级容器（通常是 <body>元素）进行定位。这意味着绝对定位元素的定位参考点是最近的已定位祖先元素，通过设置 top、right、bottom 和 left 属性来调整元素相对于该祖先元素的位置。如果没有已定位的祖先元素，那么相对于最初包含它的块级容器进行定位。此时，绝对定位元素可能会影响其他元素的布局，因为它在正常文档流中不再占据位置。

9. 画一条0.5px的直线？（个人觉得似乎有点不妥？）

在屏幕上直接绘制出 0.5 像素宽度的直线是不可能的，因为屏幕的物理像素是一个固定大小的单元，无法以小于 1 像素的尺寸显示。 不过，在网页设计中，我们可以通过一些技巧来模拟出 0.5 像素宽度的效果。例如：

使用 CSS 的 transform 属性对元素进行缩放来达到这个效果。具体做法是创建一个 1px 宽度的线条，并将其水平缩放为原始宽度的一半，从而实现看起来像是 0.5px 宽度的线条。transform: scaleX(0.5);
使用 CSS 的 border 属性，并将线条颜色设置为半透明黑色。具体做法是创建一个高度为 1px 的 div 元素，并将其 border-top 属性设置为 1px 宽度、半透明黑色。 border-top: 1px solid rgba(0, 0, 0, 0.5);

10. 1rem、1em、1vh、1px、1rpx各自代表的含义？

1rem：表示相对于根元素（通常是元素）的字体大小。例如，如果根元素的字体大小为 16 像素，那么 1rem 等于 16 像素。
1em：表示相对于当前元素的字体大小。例如，如果某个元素的字体大小为 14 像素，那么 1em 等于 14 像素。
1vh：表示相对于视口高度的百分比。视口高度是指浏览器窗口可见区域的高度。例如，如果视口高度为 800 像素，那么 1vh 等于 8 像素（即 800 * 1%）。
1px：表示一个像素单位。像素是屏幕上最小的显示单元。实际显示效果会因设备像素密度（DPI/PPI）而有所不同。
1rpx：是微信小程序中的单位，表示相对于屏幕宽度的适配像素。它是微信小程序框架提供的一种相对单位，用于实现在不同设备上的屏幕适配。（个人补充）

需要注意的是，rem 和 em 是相对单位，其大小取决于父元素或根元素的字体大小。而 vh 和 px 是绝对单位，其大小固定不变。可以根据需要选择适合的单位来进行布局和样式设计。

11. HTML5、CSS3 里面都新增了那些新特性？

HTML5 新特性：

语义化标签 ：包括 <header>、<footer>、<nav>、<article>、<section>等，使得页面结构更清晰明了。
新的表单元素 ：如 <input type="date">、<input type="email">、<input type="url">等，简化了表单设计。
音频和视频支持：通过和元素，实现在网页中嵌入音频和视频内容。
Canvas 绘图：提供了一个使用 JavaScript 进行绘图的 API，用于动态生成图形、动画等。
本地存储：包括 Web Storage（localStorage 和 sessionStorage）和 IndexedDB，用于在客户端存储数据。
Web Workers：允许在后台运行脚本，以提高多线程处理能力。
WebSocket：实现了浏览器与服务器之间全双工通信的功能。
Geolocation API：提供了获取用户地理位置信息的能力。

CSS3 新特性：

选择器：新增了许多新的选择器，如属性选择器、伪类选择器等，增强了样式选择的灵活性。
盒子模型：引入了 box-sizing 属性，可以更方便地控制盒子模型的尺寸。
阴影效果：通过 box-shadow 和 text-shadow 属性，可以为元素添加阴影效果。
渐变：新增了渐变颜色的支持，包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。
过渡和动画：引入了 transition 和 animation 属性，使得实现元素过渡和动画效果更加简单。
媒体查询：允许根据设备特性（如屏幕大小、分辨率等）调整样式，实现响应式设计。
Flexbox 布局：提供了一种更灵活的布局方式，使得实现复杂布局更加容易。
Grid 布局：引入了网格布局系统，更好地支持多列布局和对齐方式。

以上只是 HTML5 和 CSS3 中的一部分新特性，它们使得网页开发更具创造力和交互性，为用户带来更好的浏览体验。

12. JS 数据类型有哪些? || JS 有哪些内置对象？

原始数据类型（Primitive data types）：

String（字符串）：表示文本数据，使用单引号（'）或双引号（"）表示。
Number（数字）：表示数值，包括整数和浮点数（带小数点的数值）。
Boolean（布尔值） ：表示逻辑值，只有两个值：true 和 false。
Undefined（未定义）：表示声明了变量但未赋值的数据类型，变量默认值为 undefined。
Null（空值）：表示空值或者不存在的值。
Symbol（符号）：ES6 新增，表示唯一且不可变的值。

引用数据类型（Reference data types）：

Object（对象）：表示复杂数据结构，可以包含多个键值对。
Array（数组）：一种特殊的对象，用于存储按索引顺序排列的值。
Function（函数）：函数也是对象的一种，可以执行代码块。
Date（日期）：表示日期和时间。
RegExp（正则表达式）：用于匹配字符串的模式。
Error（错误）：表示错误对象。

在 JavaScript 中，对象类型和引用数据类型其实是同一个概念的不同表达方式 。JavaScript 中的对象类型就是引用数据类型。

当我们谈到引用数据类型时，我们指的是存储在内存中的引用（地址），而不是实际的数据本身。在 JavaScript 中，所有的对象都是引用数据类型。当我们创建一个对象时，实际上在内存中分配了一块空间，并且变量存储的是指向该内存空间的引用。

因此，当我们将一个对象赋值给另一个变量时，实际上是将对象的引用（地址）复制给了另一个变量，而不是复制整个对象。这意味着两个变量实际上指向了内存中的同一个对象，因此它们共享同一块内存空间，对一个变量所做的修改会影响到另一个变量。

总之，对象类型就是引用数据类型，它们指的是存储在内存中的对象，并且变量存储的是对象的引用（地址）。对于 JavaScript 开发者来说，理解对象类型/引用数据类型的工作原理对于正确地处理对象的赋值、传递和操作非常重要。

13. 基本数据类型和引用数据类型有什么区别？

基本数据类型（Primitive data types）：

存储方式：存储在栈内存中。
访问：直接访问变量的值。
拷贝：通过值进行拷贝。
比较：比较的是值是否相等。

引用数据类型（Reference data types）：

存储方式：存储在堆内存中，变量存储的是指向堆内存的地址。
访问：先访问地址，再根据地址访问堆内存中的对象。
拷贝：拷贝的是地址，多个变量指向同一块内存空间。
比较：比较的是引用是否指向同一块内存空间。

14. innerHTML 和 innerText 和 documen.write 的区别

innerHTML 和 innerText 都是用于操作 HTML 元素内容的属性，它们之间有一些重要的区别：

`innerHTML`：

作用：innerHTML 是一个属性，可以获取或设置元素的 HTML 内容，包括标签和文本。
HTML 解析 ：innerHTML 返回的是解析过的 HTML 内容，在设置时会解析字符串中的 HTML 标签并将其作为 HTML 元素展示。
安全性 ：由于 innerHTML 会解析 HTML，因此存在安全风险，可能被用于注入恶意脚本（XSS 攻击）。
使用方式：只能在 JavaScript 代码中使用，不能在 HTML 元素中使用 JavaScript 调用。
局部作用：只会影响元素内部的 HTML 内容，不会改变其他元素或文档结构。

`innerText`：

作用：innerText 是一个属性，用于获取或设置元素的文本内容，会忽略 HTML 标签，只返回可见文本内容。
文本内容 ：innerText 返回的是元素内部的纯文本内容，不包含 HTML 标签。
性能：由于 innerText 不涉及解析 HTML，在某些情况下可能比 innerHTML 更快。

`document.write()`：

作用：在文档中写入 HTML 或文本内容。
使用方式：可以直接在 JavaScript 代码中使用，也可以在 HTML 元素中使用 JavaScript 调用。
覆盖现象 ：如果 document.write() 在页面加载后调用，它会覆盖整个文档（包括 HTML、CSS 和其他脚本）。
支持性能 ：document.write() 可以在没有 DOM 的情况下操作文档，但在大多数情况下，使用它来操作 DOM 是不推荐的。

15. JavaScript 由哪三部分组成：

ECMAScript（ES）：这是 JavaScript 的核心，描述了该语言的语法和基本对象。它规定了变量、数据类型、操作符、控制结构、对象和函数等基本的语言元素。
文档对象模型（DOM）：DOM 是一种让程序可以对 HTML 和 XML 文档进行访问和操作的方法。通过 DOM，开发者可以使用 JavaScript 来操作页面上的元素，比如改变内容、样式和结构等。
浏览器对象模型（BOM）：BOM 提供了与浏览器交互的方法和接口，包括处理浏览器窗口、历史记录、定时器等功能。BOM 并没有标准化，因此不同的浏览器可能提供不同的 BOM 接口。

16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系？

区别：

适用范围：
- e.getAttribute(propName) 可以获取任意属性的值，包括标准属性和自定义属性。
- e.propName 只能获取标准的 HTML 属性的值。
返回值类型：
- e.getAttribute(propName) 返回的始终是一个字符串，即属性的值。
- e.propName 可以根据属性的类型返回不同的值，比如布尔值、数值等。
属性是否存在：
- e.getAttribute(propName) 在属性不存在时返回 null。
- e.propName 在属性不存在时返回 undefined。

联系：

获取属性值：
- 当属性存在且为字符串类型时，可以通过 e.getAttribute(propName) 和 e.propName 都能够获取到属性的值。
- 但对于非字符串类型的属性，如布尔值或数值，只能使用 e.propName 来获取其原始类型的值，因为 e.getAttribute(propName) 始终返回字符串类型。
设置属性值：
- 通过 e.setAttribute(propName, value) 方法可以设置属性的值，其中属性名 propName 可以是任意字符串。
- 通过直接赋值 e.propName = value 的方式也可以设置标准 HTML 属性的值。

大佬博客补充：
e.getAttribute：获取的是标签上属性
e.propName：获取的是元素对象上属性

html 复制代码

<body>
  <input id="myInput" type="checkbox" checked="checked" data-number="100">
<script>
	var inputType1 = document.getElementById('myInput').type;
	var inputType2 = document.getElementById('myInput').getAttribute('type');
	console.log('inputType1:', inputType1); // 输出：inputType1: checkbox
	console.log('inputType2:', inputType2); // 输出：inputType2: checkbox
	
	var checkedValue1 = document.getElementById('myInput').checked;
	var checkedValue2 = document.getElementById('myInput').getAttribute('checked');
	console.log('checkedValue1:', checkedValue1); // 输出：checkedValue1: true
	console.log('checkedValue2:', checkedValue2); // 输出：checkedValue2: "checked"
	
	var numberValue1 = document.getElementById('myInput').getAttribute('data-number');
	var numberValue2 = document.getElementById('myInput').dataset.number;
	console.log('numberValue1:', numberValue1); // 输出：numberValue1: "100"
	console.log('numberValue2:', numberValue2); // 输出：numberValue2: "100"
</script>
</body>

17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?

offsetWidth 和 offsetHeight content + padding + border + 滚动条
clientWidth 和 clientHeight content + padding（不含滚动条）
scrollWidth 和 scrollHeight content + padding + 溢出尺寸（不含滚动条）
均不含margin

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Box Model Example</title>
  <style>
    #myElement {
      width: 200px;
      height: 150px;
      padding: 20px;
      margin: 30px;
      border: 5px solid black;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div id="myElement">
    <p>Content that causes overflow when added repeatedly. </p>
    <p>Content that causes overflow when added repeatedly. </p>
    <p>Content that causes overflow when added repeatedly. </p>
  </div>

  <script>
    var element = document.getElementById("myElement");
    console.log("offsetWidth: " + element.offsetWidth + ", offsetHeight: " + element.offsetHeight);
    console.log("clientWidth: " + element.clientWidth + ", clientHeight: " + element.clientHeight);
    console.log("scrollWidth: " + element.scrollWidth + ", scrollHeight: " + element.scrollHeight);
  </script>
</body>
</html>

18. 检测浏览器版本版本有哪些方式？

navigator.userAgent:
- 可以通过 navigator.userAgent 属性获取包含了浏览器信息的用户代理字符串。通过解析这个字符串，可以获取到浏览器的名称和版本信息。
- 例如，可以使用正则表达式匹配某些关键字来判断浏览器类型和版本。
navigator.appVersion:
- 类似于 navigator.userAgent，navigator.appVersion 属性也提供了浏览器的版本信息。
- 通常结合 navigator.appName 和 navigator.appVersion 来判断浏览器类型和版本。
navigator.platform:
- navigator.platform 属性返回用户操作系统的平台信息。结合浏览器类型和版本信息，可以更准确地判断浏览器版本。
Feature Detection:
- 使用特性检测来检测浏览器是否支持某些特定的功能或属性。根据不同浏览器对特性的支持程度来推断浏览器版本。
- 例如，检测某些新特性、API 或 CSS 属性在不同浏览器中的支持情况。
JavaScript 库:
- 使用现有的 JavaScript 库（如 Modernizr）来检测浏览器版本和支持的特性。这些库会处理复杂的浏览器兼容性问题，让开发者更方便地编写跨浏览器兼容的代码。
HTTP 请求头:
- 在服务器端获取浏览器版本信息，可以从 HTTP 请求头中读取 User-Agent 字段，其中包含了浏览器信息。

19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么？

节点类型	`nodeType`	`nodeName`	`nodeValue`
元素节点	1	元素的标签名	null
文本节点	3	"#text"	文本内容
属性节点	2	属性的名称	属性的值

20. HTTP 请求的时候 get 和 post 方式的区别？

数据位置：GET 请求将请求参数放在 URL 的查询字符串中，而 POST 请求则将请求参数放在请求实体(body)中。因此，GET 请求会将请求参数暴露在 URL 中，而 POST 请求相对更安全。
安全性：由于 GET 请求将请求参数暴露在 URL 中，因此 GET 请求不适合传输敏感信息，因为这些信息可能被记录在浏览器历史记录、服务器日志等地方。而 POST 请求的请求参数是包含在请求体中的，相对来说更安全。
幂等性：GET 请求是幂等的，也就是说对同一个 URL 的多次请求得到的结果是一样的。而 POST 请求则不一定是幂等的，因为可以在请求体中传递不同的内容。
缓存：GET 请求可以被缓存，而 POST 请求不能被缓存。因为 GET 请求的请求参数在 URL 中，所以浏览器可以根据 URL 缓存请求结果，而 POST 请求的请求参数在请求体中，无法缓存请求结果。
传输大小：由于 GET 请求将请求参数放在 URL 中，所以 URL 的长度有限制，因此 GET 请求能够传输的数据量较小。而 POST 请求将请求参数放在请求体中，没有 URL 长度限制，能够传输大量数据。

综上，GET 请求适合请求数据量较小、安全性要求不高、幂等性要求高、需要缓存的场景。而 POST 请求适合请求数据量较大、安全性要求较高、幂等性要求不强、不需要缓存的场景。

收工 2024-02-12 08:02

2024 前端面试题（GPT回答 + 示例代码 + 解释）No.1 - No.20

本文题目来源于全网收集，答案来源于 ChatGPT 和 博主（的小部分......）

格式：题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 code+ 解释 quote + 补充 quote

目录 No.1 - No.20

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

补充：SEO表现

2. 谈谈 Iframe ？

3. 介绍一下 CSS 的盒子模型？

4. 讲讲 css 选择器的优先级？

5. 垂直居中几种方式？

6. CSS link 与 @import 的区别和用法？

7. 谈谈元素的隐藏方式及其区别（display:none visibility:hidden rgba opacity）

8. relative和absolute分别是相对于谁进行定位的？

9. 画一条0.5px的直线？（个人觉得似乎有点不妥？）

10. 1rem、1em、1vh、1px、1rpx各自代表的含义？

11. HTML5、CSS3 里面都新增了那些新特性？

HTML5 新特性：

CSS3 新特性：

12. JS 数据类型有哪些? || JS 有哪些内置对象？

原始数据类型（Primitive data types）：

引用数据类型（Reference data types）：

13. 基本数据类型和引用数据类型有什么区别？

基本数据类型（Primitive data types）：

引用数据类型（Reference data types）：

14. innerHTML 和 innerText 和 documen.write 的区别

innerHTML：

innerText：

document.write()：

15. JavaScript 由哪三部分组成：

16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系？

区别：

联系：

17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?

18. 检测浏览器版本版本有哪些方式？

19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么？

20. HTTP 请求的时候 get 和 post 方式的区别？

本文题目来源于全网收集，答案来源于 ChatGPT 和博主（的小部分......）

格式：题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 `code`+ 解释 quote + 补充 quote

`innerHTML`：

`innerText`：

`document.write()`：