2024 前端面试题 附录1

这里记录的是今天看到的其他的知识点

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

---

---

附1. 用原生 CSS 画一个三角形

推荐解答视频：https://www.bilibili.com/video/BV1sv4y1d7oc

---

附2. BFC 是什么？

推荐解答视频：https://www.bilibili.com/video/BV1bT4y1P732

---

附3. title 与 alt 的区别是什么？

在 HTML 中，title 属性和 alt 属性都用于提供关于元素的描述信息，但它们的作用和使用场景有所不同：

1. title 属性：

• 用途：title 属性用于提供关于元素的额外信息，通常会在鼠标悬停在元素上时显示为工具提示（tooltip）。
• 元素：title 属性通常用于链接 <a>、图片 <img>、表单字段等元素。
• 示例：<a href="#" title="点击查看更多信息">链接</a>

2. alt 属性：

• 用途：alt 属性主要用于为图像元素提供替代文本，当图像无法显示时或者用户使用辅助技术（如屏幕阅读器）浏览网页时，alt 属性可以代替图像显示相关信息。
• 元素：alt 属性通常用于图像 <img> 元素。
• 示例：<img src="image.jpg" alt="这里是图片的描述">

总结：

• title 属性用于提供额外信息，通常与用户交互和界面提示有关，主要用于增强用户体验。
• alt 属性用于提供图像的替代文本，用于辅助技术和当图像无法显示时提供信息。

在实际开发中，正确使用这两个属性能够提高网页的可访问性和用户体验。

---

附4. href 与 src 的区别是什么？

href 和 src 是 HTML 中常用的属性，它们用于指定链接和资源的位置。它们的区别如下：

1. href 属性：

• 用途：href 属性用于指定链接的目标地址，通常用于超链接 <a> 元素、外部样式表 <link> 元素、书签等。
• 元素：href 属性通常用于 <a>、<link>、<base> 等元素。
• 示例：<a href="https://example.com">点击这里</a>

2. src 属性：

• 用途：src 属性用于指定要嵌入或引用的外部资源的位置，通常用于图像、脚本、框架等。
• 元素：src 属性通常用于 <img>、<script>、<iframe> 等元素。
• 示例：<img src="image.jpg" alt="图片">

总结：

• href 属性用于指定链接的目标地址，用于超链接、外部样式表等。
• src 属性用于指定要嵌入或引用的外部资源的位置，用于图像、脚本等。

需要注意的是，虽然 href 和 src 都用于指定位置，但其作用的对象不同。href 用于指定链接的目标地址，而 src 用于指定要嵌入或引用的外部资源的位置。

---

附5. calc, support, media各自的含义及用法？

calc、@support 和 @media 是 CSS 中常用的关键字，它们的含义和用法如下：

1. calc：

• 含义：calc 函数用于执行简单的数学运算，可以在 CSS 中动态计算属性值。
• 用法：calc 函数的语法为 calc(expression)，其中 expression 可以是包含加减乘除运算的表达式。常见的使用场景包括设置宽度、高度、边距等属性值时进行动态计算。
• 示例：width: calc(100% - 20px);

2. @support：

• 含义：@support 规则用于检测浏览器是否支持某个 CSS 特性或功能。
• 用法：@support 规则通过条件判断来确定是否支持某个特定的 CSS 特性。可以使用 @support 条件来包裹带有兼容性问题的 CSS 规则，从而确保在浏览器支持该特性时才应用这些规则。
• 示例：

@supports (display: grid) {
  /* 浏览器支持 grid 布局时应用以下规则 */
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

3. @media：

• 含义：@media 规则用于根据设备的特性或媒体类型来应用不同的 CSS 样式。
• 用法：@media 规则通过媒体查询（Media Query）来定义在特定条件下应用哪些 CSS 规则。可以根据设备的宽度、高度、颜色等特性来针对不同的设备或屏幕尺寸应用不同的样式。
• 示例：

@media screen and (max-width: 600px) {
  /* 在屏幕宽度小于等于 600px 时应用以下规则 */
  body {
    font-size: 14px;
  }
}

总结：

• calc 函数用于执行简单的数学运算，动态计算 CSS 属性值。
• @support 规则用于检测浏览器是否支持某个 CSS 特性或功能。
• @media 规则用于根据设备的特性或媒体类型来应用不同的 CSS 样式。

这些关键字都是为了增强 CSS 的灵活性和适应性，使开发者能够更方便地处理不同的布局和设备情况。

---

下班！