温州大型网站建设,wordpress修改邮箱,设计学校网站模板免费下载,国家商标注册官网查询系统这里记录的是今天看到的其他的知识点
原篇地址#xff1a;2024 前端面试题#xff08;GPT回答 示例代码 解释#xff09;No.1 - No.20 目录 这里记录的是今天看到的其他的知识点原篇地址#xff1a;[2024 前端面试题#xff08;GPT回答 示例代码 解释#xff09;No.…这里记录的是今天看到的其他的知识点
原篇地址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 srcimage.jpg alt这里是图片的描述
总结
title 属性用于提供额外信息通常与用户交互和界面提示有关主要用于增强用户体验。alt 属性用于提供图像的替代文本用于辅助技术和当图像无法显示时提供信息。
在实际开发中正确使用这两个属性能够提高网页的可访问性和用户体验。 附4. href 与 src 的区别是什么
href 和 src 是 HTML 中常用的属性它们用于指定链接和资源的位置。它们的区别如下
href 属性
用途href 属性用于指定链接的目标地址通常用于超链接 a 元素、外部样式表 link 元素、书签等。元素href 属性通常用于 a、link、base 等元素。示例a hrefhttps://example.com点击这里/a
src 属性
用途src 属性用于指定要嵌入或引用的外部资源的位置通常用于图像、脚本、框架等。元素src 属性通常用于 img、script、iframe 等元素。示例img srcimage.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 的灵活性和适应性使开发者能够更方便地处理不同的布局和设备情况。 下班
