-
-
HTML 中 figure 标签的作用是用于包裹独立的内容,比如图片、图表、代码块、视频等,这些内容通常与主文内容相关,但可以独立存在。它常用于将媒体内容与周围的文本区分开来,增强语义化。figure 标签的使用场景包括:图片与图注
当你有一张图片,并且希望为其添加一个描述性标题时,可以使用
包裹图片和 标签。 figure标签是用于包裹图片、代码、视频等独立内容及其标题(figcaption)的语义化容器,提升可访问性和SEO;2.它与仅表示视觉元素的img标签不同,在语义上明确关联内容与说明,利于屏幕阅读器识别;3.在响应式设计中,figure作为结构化容器便于统一控制样式,使内容单元适配不同屏幕;4.除图片外,还可包裹代码块、音视频、SVG图表、blockquote引用等需标题说明的独立内容。
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
HTML 中 figure 标签的作用是用于包裹独立的内容,比如图片、图表、代码块、视频等,这些内容通常与主文内容相关,但可以独立存在。它常用于将媒体内容与周围的文本区分开来,增强语义化。figure 标签的使用场景包括:图片与图注
当你有一张图片,并且希望为其添加一个描述性标题时,可以使用
-
- 如何编写HTML文件及运行方法
- 编写和运行HTML文件的方法是:首先使用文本编辑器(如VSCode)编写符合语法的HTML代码,保存为.html后缀文件,然后双击该文件即可在默认浏览器中打开并查看页面效果。1.编写时需注意标签闭合、路径正确、使用语义化标签以避免常见问题;2.推荐使用VSCode等支持语法高亮和自动补全的编辑器提升效率;3.运行无需服务器,双击.html文件即可由浏览器解析展示;4.可借助浏览器开发者工具调试、使用LiveServer实现热更新、通过Git进行版本控制;5.实际项目中HTML常与CSS(负责样式)、Jav
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- HTML兼容旧浏览器技巧与polyfill使用教程
- 兼容旧浏览器主要通过使用polyfill和降级策略实现,其核心是渐进增强与优雅降级理念;2.Polyfill通过JavaScript模拟新特性,填补旧浏览器缺失的API,如html5shiv让IE识别HTML5标签,而转译(如Babel)则是将ES6+语法转换为ES5;3.两者区别在于polyfill解决运行时API缺失,转译解决语法兼容性,现代开发常结合使用Babel和core-js;4.使用polyfill可能带来性能问题,包括文件体积、执行开销和内存占用,可通过按需加载、CDN加速、缓存、压缩和延迟
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- 事件循环中的“任务”和“作业”有何不同?
- 宏任务和微任务的核心区别在于执行时机和优先级:宏任务是事件循环每轮执行一个的主线任务,如setTimeout、I/O、UI事件;微任务则在当前宏任务结束后立即全部执行,如Promise.then、queueMicrotask。2.微任务优先级高于宏任务,必须清空微任务队列后才会进入下一宏任务,这直接影响代码执行顺序、UI响应速度和数据一致性,是前端性能优化和避免bug的关键机制。
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- Prisma查询不返回数组?解决方法大全
- 在使用Prisma进行数据库查询时,有时会遇到模型中定义的关联数组(例如,ShoppingList中的items数组)未被返回的问题。本文将深入探讨该问题的原因,并提供明确的解决方案,确保关联数据能够正确地包含在查询结果中,从而避免数据缺失和潜在的应用程序错误。
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- CSS波浪边框制作技巧mask-image详解
- CSS制作波浪形边框的核心是使用mask-image属性结合SVG或渐变实现,1.使用SVG作为遮罩可通过DataURI嵌入路径定义波浪形状,并利用mask-size和mask-repeat控制显示效果;2.使用渐变作为遮罩可通过linear-gradient创建锯齿状波浪并重复显示;3.动态调整波浪可通过JavaScript修改SVG路径或使用CSS动画配合mask-position实现移动动画;4.兼容性方面需注意-webkit-mask-image等浏览器前缀及旧版浏览器降级处理;5.可结合back
- 文章 · 前端 | 1个月前 | CSS 动画 SVG mask-image 波浪边框 355浏览 收藏
-
- 如何判断JS函数是否被调用?
- JavaScript没有内置的函数调用历史记录机制,因此无法直接判断函数是否被调用,必须通过主动干预方式实现;2.最基础的方法是在函数内部设置计数器或布尔标记来记录调用状态;3.更优雅的方式是使用高阶函数对目标函数进行包装,分离追踪逻辑与业务逻辑,实现调用次数、时间等信息的监控;4.利用ES6的Proxy对象可以无侵入地拦截对象方法的访问,自动为所有方法添加调用追踪功能,适用于服务类或模块的统一监控;5.在测试环境中,应使用Jest等测试框架提供的jest.fn()或jest.spyOn()工具来精确断言
- 文章 · 前端 | 1个月前 | JavaScript 测试框架 高阶函数 函数调用 Proxy对象 355浏览 收藏
-
- HTML添加图片链接方法及点击跳转实现
- HTML图片链接的常见应用场景包括:1.电商网站中点击商品图片跳转至商品详情页;2.博客文章中点击图片实现放大查看;3.网站导航栏使用图片作为链接按钮;4.创建图片地图,将图片不同区域链接到不同URL;5.制作互动式信息图表,点击不同部分获取详细信息。优化SEO需做到:1.为img标签设置准确完整的alt属性,帮助搜索引擎理解图片内容;2.使用压缩后的合适格式与尺寸图片,提升加载速度;3.合理使用a标签的title属性补充信息;4.确保链接目标页面与图片内容相关,避免误导。a标签除href外的有用属性包括
- 文章 · 前端 | 1个月前 | html 图片链接 SEO ``标签 355浏览 收藏
-
- HTML表格边框怎么设置?
- frame属性不再常用的原因是其与结构样式分离原则相悖且功能有限,1.它将样式硬编码在HTML中,维护困难;2.仅能控制边框的有无和位置,无法定义颜色、粗细或样式;3.CSS提供了更灵活的控制方式,如border属性及border-collapse等。
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- JavaScript异步编程演变全解析
- JavaScript异步编程的核心问题是单线程环境下高效处理耗时操作而不阻塞主线程。1.最初使用回调函数,导致“回调地狱”,代码可读性和维护性差;2.Promise引入状态管理和链式调用,解决了嵌套问题并统一了错误处理;3.async/await作为Promise的语法糖,让异步代码几乎像同步一样直观,极大提升了开发体验和代码质量。
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- JS数组合并去重的几种方法
- 在JavaScript中合并两个数组并去除重复项,最简洁高效的方法是使用Set结合展开运算符。1.对于原始类型值,直接使用[...newSet([...arr1,...arr2])]即可完成合并与去重,Set会自动处理唯一性,包括将NaN视为单一值;2.对于对象数组,因Set基于引用判断相等,需采用基于唯一ID的Map去重法:遍历合并后的数组,以对象id为键存入Map,后出现的同id对象会覆盖前者,最后转回数组;3.也可尝试JSON.stringify序列化对象后用Set去重,但该方法受限于属性顺序、不可
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- JS中from方法将类数组转数组的方法
- Array.from()可将类数组或可迭代对象转换为真数组,1.它通过识别对象的length属性和索引或Symbol.iterator接口实现转换;2.常用于处理NodeList、arguments或自定义类数组对象;3.支持第二个参数映射函数,实现转换时同步处理元素;4.与[...spread]相比能处理不可迭代的类数组,与slice.call相比语法更清晰且支持映射;5.可生成指定长度数组、转换Set/Map、结合thisArg使用;6.注意仅适用于类数组或可迭代对象,对普通对象返回空数组,且为浅拷贝
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- JS计算时间差的实用方法分享
- 计算JS中的时间差,核心是将时间转换为时间戳进行相减,常用Date对象的getTime()方法获取毫秒值,再通过除法换算为秒、分钟、小时或天数;对于字符串日期需先转为Date对象,处理时区可使用Intl.DateTimeFormat或moment-timezone库;计算整数天差时需归一化到0点;性能优化包括复用Date对象、直接使用时间戳、利用performance.now()或WebWorkers;负时间差可通过Math.abs()取绝对值或判断正负调整逻辑;需注意Date对象的月份从0开始、两位年份
- 文章 · 前端 | 1个月前 | 时间戳 第三方库 Date对象 时区处理 计算时间差 355浏览 收藏
-
- 对象数组合并方法全解析
- 本文介绍了如何将包含多个对象数组的复杂数据结构,转换为一个扁平化的对象。通过Array.flatMap()和Object.assign()的巧妙结合,可以高效地提取并合并所有错误对象,最终生成一个包含所有键值对的单一对象。同时,针对TypeScript环境,本文还提供了类型定义方案,确保代码的类型安全。
- 文章 · 前端 | 1个月前 | 355浏览 收藏
-
- HTML特殊字符转义与XSS防御方法
- XSS防御需针对不同上下文进行安全编码。1.HTML内容中转义&为&、<为<、>为>、"为"、'为'。2.JavaScript字符串中对特殊字符使用\xHH或\uHHHH格式编码。3.URL中非字母数字字符转换为%HH形式。4.CSS属性值中非字母数字字符用\HH或\HHHHHH编码。5.推荐使用自动编码框架根据上下文自动选择编码方式。此外还需输入验证、CSP策略、HttpOnlyCookie、HTML净化库
- 文章 · 前端 | 1个月前 | 355浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 514次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 499次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- AI Mermaid流程图
- SEO AI Mermaid 流程图工具:基于 Mermaid 语法,AI 辅助,自然语言生成流程图,提升可视化创作效率,适用于开发者、产品经理、教育工作者。
- 740次使用
-
- 搜获客【笔记生成器】
- 搜获客笔记生成器,国内首个聚焦小红书医美垂类的AI文案工具。1500万爆款文案库,行业专属算法,助您高效创作合规、引流的医美笔记,提升运营效率,引爆小红书流量!
- 754次使用
-
- iTerms
- iTerms是一款专业的一站式法律AI工作台,提供AI合同审查、AI合同起草及AI法律问答服务。通过智能问答、深度思考与联网检索,助您高效检索法律法规与司法判例,告别传统模板,实现合同一键起草与在线编辑,大幅提升法律事务处理效率。
- 773次使用
-
- TokenPony
- TokenPony是讯盟科技旗下的AI大模型聚合API平台。通过统一接口接入DeepSeek、Kimi、Qwen等主流模型,支持1024K超长上下文,实现零配置、免部署、极速响应与高性价比的AI应用开发,助力专业用户轻松构建智能服务。
- 838次使用
-
- 迅捷AIPPT
- 迅捷AIPPT是一款高效AI智能PPT生成软件,一键智能生成精美演示文稿。内置海量专业模板、多样风格,支持自定义大纲,助您轻松制作高质量PPT,大幅节省时间。
- 727次使用