当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5结构标签闭合问题详解

HTML5结构标签闭合问题详解

2026-01-22 13:06:41 0浏览收藏

本篇文章给大家分享《HTML5结构标签需不需要闭合？自闭合与非自闭合区别详解》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

HTML5中
、
、
、
、
、
、
等结构标签必须成对闭合，否则会导致DOM解析异常、CSS失效、无障碍访问受损及W3C验证失败。

HTML5结构标签需要闭合吗_自闭合与非自闭合区别【说明】

HTML5中哪些结构标签必须成对闭合？

绝大多数HTML5结构标签（如

、

）都属于**非自闭合标签**，必须严格成对出现。浏览器不会自动补全它们的结束标签——即使页面看起来“正常显示”，未闭合也可能导致：

DOM树解析异常，影响JavaScript获取元素（例如 document.querySelector('section') 返回 null）
CSS选择器失效（如 section > p 因嵌套断裂而匹配不到）
屏幕阅读器语义中断，损害无障碍访问
W3C验证失败（W3C Markup Validation Service 会报 End tag for element “section” seen, but there were open elements 类错误）

、这类标签为什么不用闭合？

它们是**空元素（void elements）**，在HTML5规范中被明确定义为“不能包含任何内容”，因此语法上只允许单标签形式。写成或是**无效HTML**，现代浏览器虽会容错解析，但：

W3C验证器直接报错：Element “input” is not allowed as child of element “div” in this context（因解析器误判为有子内容）
某些静态站点生成器（如Hugo、Jekyll）或构建工具（如Webpack + html-webpack-plugin）可能拒绝处理
VS Code等编辑器会标红并提示 Tag 'input' is missing required attribute 'type' 等误导性警告

正确写法只需一个开始标签，斜杠 / 在HTML5中完全可省略（但保留也合法）：

常见闭合陷阱：你以为它自闭，其实它不是

有些标签名字像自闭合，实际是双标签——强行省略结束标签会导致严重嵌套错乱。典型例子：

</code>：必须写 <code><textarea>默认值，写成 </code> 会丢失所有内容且破坏后续结构</li> <li><code><script></code> 和 <code><style></code>：即使内容为空，也必须闭合（<code><script></script></code>），否则浏览器认为脚本/样式块未结束</li> <li><code><video></code>、<code><audio></code>：虽常带 <code>controls</code> 属性，但仍是容器标签，需闭合；若内部有 <code><source></code>，更不能漏掉 <code></video></code></li> </ul><p>一个真实调试场景：某页底部导航突然跑到顶部，检查DOM发现 <code><nav></code> 标签没闭合，导致整个 <code><body></code> 被浏览器“猜测”为 <code><nav></code> 的内容区。</p> <h3>如何快速验证标签是否闭合正确？</h3> <p>别靠肉眼数标签——用工具直击本质：</p> <ul><li>在VS Code中安装插件 <strong>Auto Close Tag</strong> 和 <strong>Auto Rename Tag</strong>，输入 <code><div></code> 后自动补全 <code></div></code>，重命名时同步更新</li> <li>右键网页 → “查看页面源代码” → 复制全部到 <a target='_blank' href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXuytMyerpiffdjFi4PMnKqdsoTUk6qun2mtv7JwmnmyhqKulbikgnae3LJ7hpmGqrWyhbqUmbuseWm0faNkio2Ga77ds7KOho3PsqF-mQ'>W3C验证器</a>，它会精确指出哪一行哪个标签未闭合</li> <li>Chrome开发者工具中，Elements面板里看DOM树：如果某个标签展开后子节点异常多（比如 <code><header></code> 下出现了本该在 <code><footer></code> 里的元素），基本就是前面某个标签忘闭合了</li> </ul><p>最易被忽略的一点：HTML5允许部分标签的结束标签“省略”（如 <code><p></code>、<code><li></code>），但这只是语法糖，**不等于可以随意不写**——省略规则有严格上下文限制，新手建议一律显式闭合，避免把“允许”当成“推荐”。</p><p>今天关于《HTML5结构标签闭合问题详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/467471.html" title="Node.js入门：编写服务器代码教程" class="img_box"> <img src="/uploads/20260122/17690583966971b05c8a1da.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Node.js入门：编写服务器代码教程">Node.js入门：编写服务器代码教程 </a> <dl> <dt class="lineOverflow"><a href="/article/467471.html" title="Node.js入门：编写服务器代码教程" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">Node.js入门：编写服务器代码教程</dd> </dl> </div> <div class="cateItem"> <a href="/article/467473.html" title="CAD文字乱码原因及解决方法" class="img_box"> <img src="/uploads/20260122/17690584556971b0979dc36.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="CAD文字乱码原因及解决方法"> </a> <dl> <dt class="lineOverflow"><a href="/article/467473.html" class="aBlack" title="CAD文字乱码原因及解决方法">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">CAD文字乱码原因及解决方法</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/622447.html" class="img_box" title="浏览器 Cookie Store API 怎么监听登录态变化：change 事件、页面刷新与降级处理"> <img src="/uploads/20260826/1787757134-cookie-change-refresh.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="浏览器 Cookie Store API 怎么监听登录态变化：change 事件、页面刷新与降级处理"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/39862_new_0_1.html" class="aLightGray" title="登录态">登录态</a> · <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> · <a href="javascript:;" class="aLightGray" title="Cookie Store API">Cookie Store API</a> <a href="javascript:;" class="aLightGray" title="cookieStore">cookieStore</a> <a href="javascript:;" class="aLightGray" title="登录态变化">登录态变化</a> <a href="javascript:;" class="aLightGray" title="CookieChangeEvent">CookieChangeEvent</a> <a href="javascript:;" class="aLightGray" title="前端降级">前端降级</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622447.html" class="aBlack" target="_blank" title="浏览器 Cookie Store API 怎么监听登录态变化：change 事件、页面刷新与降级处理">浏览器 Cookie Store API 怎么监听登录态变化：change 事件、页面刷新与降级处理</a> </dt> <dd class="cont2"> <span><i class="view"></i>346浏览</span> <span class="collectBtn user_collection" data-id="622447" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622415.html" class="img_box" title="CSS container query 如何配合 ResizeObserver：避免响应式组件重复计算"> <img src="/uploads/20260826/1787748443-container-query-layout.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS container query 如何配合 ResizeObserver：避免响应式组件重复计算"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 3小时前 | <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/39768_new_0_1.html" class="aLightGray" title="前端性能">前端性能</a> · <a href="javascript:;" class="aLightGray" title="ResizeObserver">ResizeObserver</a> <a href="javascript:;" class="aLightGray" title="CSS容器查询">CSS容器查询</a> <a href="javascript:;" class="aLightGray" title="响应式组件">响应式组件</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622415.html" class="aBlack" target="_blank" title="CSS container query 如何配合 ResizeObserver：避免响应式组件重复计算">CSS container query 如何配合 ResizeObserver：避免响应式组件重复计算</a> </dt> <dd class="cont2"> <span><i class="view"></i>488浏览</span> <span class="collectBtn user_collection" data-id="622415" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622401.html" class="img_box" title="IntersectionObserver 怎么避免首屏图片抖动：懒加载、占位尺寸与可见性回收"> <img src="/uploads/20260826/1787744177-intersection-layout-reserve.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="IntersectionObserver 怎么避免首屏图片抖动：懒加载、占位尺寸与可见性回收"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/39948_new_0_1.html" class="aLightGray" title="图片加载">图片加载</a> · <a href="javascript:;" class="aLightGray" title="图片懒加载">图片懒加载</a> <a href="javascript:;" class="aLightGray" title="aspect-ratio">aspect-ratio</a> <a href="javascript:;" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a> <a href="javascript:;" class="aLightGray" title="浏览器性能">浏览器性能</a> <a href="javascript:;" class="aLightGray" title="首屏抖动">首屏抖动</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622401.html" class="aBlack" target="_blank" title="IntersectionObserver 怎么避免首屏图片抖动：懒加载、占位尺寸与可见性回收">IntersectionObserver 怎么避免首屏图片抖动：懒加载、占位尺寸与可见性回收</a> </dt> <dd class="cont2"> <span><i class="view"></i>281浏览</span> <span class="collectBtn user_collection" data-id="622401" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622378.html" class="img_box" title="前端 URLPattern 怎么匹配带参数的路由：命名捕获、校验失败与降级处理"> <img src="/uploads/20260826/1787736090-urlpattern-fallback-check.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 URLPattern 怎么匹配带参数的路由：命名捕获、校验失败与降级处理"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/1195_new_0_1.html" class="aLightGray" title="路由">路由</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> · <a href="/articletag/40476_new_0_1.html" class="aLightGray" title="兼容性">兼容性</a> · <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="URLPattern">URLPattern</a> <a href="javascript:;" class="aLightGray" title="命名捕获">命名捕获</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622378.html" class="aBlack" target="_blank" title="前端 URLPattern 怎么匹配带参数的路由：命名捕获、校验失败与降级处理">前端 URLPattern 怎么匹配带参数的路由：命名捕获、校验失败与降级处理</a> </dt> <dd class="cont2"> <span><i class="view"></i>102浏览</span> <span class="collectBtn user_collection" data-id="622378" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622377.html" class="img_box" title="前端页面为什么回退后表单还在：bfcache 缓存命中、pageshow 与状态清理"> <img src="/uploads/20260826/1787735958-bfcache-lifecycle.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端页面为什么回退后表单还在：bfcache 缓存命中、pageshow 与状态清理"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/622377.html" class="aBlack" target="_blank" title="前端页面为什么回退后表单还在：bfcache 缓存命中、pageshow 与状态清理">前端页面为什么回退后表单还在：bfcache 缓存命中、pageshow 与状态清理</a> </dt> <dd class="cont2"> <span><i class="view"></i>170浏览</span> <span class="collectBtn user_collection" data-id="622377" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622367.html" class="img_box" title="URLPattern 怎么做前端路由匹配：命名参数、URL 校验与兼容降级"> <img src="/uploads/20260826/1787732376-urlpattern-fallback-check.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="URLPattern 怎么做前端路由匹配：命名参数、URL 校验与兼容降级"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 7小时前 | <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> · <a href="javascript:;" class="aLightGray" title="命名参数">命名参数</a> <a href="javascript:;" class="aLightGray" title="前端路由">前端路由</a> <a href="javascript:;" class="aLightGray" title="URLPattern">URLPattern</a> <a href="javascript:;" class="aLightGray" title="URL校验">URL校验</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622367.html" class="aBlack" target="_blank" title="URLPattern 怎么做前端路由匹配：命名参数、URL 校验与兼容降级">URLPattern 怎么做前端路由匹配：命名参数、URL 校验与兼容降级</a> </dt> <dd class="cont2"> <span><i class="view"></i>185浏览</span> <span class="collectBtn user_collection" data-id="622367" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622345.html" class="img_box" title="JavaScript structuredClone 怎么复制表单状态：可克隆类型与 transfer 陷阱"> <img src="/uploads/20260826/1787727485-structuredclone-form-state.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript structuredClone 怎么复制表单状态：可克隆类型与 transfer 陷阱"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 9小时前 | <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> · <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="structuredClone">structuredClone</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622345.html" class="aBlack" target="_blank" title="JavaScript structuredClone 怎么复制表单状态：可克隆类型与 transfer 陷阱">JavaScript structuredClone 怎么复制表单状态：可克隆类型与 transfer 陷阱</a> </dt> <dd class="cont2"> <span><i class="view"></i>449浏览</span> <span class="collectBtn user_collection" data-id="622345" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622299.html" class="img_box" title="前端表单提交为什么会重复触发：按钮禁用、请求幂等与恢复时机"> <img src="/uploads/20260826/1787718462-duplicate-submit-timeline.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端表单提交为什么会重复触发：按钮禁用、请求幂等与恢复时机"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 11小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/540_new_0_1.html" class="aLightGray" title="HTTP">HTTP</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/39796_new_0_1.html" class="aLightGray" title="表单">表单</a> · <a href="/articletag/39991_new_0_1.html" 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> <a href="javascript:;" class="aLightGray" title="submit事件">submit事件</a> <a href="javascript:;" class="aLightGray" title="按钮禁用">按钮禁用</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622299.html" class="aBlack" target="_blank" title="前端表单提交为什么会重复触发：按钮禁用、请求幂等与恢复时机">前端表单提交为什么会重复触发：按钮禁用、请求幂等与恢复时机</a> </dt> <dd class="cont2"> <span><i class="view"></i>491浏览</span> <span class="collectBtn user_collection" data-id="622299" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622280.html" class="img_box" title="前端 import.meta.dirname 怎么替代路径拼接：Node.js ESM 文件定位、兼容边界与构建发布"> <img src="/uploads/20260826/1787714115-import-meta-compat-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 import.meta.dirname 怎么替代路径拼接：Node.js ESM 文件定位、兼容边界与构建发布"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 12小时前 | <a href="/articletag/2625_new_0_1.html" class="aLightGray" title="Node.js">Node.js</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/24945_new_0_1.html" class="aLightGray" title="esm">esm</a> · <a href="/articletag/40328_new_0_1.html" class="aLightGray" title="前端工程化">前端工程化</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="Node.js">Node.js</a> <a href="javascript:;" class="aLightGray" title="ESM">ESM</a> <a href="javascript:;" class="aLightGray" title="前端构建">前端构建</a> <a href="javascript:;" class="aLightGray" title="import.meta.dirname">import.meta.dirname</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622280.html" class="aBlack" target="_blank" title="前端 import.meta.dirname 怎么替代路径拼接：Node.js ESM 文件定位、兼容边界与构建发布">前端 import.meta.dirname 怎么替代路径拼接：Node.js ESM 文件定位、兼容边界与构建发布</a> </dt> <dd class="cont2"> <span><i class="view"></i>384浏览</span> <span class="collectBtn user_collection" data-id="622280" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622257.html" class="img_box" title="前端构建缓存为什么总命中旧文件：哈希命名、HTML入口与发布顺序"> <img src="/uploads/20260826/1787709706-frontend-cache-chain.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端构建缓存为什么总命中旧文件：哈希命名、HTML入口与发布顺序"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 14小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/322_new_0_1.html" class="aLightGray" title="缓存">缓存</a> · <a href="/articletag/631_new_0_1.html" class="aLightGray" title="构建工具">构建工具</a> · <a href="javascript:;" class="aLightGray" title="哈希文件名">哈希文件名</a> <a href="javascript:;" class="aLightGray" title="前端构建缓存">前端构建缓存</a> <a href="javascript:;" class="aLightGray" title="HTML入口">HTML入口</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622257.html" class="aBlack" target="_blank" title="前端构建缓存为什么总命中旧文件：哈希命名、HTML入口与发布顺序">前端构建缓存为什么总命中旧文件：哈希命名、HTML入口与发布顺序</a> </dt> <dd class="cont2"> <span><i class="view"></i>421浏览</span> <span class="collectBtn user_collection" data-id="622257" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622238.html" class="img_box" title="Web Animations API 如何中途反向播放：currentTime、playbackRate 与取消边界"> <img src="/uploads/20260826/1787705450-web-animations-cancel.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web Animations API 如何中途反向播放：currentTime、playbackRate 与取消边界"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 15小时前 | <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/41083_new_0_1.html" class="aLightGray" title="Web Animations API">Web Animations API</a> · <a href="/articletag/41084_new_0_1.html" class="aLightGray" title="浏览器动画">浏览器动画</a> · <a href="javascript:;" class="aLightGray" title="reverse">reverse</a> <a href="javascript:;" class="aLightGray" title="currentTime">currentTime</a> <a href="javascript:;" class="aLightGray" title="playbackRate">playbackRate</a> <a href="javascript:;" class="aLightGray" title="Web Animations API">Web Animations API</a> <a href="javascript:;" class="aLightGray" title="cancel">cancel</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622238.html" class="aBlack" target="_blank" title="Web Animations API 如何中途反向播放：currentTime、playbackRate 与取消边界">Web Animations API 如何中途反向播放：currentTime、playbackRate 与取消边界</a> </dt> <dd class="cont2"> <span><i class="view"></i>290浏览</span> <span class="collectBtn user_collection" data-id="622238" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/622214.html" class="img_box" title="CSS Masonry 瀑布流布局怎么控制列高差：网格策略、图片加载与无障碍顺序"> <img src="/uploads/20260826/1787701017-masonry-column-gap.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS Masonry 瀑布流布局怎么控制列高差：网格策略、图片加载与无障碍顺序"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 16小时前 | <a href="/articletag/161_new_0_1.html" class="aLightGray" title="布局">布局</a> · <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/861_new_0_1.html" class="aLightGray" title="性能">性能</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/40991_new_0_1.html" class="aLightGray" title="无障碍">无障碍</a> · <a href="javascript:;" class="aLightGray" title="图片布局">图片布局</a> <a href="javascript:;" class="aLightGray" title="瀑布流布局">瀑布流布局</a> <a href="javascript:;" class="aLightGray" title="grid-template-columns">grid-template-columns</a> <a href="javascript:;" class="aLightGray" title="CSS Masonry">CSS Masonry</a> <a href="javascript:;" class="aLightGray" title="reading-flow">reading-flow</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/622214.html" class="aBlack" target="_blank" title="CSS Masonry 瀑布流布局怎么控制列高差：网格策略、图片加载与无障碍顺序">CSS Masonry 瀑布流布局怎么控制列高差：网格策略、图片加载与无障碍顺序</a> </dt> <dd class="cont2"> <span><i class="view"></i>424浏览</span> <span class="collectBtn user_collection" data-id="622214" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13109.html" target="_blank" title="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" class="img_box"> <img src="/uploads/ai/20260616/ljg-skills-icon-8bbe1468e5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13109.html" class="aBlack" target="_blank" title="ljg-skills">ljg-skills</a></dt> <dd class="cont1 lineTwoOverflow"> ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。 </dd> <dd class="cont2">5290次使用</dd> </dl> </li> <li> <a href="/ai/13108.html" target="_blank" title="MELO音乐 - AI 音乐生成平台，支持多模态创作能力" class="img_box"> <img src="/uploads/ai/20260616/melo-icon-10bf590762.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MELO音乐 - AI 音乐生成平台，支持多模态创作能力" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13108.html" class="aBlack" target="_blank" title="MELO音乐">MELO音乐</a></dt> <dd class="cont1 lineTwoOverflow"> MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！ </dd> <dd class="cont2">4806次使用</dd> </dl> </li> <li> <a href="/ai/13107.html" target="_blank" title="UniScribe - AI 免费在线音视频转文字平台" class="img_box"> <img src="/uploads/ai/20260616/uniscribe-icon-3c88366a15.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="UniScribe - AI 免费在线音视频转文字平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13107.html" class="aBlack" target="_blank" title="UniScribe">UniScribe</a></dt> <dd class="cont1 lineTwoOverflow"> UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。 </dd> <dd class="cont2">4749次使用</dd> </dl> </li> <li> <a href="/ai/13106.html" target="_blank" title="剧云 - 免费 AI 智能中文剧本创作平台" class="img_box"> <img src="/uploads/ai/20260615/d36c7176-icon-2b0cd581ce.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="剧云 - 免费 AI 智能中文剧本创作平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13106.html" class="aBlack" target="_blank" title="剧云">剧云</a></dt> <dd class="cont1 lineTwoOverflow"> 剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。 </dd> <dd class="cont2">5016次使用</dd> </dl> </li> <li> <a href="/ai/13105.html" target="_blank" title="万象有声 - AI 一站式有声内容创作平台" class="img_box"> <img src="/uploads/ai/20260615/50267bac-icon-c146b001b5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="万象有声 - AI 一站式有声内容创作平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13105.html" class="aBlack" target="_blank" title="万象有声">万象有声</a></dt> <dd class="cont1 lineTwoOverflow"> 万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！ </dd> <dd class="cont2">4957次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/621422.html" class="aBlack" title="智能体安全引领产业升级——国内AI安全产品市场深度分析">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></dt> <dd> <span class="left">2026-08-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> <a href="/manual/go/" target="_blank" class="aBlack" title="手册">手册</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">湘ICP备19018815号-4</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//www.17golang.com/article/467472.html"/> <input type="hidden" name="__token__" value="12ec6cfc3982cdf948baa51bb71a44ca" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//www.17golang.com/article/467472.html"/> <input type="hidden" name="__token__" value="12ec6cfc3982cdf948baa51bb71a44ca" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <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> <script src="/assets/js/frontend/common.js"></script> </body> </html>