登录
推荐 文章 Go 技术 课程 下载 专题 AI
首页 >  文章 >  前端

HTML框架集使用教程及示例

时间:2026-04-13 08:09:32 176浏览 收藏

HTML框架集()是一种通过rows和cols属性将浏览器窗口划分为多个独立区域并分别加载不同页面的传统布局技术,支持水平/垂直分割、嵌套网格、命名框架跳转及兼容降级方案;尽管因SEO差、维护难、现代标准淘汰等原因已基本被CSS和JavaScript布局取代,但理解其结构逻辑对把握网页发展脉络和处理遗留系统仍有实用价值。

用html如何设置框架_使用HTML框架集构建页面结构【结构】

如果您希望将网页划分为多个独立区域并分别加载不同内容,则可以使用HTML框架集(frameset)来组织页面布局。以下是实现此结构的具体方法:

一、使用标签定义框架结构

是专门用于划分浏览器窗口的容器标签,替代标准的标签,通过rows或cols属性指定水平或垂直分割方式。每个子框架由标签定义,并通过src属性加载对应HTML文档。

1、将HTML文档的标签及其闭合标签完全移除。

2、在之后插入标签,表示将页面按百分比分成三行区域。

3、在内部依次添加三个、、标签。

4、以结束整个框架集定义。

二、通过cols属性创建左右分栏布局

当需要并排显示导航栏与主内容区时,可使用cols属性控制列宽比例,各按从左到右顺序加载指定资源,支持像素值、百分比及相对单位(*)混合使用。

1、编写,左侧固定200像素宽,右侧自动填充剩余空间。

2、在该内嵌套第一个作为导航面板。

3、插入第二个承载主体内容。

4、确保外部被正确闭合,不遗漏标签。

三、嵌套框架集实现复杂网格结构

单一frameset仅支持单向分割,如需同时实现行列组合(例如顶部横幅+左导航+右内容),必须在某个位置嵌入新的,形成多层嵌套关系。

1、外层使用划分顶部与主体区域。

2、第一个置于顶部区域。

3、在第二行区域中不再使用,而是嵌入一个新的。

4、该嵌套中分别放入和。

四、为框架设置名称并实现页面内跳转

通过name属性标识特定框架,可在其他页面的链接中使用target属性指向该名称,使点击链接后的内容仅在指定框架中加载,避免整页刷新。

1、给目标添加name属性,例如。

2、在导航页的链接中写入页面一

3、确保所有相关链接均使用相同target值,且与frame的name严格一致,包括大小写。

4、注意:target值必须与frame的name完全匹配,否则链接将在新窗口打开或覆盖整个页面

五、添加提供无框架环境兼容内容</h2> <p>由于现代浏览器逐步弃用frameset,且搜索引擎难以索引框架页,必须提供<noframes>区块作为降级方案,其中可放置普通<body>结构及替代性导航信息。</p> <p>1、在</frameset>闭合后立即添加<noframes>标签。</p> <p>2、在<noframes>内部插入标准<body>标签(部分浏览器允许省略起始标签但需保留语义结构)。</p> <p>3、写入简明文字说明:“您的浏览器不支持框架,请点击此处访问<a target='_blank' href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roKaSkI6txqu4rJZ1hM-trX7Okqq5aYeqcWC8hptkv32BqH5rg6KyzdFsg4af0bGulc6F3bKlhr19Yrusm3E'>首页</a>”。</p> <p>4、<strong><font color="green">必须包含至少一个可访问的链接,确保用户在禁用框架时仍能获取核心内容</font></strong>。</p><p>以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。</p> </div> <div class="labsList"> </div> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多&gt;</a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1年前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1个月前&nbsp;&nbsp;|&nbsp;&nbsp; </div> <div class="tit lineOverflow"><a href="/article/619053.html" title="CSS变量简化按钮悬停效果技巧" class="aBlack">CSS变量简化按钮悬停效果技巧</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="619053" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1个月前&nbsp;&nbsp;|&nbsp;&nbsp; </div> <div class="tit lineOverflow"><a href="/article/618916.html" title="JavaScript符号类型详解与应用" class="aBlack">JavaScript符号类型详解与应用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="618916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1个月前&nbsp;&nbsp;|&nbsp;&nbsp; </div> <div class="tit lineOverflow"><a href="/article/612539.html" title="HTML剪贴板复制粘贴怎么用" class="aBlack">HTML剪贴板复制粘贴怎么用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="612539" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1个月前&nbsp;&nbsp;|&nbsp;&nbsp; </div> <div class="tit lineOverflow"><a href="/article/611774.html" title="data-*属性详解:HTML数据存储与DOM操作技巧" class="aBlack">data-*属性详解:HTML数据存储与DOM操作技巧</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="611774" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多&gt;</a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;3天前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/4877_new_0_1.html" class="aLightGray" title="vite">vite</a>&nbsp;· <a href="/articletag/40021_new_0_1.html" class="aLightGray" title="运维手册">运维手册</a>&nbsp;· <a href="/articletag/40192_new_0_1.html" class="aLightGray" title="白屏排查">白屏排查</a>&nbsp;· <a href="/articletag/40193_new_0_1.html" class="aLightGray" title="CDN缓存">CDN缓存</a>&nbsp;· <a href="/articletag/40194_new_0_1.html" class="aLightGray" title="发布回滚">发布回滚</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="React">React</a> <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="白屏">白屏</a> <a href="javascript:;" class="aLightGray" title="vite">vite</a> <a href="javascript:;" class="aLightGray" title="CDN缓存">CDN缓存</a> <a href="javascript:;" class="aLightGray" title="index.html">index.html</a> <a href="javascript:;" class="aLightGray" title="发布回滚">发布回滚</a> <a href="javascript:;" class="aLightGray" title="JS 404">JS 404</a> </div> <div class="tit lineOverflow"><a href="/article/620228.html" title="Vite 前端发布后白屏怎么处理:JS 404、CDN 旧缓存和回滚路径" class="aBlack">Vite 前端发布后白屏怎么处理:JS 404、CDN 旧缓存和回滚路径</a></div> <div class="opt"> <span><i class="view"></i>342</span> <span class="collectBtn user_collection" data-id="620228" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;4天前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a>&nbsp;· <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a>&nbsp;· <a href="/articletag/39910_new_0_1.html" class="aLightGray" title="Core Web Vitals">Core Web Vitals</a>&nbsp;· <a href="/articletag/40163_new_0_1.html" class="aLightGray" title="渲染性能">渲染性能</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="渲染性能">渲染性能</a> <a href="javascript:;" class="aLightGray" title="CSS性能">CSS性能</a> <a href="javascript:;" class="aLightGray" title="CLS">CLS</a> <a href="javascript:;" class="aLightGray" title="content-visibility">content-visibility</a> <a href="javascript:;" class="aLightGray" title="contain-intrinsic-size">contain-intrinsic-size</a> <a href="javascript:;" class="aLightGray" title="Layout">Layout</a> </div> <div class="tit lineOverflow"><a href="/article/620202.html" title="前端长页面渲染卡顿怎么排查:用 content-visibility 跳过离屏区块" class="aBlack">前端长页面渲染卡顿怎么排查:用 content-visibility 跳过离屏区块</a></div> <div class="opt"> <span><i class="view"></i>430</span> <span class="collectBtn user_collection" data-id="620202" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a>&nbsp;· <a href="/articletag/2774_new_0_1.html" class="aLightGray" title="dom">dom</a>&nbsp;· <a href="/articletag/39783_new_0_1.html" class="aLightGray" title="虚拟列表">虚拟列表</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="滚动性能">滚动性能</a> <a href="javascript:;" class="aLightGray" title="虚拟列表">虚拟列表</a> <a href="javascript:;" class="aLightGray" title="长列表优化">长列表优化</a> <a href="javascript:;" class="aLightGray" title="DOM性能">DOM性能</a> </div> <div class="tit lineOverflow"><a href="/article/620135.html" title="前端长列表卡顿怎么优化:从全量 DOM 到虚拟列表架构" class="aBlack">前端长列表卡顿怎么优化:从全量 DOM 到虚拟列表架构</a></div> <div class="opt"> <span><i class="view"></i>260</span> <span class="collectBtn user_collection" data-id="620135" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a>&nbsp;· <a href="/articletag/39917_new_0_1.html" class="aLightGray" title="AbortController">AbortController</a>&nbsp;· <a href="/articletag/39920_new_0_1.html" class="aLightGray" title="表单提交">表单提交</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="旧响应覆盖">旧响应覆盖</a> <a href="javascript:;" class="aLightGray" title="前端重复提交">前端重复提交</a> <a href="javascript:;" class="aLightGray" title="loading锁">loading锁</a> <a href="javascript:;" class="aLightGray" title="fetch取消">fetch取消</a> <a href="javascript:;" class="aLightGray" title="按钮防抖">按钮防抖</a> </div> <div class="tit lineOverflow"><a href="/article/620123.html" title="前端按钮重复提交怎么办:loading 锁和 AbortController 最小配方" class="aBlack">前端按钮重复提交怎么办:loading 锁和 AbortController 最小配方</a></div> <div class="opt"> <span><i class="view"></i>442</span> <span class="collectBtn user_collection" data-id="620123" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/322_new_0_1.html" class="aLightGray" title="缓存">缓存</a>&nbsp;· <a href="/articletag/14884_new_0_1.html" class="aLightGray" title="Service Worker">Service Worker</a>&nbsp;· <a href="/articletag/40077_new_0_1.html" class="aLightGray" title="白屏">白屏</a>&nbsp;· <a href="/articletag/40078_new_0_1.html" class="aLightGray" title="发布故障">发布故障</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="缓存策略">缓存策略</a> <a href="javascript:;" class="aLightGray" title="前端白屏">前端白屏</a> <a href="javascript:;" class="aLightGray" title="Service Worker">Service Worker</a> <a href="javascript:;" class="aLightGray" title="CacheStorage">CacheStorage</a> <a href="javascript:;" class="aLightGray" title="资源404">资源404</a> <a href="javascript:;" class="aLightGray" title="发布回滚">发布回滚</a> </div> <div class="tit lineOverflow"><a href="/article/620112.html" title="前端发布后白屏复盘:Service Worker 缓存旧入口导致 JS 资源 404" class="aBlack">前端发布后白屏复盘:Service Worker 缓存旧入口导致 JS 资源 404</a></div> <div class="opt"> <span><i class="view"></i>469</span> <span class="collectBtn user_collection" data-id="620112" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/2436_new_0_1.html" class="aLightGray" title="异步任务">异步任务</a>&nbsp;· <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a>&nbsp;· <a href="/articletag/39770_new_0_1.html" class="aLightGray" title="接口设计">接口设计</a>&nbsp;· <a href="/articletag/40045_new_0_1.html" class="aLightGray" title="后台系统">后台系统</a>&nbsp;· <a href="/articletag/40046_new_0_1.html" class="aLightGray" title="批量导出">批量导出</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="异步任务">异步任务</a> <a href="javascript:;" class="aLightGray" title="文件下载">文件下载</a> <a href="javascript:;" class="aLightGray" title="接口设计">接口设计</a> <a href="javascript:;" class="aLightGray" title="前端导出">前端导出</a> <a href="javascript:;" class="aLightGray" title="状态查询">状态查询</a> <a href="javascript:;" class="aLightGray" title="报表导出">报表导出</a> </div> <div class="tit lineOverflow"><a href="/article/620092.html" title="前端批量导出接口怎么设计:异步任务、状态查询和下载链接" class="aBlack">前端批量导出接口怎么设计:异步任务、状态查询和下载链接</a></div> <div class="opt"> <span><i class="view"></i>296</span> <span class="collectBtn user_collection" data-id="620092" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a>&nbsp;· <a href="/articletag/39813_new_0_1.html" class="aLightGray" title="localStorage">localStorage</a>&nbsp;· <a href="/articletag/40043_new_0_1.html" class="aLightGray" title="表格配置">表格配置</a>&nbsp;· <a href="/articletag/40044_new_0_1.html" class="aLightGray" title="用户偏好">用户偏好</a>&nbsp;· <a href="/articletag/40045_new_0_1.html" class="aLightGray" title="后台系统">后台系统</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="用户偏好">用户偏好</a> <a href="javascript:;" class="aLightGray" title="localStorage">localStorage</a> <a href="javascript:;" class="aLightGray" title="前端表格">前端表格</a> <a href="javascript:;" class="aLightGray" title="列配置">列配置</a> <a href="javascript:;" class="aLightGray" title="可见列">可见列</a> <a href="javascript:;" class="aLightGray" title="列宽保存">列宽保存</a> </div> <div class="tit lineOverflow"><a href="/article/620091.html" title="前端表格列设置刷新后丢失怎么办:可见列、列宽和顺序这样保存" class="aBlack">前端表格列设置刷新后丢失怎么办:可见列、列宽和顺序这样保存</a></div> <div class="opt"> <span><i class="view"></i>351</span> <span class="collectBtn user_collection" data-id="620091" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/1017_new_0_1.html" class="aLightGray" title="websocket">websocket</a>&nbsp;· <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a>&nbsp;· <a href="/articletag/27659_new_0_1.html" class="aLightGray" title="sse">sse</a>&nbsp;· <a href="/articletag/40036_new_0_1.html" class="aLightGray" title="实时通知">实时通知</a>&nbsp;· <a href="/articletag/40037_new_0_1.html" class="aLightGray" title="方案选型">方案选型</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="websocket">websocket</a> <a href="javascript:;" class="aLightGray" title="消息推送">消息推送</a> <a href="javascript:;" class="aLightGray" title="EventSource">EventSource</a> <a href="javascript:;" class="aLightGray" title="SSE">SSE</a> <a href="javascript:;" class="aLightGray" title="前端实时通知">前端实时通知</a> <a href="javascript:;" class="aLightGray" title="短轮询">短轮询</a> </div> <div class="tit lineOverflow"><a href="/article/620087.html" title="前端实时通知方案选型:短轮询、SSE、WebSocket 怎么选" class="aBlack">前端实时通知方案选型:短轮询、SSE、WebSocket 怎么选</a></div> <div class="opt"> <span><i class="view"></i>498</span> <span class="collectBtn user_collection" data-id="620087" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/40002_new_0_1.html" class="aLightGray" title="接口排查">接口排查</a>&nbsp;· <a href="/articletag/40021_new_0_1.html" class="aLightGray" title="运维手册">运维手册</a>&nbsp;· <a href="/articletag/40024_new_0_1.html" class="aLightGray" title="性能告警">性能告警</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="接口超时">接口超时</a> <a href="javascript:;" class="aLightGray" title="Network瀑布图">Network瀑布图</a> <a href="javascript:;" class="aLightGray" title="降级回滚">降级回滚</a> <a href="javascript:;" class="aLightGray" title="线上告警">线上告警</a> </div> <div class="tit lineOverflow"><a href="/article/620079.html" title="前端接口超时告警运行手册:从瀑布图到降级回滚" class="aBlack">前端接口超时告警运行手册:从瀑布图到降级回滚</a></div> <div class="opt"> <span><i class="view"></i>287</span> <span class="collectBtn user_collection" data-id="620079" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;1星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a>&nbsp;· <a href="/articletag/9935_new_0_1.html" class="aLightGray" title="sticky">sticky</a>&nbsp;· <a href="/articletag/40022_new_0_1.html" class="aLightGray" title="布局调试">布局调试</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="Overflow">Overflow</a> <a href="javascript:;" class="aLightGray" title="position sticky">position sticky</a> <a href="javascript:;" class="aLightGray" title="滚动容器">滚动容器</a> <a href="javascript:;" class="aLightGray" title="前端调试">前端调试</a> <a href="javascript:;" class="aLightGray" title="吸顶布局">吸顶布局</a> </div> <div class="tit lineOverflow"><a href="/article/620076.html" title="CSS sticky 不生效排查清单:从 top、overflow 到滚动容器逐层定位" class="aBlack">CSS sticky 不生效排查清单:从 top、overflow 到滚动容器逐层定位</a></div> <div class="opt"> <span><i class="view"></i>179</span> <span class="collectBtn user_collection" data-id="620076" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;2星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/652_new_0_1.html" class="aLightGray" title="静态资源">静态资源</a>&nbsp;· <a href="/articletag/5322_new_0_1.html" class="aLightGray" title="cdn">cdn</a>&nbsp;· <a href="/articletag/40011_new_0_1.html" class="aLightGray" title="云部署">云部署</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="对象存储">对象存储</a> <a href="javascript:;" class="aLightGray" title="静态资源">静态资源</a> <a href="javascript:;" class="aLightGray" title="缓存策略">缓存策略</a> <a href="javascript:;" class="aLightGray" title="cdn">cdn</a> <a href="javascript:;" class="aLightGray" title="前端部署">前端部署</a> <a href="javascript:;" class="aLightGray" title="容器服务">容器服务</a> </div> <div class="tit lineOverflow"><a href="/article/620069.html" title="前端静态资源上云部署选型:对象存储、CDN 和容器服务怎么选" class="aBlack">前端静态资源上云部署选型:对象存储、CDN 和容器服务怎么选</a></div> <div class="opt"> <span><i class="view"></i>433</span> <span class="collectBtn user_collection" data-id="620069" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a>&nbsp;· <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> &nbsp;&nbsp;|&nbsp;&nbsp;2星期前&nbsp;&nbsp;|&nbsp;&nbsp; <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a>&nbsp;· <a href="/articletag/39982_new_0_1.html" class="aLightGray" title="接口联调">接口联调</a>&nbsp;· <a href="/articletag/39989_new_0_1.html" class="aLightGray" title="表单交互">表单交互</a>&nbsp;· <a href="/articletag/39990_new_0_1.html" class="aLightGray" title="重复提交">重复提交</a>&nbsp;· <a href="/articletag/39991_new_0_1.html" class="aLightGray" title="用户体验">用户体验</a>&nbsp;· <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="表单提交">表单提交</a> <a href="javascript:;" class="aLightGray" title="重复请求">重复请求</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="幂等键">幂等键</a> <a href="javascript:;" class="aLightGray" title="按钮禁用">按钮禁用</a> </div> <div class="tit lineOverflow"><a href="/article/620045.html" title="前端表单重复提交防护工作流:从按钮状态到请求取消和幂等键" class="aBlack">前端表单重复提交防护工作流:从按钮状态到请求取消和幂等键</a></div> <div class="opt"> <span><i class="view"></i>374</span> <span class="collectBtn user_collection" data-id="620045" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 课程推荐 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多&gt;</a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div> <!-- footer --> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/frontend/common.js" defer></script> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>