这里记录的是今天看到的其他的知识点
原篇地址：2024 前端面试题（GPT回答 + 示例代码 + 解释）No.1 - No.20
目录
- 这里记录的是今天看到的其他的知识点
- 原篇地址：[2024 前端面试题（GPT回答 + 示例代码 + 解释）No.1 - No.20](https://blog.csdn.net/m0_67023788/article/details/136101352)
- 附1. 用原生 CSS 画一个三角形
- 附2. BFC 是什么？
- 附3. title 与 alt 的区别是什么？
- 附4. href 与 src 的区别是什么？
- 附5. calc, support, media各自的含义及用法？
附1. 用原生 CSS 画一个三角形
推荐解答视频：https://www.bilibili.com/video/BV1sv4y1d7oc
附2. BFC 是什么？
推荐解答视频：https://www.bilibili.com/video/BV1bT4y1P732
附3. title 与 alt 的区别是什么？
在 HTML 中，title 属性和 alt 属性都用于提供关于元素的描述信息，但它们的作用和使用场景有所不同：
title属性：
- 用途：
title属性用于提供关于元素的额外信息，通常会在鼠标悬停在元素上时显示为工具提示（tooltip）。 - 元素：
title属性通常用于链接<a>、图片<img>、表单字段等元素。 - 示例：
<a href="#" title="点击查看更多信息">链接</a>
alt属性：
- 用途：
alt属性主要用于为图像元素提供替代文本，当图像无法显示时或者用户使用辅助技术（如屏幕阅读器）浏览网页时，alt属性可以代替图像显示相关信息。 - 元素：
alt属性通常用于图像<img>元素。 - 示例：
<img src="image.jpg" alt="这里是图片的描述">
总结：
title属性用于提供额外信息，通常与用户交互和界面提示有关，主要用于增强用户体验。alt属性用于提供图像的替代文本，用于辅助技术和当图像无法显示时提供信息。
在实际开发中，正确使用这两个属性能够提高网页的可访问性和用户体验。
附4. href 与 src 的区别是什么？
href 和 src 是 HTML 中常用的属性，它们用于指定链接和资源的位置。它们的区别如下：
href属性：
- 用途：
href属性用于指定链接的目标地址，通常用于超链接<a>元素、外部样式表<link>元素、书签等。 - 元素：
href属性通常用于<a>、<link>、<base>等元素。 - 示例：
<a href="https://example.com">点击这里</a>
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 中常用的关键字，它们的含义和用法如下：
calc：
- 含义：
calc函数用于执行简单的数学运算，可以在 CSS 中动态计算属性值。 - 用法：
calc函数的语法为calc(expression)，其中expression可以是包含加减乘除运算的表达式。常见的使用场景包括设置宽度、高度、边距等属性值时进行动态计算。 - 示例：
width: calc(100% - 20px);
@support：
- 含义：
@support规则用于检测浏览器是否支持某个 CSS 特性或功能。 - 用法：
@support规则通过条件判断来确定是否支持某个特定的 CSS 特性。可以使用@support条件来包裹带有兼容性问题的 CSS 规则，从而确保在浏览器支持该特性时才应用这些规则。 - 示例：
@supports (display: grid) {/* 浏览器支持 grid 布局时应用以下规则 */.container {display: grid;grid-template-columns: 1fr 1fr;}
}
@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 的灵活性和适应性，使开发者能够更方便地处理不同的布局和设备情况。
下班！
Hive调优——数据倾斜的解决指南)
)
)
