前端面试笔记[基础]-CSDN博客

本文链接：https://blog.csdn.net/m0_68271787/article/details/137244214

1、js 有那些数据类型

javascript 中包含 6 种数据类型：undefined、null、string、number、boolean 和 object。其中，前 5 种是原始数据类型，object 是对象类型。object 类型中包括 Object、Function、 String、Number、Boolean、Array、Regexp、Date、Globel、Math、Error，以及宿主环境提供的 object 类型。

2、js 如何获取一个 id

使用 document.getElementById() 方法：

const element = document.getElementById("id-of-element");

3、如何获取下面代码所有元素

<form>   <input name="" type="text" />  <input name="" type="text" /></form>

4、如何给 <a href=""></a > 添加个事件

可以使用 addEventListener() 方法给 <a> 元素添加事件监听器：

<a href="" id="my-link">Link</a>

<script>
  const link = document.getElementById("my-link");

  link.addEventListener("click", function(event) {
    // 在这里编写事件处理程序代码
  });
</script>

5、解释下 <!DOCTYPE> 及作用？

什么是 <!DOCTYPE>？

<!DOCTYPE>（文档类型定义）是一个特殊的 HTML 标记，用于告诉浏览器正在使用的 HTML 版本。它位于 HTML 文档的第一行，在 <html> 标记之前。

作用：

<!DOCTYPE> 有以下作用：

**触发标准模式：**它告诉浏览器以标准模式渲染页面，而不是混杂模式。标准模式更严格，并遵循 W3C 的 HTML 和 CSS 标准。
**指定使用的 HTML 版本：**它指定了正在使用的 HTML 版本，例如 HTML5、XHTML1.0 或 XHTML1.1。这有助于浏览器正确解释和呈现文档。
**激活文档对象模型 (DOM)：**它激活了 DOM，这是一个编程接口，可以让你使用 JavaScript 操作 HTML 文档。

重要性：

确保页面以标准模式渲染，从而提高兼容性和可访问性。
启用 DOM，从而允许使用 JavaScript 动态操作页面。
帮助浏览器正确解释和呈现文档，从而减少错误和不一致性。

6、写一个三栏布局

HTML：

<div class="container">
  <div class="left-column">...</div>
  <div class="center-column">...</div>
  <div class="right-column">...</div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.left-column,
.center-column,
.right-column {
  flex: 1;
}

说明：

父容器 container 使用 flexbox 布局，将子元素水平排列。
flex-direction: row 确保子元素从左到右排列。
flex: 1 属性使所有子元素具有相同的宽度，并自动调整大小以适应可用空间。

7、画下 css 盒模式

CSS 盒模式定义了元素的总宽度和高度，包括边框、内边距和内容。有两种盒模式：

1. 内容盒模式（默认）：

内容宽度 = 元素宽度
总宽度 = 内容宽度 + 边框宽度 + 内边距宽度

2. 边框盒模式：

内容宽度 = 元素宽度 - 边框宽度 - 内边距宽度
总宽度 = 元素宽度

可视化：

+-----------------------------+
|                            |
|        内容             |
|        (Content)           |
|                            |
+-----------------------------+
| 边框 (Border)            |
|                            |
+-----------------------------+
| 内边距 (Padding)         |
|                            |
+-----------------------------+

切换到边框盒模式：

使用 box-sizing 属性将元素切换到边框盒模式：

element {
  box-sizing: border-box;
}

优点：

**更直观的布局：**元素的总宽度与你指定的宽度相匹配，包括边框和内边距。
**简化计算：**你不必手动计算内容的宽度，因为 box-sizing: border-box; 会自动为你处理。
**跨浏览器一致性：**所有主要浏览器都支持边框盒模式，这确保了跨浏览器的布局一致性。

8、什么是块级元素和内联级元素？区别有那些？

块级元素

在页面上占据一个块（矩形）的空间。
从新的一行开始，并且在垂直方向上占据尽可能多的可用空间。
宽度和高度可以设置。
可以包含其他块级或内联级元素。

示例： div、p、h1、ul、table

内联级元素

在行内占据一个空间，不换行。
与文本一起流动，并且不会占据其自己的行。
通常用于文本、链接和图像。
宽度和高度不能直接设置，但可以通过字体大小和内边距等属性间接影响。

示例： span、a、img、input

区别

特征	块级元素	内联级元素
显示	从新的一行开始，占据块状空间	在行内占据空间，不换行
宽度和高度	可以设置	不能直接设置
包含	可以包含其他块级或内联级元素	通常包含文本、链接和图像
流动	不与文本流动	与文本一起流动
换行	换行	不换行

9、谈谈 CSS hack

CSS Hack

CSS Hack 是一种利用 CSS 选择器中浏览器特定属性或行为来针对特定浏览器或浏览器版本的技术。它们通常用于在不同浏览器中实现一致的样式，或者解决特定浏览器的兼容性问题。

类型：

**条件注释：**使用 <!--[if IE]> 等注释来针对特定浏览器。
**浏览器前缀：**使用 -webkit-、-moz- 和 -ms- 等前缀来针对特定的浏览器引擎。
**星号选择器：**使用 * 选择器来针对所有浏览器，但特定浏览器可能具有不同的行为。
**元素隐藏：**使用特定的样式规则来隐藏元素，仅在目标浏览器中可见。

示例：

/* 仅在 Internet Explorer 中隐藏元素 */
<!--[if IE]>
  #element {
    display: none;
  }
<![endif]-->

/* 仅在 Firefox 中使用特定的边框样式 */
#element {
  -moz-border-radius: 5px;
}

优点：

可以针对特定浏览器的错误或功能进行微调。
在早期浏览器中提供向后兼容性。

缺点：

**不推荐使用：**现代 CSS 技术（如 Flexbox 和 Grid）提供了更好的跨浏览器兼容性。
**维护困难：**随着时间的推移，浏览器支持可能会发生变化，这使得 Hack 难以维护。
**代码混乱：**Hack 会使代码难以阅读和理解。
**性能影响：**某些 Hack 可能会对页面性能产生负面影响。

10、测试浏览器有那些

在线工具：

BrowserStack
LambdaTest
CrossBrowserTesting
Sauce Labs

桌面应用程序：

Selenium WebDriver
Cypress
Puppeteer

移动应用程序：

Appium
Espresso (Android)
XCUITest (iOS)

浏览器扩展：

Web Developer Toolbar
User Agent Switcher
Responsive Design Tester

命令行工具：

WebDriverIO
Nightwatch.js
Protractor

其他资源：

11、css 选择符有那些

CSS 选择符用于匹配 HTML 文档中的元素。以下是 CSS 中最常用的选择符类型：

**元素选择符：**匹配具有特定名称的元素，如 p、div 或 h1。
**类选择符：**匹配具有特定类名的元素，如 .example。
**ID 选择符：**匹配具有特定 ID 的元素，如 #my-element。
**后代选择符：**匹配特定祖先元素的后代元素，如 div p。
**子选择符：**匹配特定父元素的子元素，如 ul > li。
**相邻兄弟选择符：**匹配紧跟在另一个元素后面的元素，如 p + span。
**一般兄弟选择符：**匹配与另一个元素处于同一级别且位于其后的元素，如 p ~ span。
**通配符选择符：**匹配任何元素，如 *。
**属性选择符：**匹配具有特定属性或属性值的元素，如 [type="text"]。
**伪类选择符：**匹配处于特定状态的元素，如 :hover、:active 或 :focus。
**伪元素选择符：**匹配元素的特定部分，如 ::before 或 ::after。

示例：

/* 匹配所有段落 */
p {
  color: red;
}

/* 匹配具有类名 "example" 的元素 */
.example {
  font-weight: bold;
}

/* 匹配具有 ID 为 "my-element" 的元素 */
#my-element {
  background-color: blue;
}

/* 匹配所有列表项 */
li {
  list-style-type: none;
}

/* 匹配紧跟在段落后面的所有跨度 */
p + span {
  color: green;
}