**Java程序员面试宝典:HTML核心考点精讲导读** 在Java后端开发的职业道路上,前端基础知识往往是面试官考察候选人全面性的“试金石”。本课程作为《Java程序员面试宝典》体系课的第18讲,聚焦于HTML的核心概念与高频面试题。虽然Java主攻服务端逻辑,但理解HTML、HTTP及浏览器工作原理,是构建全栈思维、高效排查前后端交互问题的必备基石。本文将为你梳理本课程的核心脉络,助你从原理到实战全面掌握HTML面试要点。 **一、 基础认知与语义化规范** 课程开篇首先厘清了URL、HTML与HTTP三大基石的作用关系:URL是资源的地址,HTTP是传输协议,而HTML则是承载内容的骨架。在实际编码规范中,讲师特别强调了属性值的书写灵活性——双引号、单引号甚至不加引号均符合标准,但为了代码的可读性与规范性,建议统一使用双引号。此外,编辑完HTML文件后,务必确保扩展名为`.html`,这是浏览器正确解析页面的前提。 语义化标签的选择是进阶关键。课程深入剖析了`title`与`h3`、`b`与`strong`、`i`与`em`之间的微妙区别,指出``和``不仅具有加粗或斜体的视觉效果,更承载着“强调”的语义信息,对SEO友好;而`

`标签用于段落划分,``、`<meta>`中的`description`和`keywords`则直接关联搜索引擎优化(SEO),这些元数据位于`<head>`中,不会在页面正文显示,却在幕后极大影响网页排名。 **二、 多媒体、链接与交互元素** 针对网页视觉与交互,课程详细讲解了`<img loading="lazy" decoding="async">`标签中`alt`与`title`属性的差异:`alt`主要用于图片加载失败时的替代文本及屏幕阅读器识别,而`title`则是鼠标悬停时的提示文本。同时,讲师演示了如何将图片作为超链接的子元素,以及如何利用`target`属性控制链接在何种窗口下打开(如_blank、_self等)。对于视频嵌入,课程提供了将第三方网站视频引入自身页面的编程技巧,拓展了多媒体集成的思路。 锚点(Anchor)的应用场景也是考察重点,它常用于页面内部跳转或跨页定位,提升长页面的导航体验。而在表单设计中,课程重点辨析了`<label>`标签的关联作用——通过`for`属性绑定`id`,不仅能提升点击区域的可访问性,更是无障碍浏览的重要实践。 **三、 表单处理与底层原理** 表单部分是面试的重灾区。课程系统对比了GET与POST请求的区别,从参数位置、安全性、缓存机制到数据长度限制,逐一拆解。在控件分组方面,明确指出了单选按钮(Radio)和复选框(Checkbox)通过相同的`name`属性实现分组互斥或多选逻辑,并归纳了“多选一”与“多选多”对应的表单域类型。 最后,课程升华至浏览器渲染原理,解析了浏览器页面的三层构成(结构层、表现层、行为层),介绍了DOCTYPE声明对严格模式与混杂模式的切换作用,以及浏览器内核(如WebKit、Blink)的基本概念。同时,清晰区分了`src`(引入资源,如图片、脚本)与`href`(建立引用关系,如超链接、样式表)的本质差异。 掌握这些知识点,不仅能助你从容应对Java后端面试中的HTML考题,更为日后理解前后端分离架构打下坚实基础。</section> <!--/wb-editorial--> <div class="wb-catalog" style="margin:20px 0;"><h3 style="margin:0 0 12px 0;">课程目录</h3><pre style="margin:0;padding:16px;border-radius:8px;font-size:13px;line-height:1.8;white-space:pre-wrap;word-wrap:break-word;">1 叙述 URL、HTML、HTTP 的作用 (02:10) 2 HTML 中,属性值用双引号、单引号、不加引号都可以。 (04:22) 3 使用文本编辑器编辑完 HTML 后,扩展名需要使用哪些 (01:53) 4 p标记的作用是 (01:42) 5 SEO 是什么 (01:14) 6 title、description、keywords 都跟 (01:59) 7 做一个如下效果,怎么做 (03:36) 8 head中的内容会在页面上显示吗 (01:04) 9 img标记中 alt 属性和 title 属性的区别 (02:53) 10 【编程题】将第三方法网站上的视频添加的自己的网页中 (03:19) 11 怎么使用图片作为超链接的子元素 (01:33) 12 锚点的作用是什么时候可能用到 (04:26) 13 【编程题】写出列表标签的示例代码 (01:52) 14 Frameset、frame iframe 有什么作用 (05:04) 15 Form表单的get 和 post,它们有什么区别没有设定 (06:03) 16 单选按钮和 复选框 是分组的,名字相同的分为一组对吗 (02:47) 17 多选一可以使用哪些表单域多选多可以使用哪些表单域默 (04:22) 18 浏览器页面有哪三层构成,分别是什么,作用是什么 (01:35) 19 octype作用严格模式与混杂模式如何区分 (02:51) 20 超链接target属性的取值和作用 (03:30) 21 介绍一下浏览器内核的理解 (02:12) 22 Label的作用是什么,是怎么用的 (06:56) 23 title与h3的区别、b与strong的区别、i与em的区 (05:58) 24 描述下src与href的区别 (03:54) 25 表单的基本组成部分有哪些,表单的主要用途是什么 (01:32)</pre></div></div><div class="mt-8 rounded-xl border border-primary/20 bg-primary/5 px-4 py-4 text-center md:hidden"><p class="text-sm font-medium text-foreground">本篇 ¥39.00 · 开通 VIP 更划算</p><a href="#purchase-panel" class="mt-2 inline-flex h-10 items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground">查看价格与购买</a></div></div></div><!--$?--><template id="B:2"></template><div class="mt-8 h-48 animate-pulse rounded-xl bg-muted/40" aria-hidden="true"></div><!--/$--></div><aside id="purchase-panel" class="flex scroll-mt-24 flex-col gap-4 lg:sticky lg:top-20 lg:self-start"><div data-slot="card" data-size="default" class="group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl shine-card shadow-md"><div data-slot="card-header" class="group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 pb-2"><p class="section-kicker mb-1">课程购买</p><div data-slot="card-title" class="font-heading group-data-[size=sm]/card:text-sm text-base font-bold text-foreground">价格与权益</div></div><div data-slot="card-content" class="px-4 group-data-[size=sm]/card:px-3 space-y-5"><div class="space-y-3"><div><p class="text-xs text-muted-foreground">课程价格</p><div class="mt-1 flex flex-wrap items-baseline gap-3"><span class="price-glow text-3xl font-bold tabular-nums text-primary">39<span class="ml-1 text-sm font-semibold">金币</span></span></div></div><div class="rounded-xl border border-primary/20 bg-primary/5 px-3 py-2.5"><p class="mb-2 text-sm font-medium text-foreground">会员价格</p><div class="space-y-2"><div class="flex items-center justify-between text-sm sm:text-base"><span class="text-muted-foreground">永久会员</span><div class="flex items-center gap-2"><span class="text-base font-bold tabular-nums text-primary">15.60 金币</span><span class="text-sm text-muted-foreground">(<!-- -->4折<!-- -->)</span></div></div><div class="flex items-center justify-between text-sm sm:text-base"><span class="text-muted-foreground">年会员</span><div class="flex items-center gap-2"><span class="text-base font-bold tabular-nums text-primary">19.50 金币</span><span class="text-sm text-muted-foreground">(<!-- -->5折<!-- -->)</span></div></div><div class="flex items-center justify-between text-sm sm:text-base"><span class="text-muted-foreground">月会员</span><div class="flex items-center gap-2"><span class="text-base font-bold tabular-nums text-primary">23.40 金币</span><span class="text-sm text-muted-foreground">(<!-- -->6折<!-- -->)</span></div></div><div class="flex items-center justify-between text-sm sm:text-base"><span class="text-muted-foreground">周会员</span><div class="flex items-center gap-2"><span class="text-base font-bold tabular-nums text-primary">27.30 金币</span><span class="text-sm text-muted-foreground">(<!-- -->7折<!-- -->)</span></div></div></div><p class="mt-2 text-[10px] text-muted-foreground">游客购买不打折</p></div></div><div class="rounded-xl border bg-muted/30 px-3 py-3 text-sm"><span class="font-semibold text-foreground">销量</span><span class="ml-2 text-xl font-bold tabular-nums text-primary">0</span></div><div class="rounded-xl border border-border/80 bg-background/50 px-3 py-2.5"><p class="text-xs font-medium text-foreground">会员下载</p><p class="mt-1 text-xs leading-relaxed text-muted-foreground">会员通道未开放本篇,请单独购买。</p></div><a class="flex items-center justify-center rounded-lg border border-primary/25 bg-primary/5 px-3 py-3 text-center text-sm font-medium text-primary transition-colors hover:bg-primary/10" href="/member">开通会员 · 按档位与额度下载 →</a><div class="space-y-5"><div class="space-y-3"><button type="button" data-disabled="" tabindex="0" disabled="" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [a]:hover:bg-primary/80 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-12 w-full gap-2 bg-[#1677FF] text-base text-white hover:bg-[#1677FF]/90"><svg viewBox="0 0 24 24" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"><path d="M21.422 15.358c-3.83-1.152-6.055-1.839-6.055-1.839.592-1.115.978-2.374 1.136-3.697H12.19V8.67h4.672V7.582H12.19V4.5H9.122v3.082H4.451V8.67h4.671v1.152H4.959v1.15h7.735a7.48 7.48 0 01-.762 2.156C10.158 12.25 7.46 11.5 5.39 11.5 3.016 11.5 1.5 12.599 1.5 14.29c0 1.763 1.697 2.938 4.305 2.938 2.285 0 4.338-1.144 5.652-2.87.898.434 5.692 2.696 6.509 3.082L21.5 16l-.078-.642z"></path></svg>加载中…</button><button type="button" data-disabled="" tabindex="0" disabled="" data-slot="button" class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [a]:hover:bg-primary/80 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-12 w-full gap-2 bg-[#07C160] text-base text-white hover:bg-[#07C160]/90"><svg viewBox="0 0 24 24" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"><path d="M11.929 2C6.412 2 2 6.033 2 10.985c0 2.818 1.505 5.303 3.822 6.92L4.9 21l4.345-2.237c.87.23 1.796.357 2.75.357.284 0 .565-.011.843-.034-.176-.546-.271-1.12-.271-1.715 0-3.985 3.578-7.233 8-7.233.26 0 .518.013.773.038C20.77 7.28 16.83 2 11.929 2zm-2.71 5.377a1.177 1.177 0 1 1 0 2.354 1.177 1.177 0 0 1 0-2.354zm5.42 0a1.177 1.177 0 1 1 0 2.354 1.177 1.177 0 0 1 0-2.354zM20 12.368c-3.866 0-7 2.657-7 5.933 0 3.277 3.134 5.933 7 5.933.936 0 1.82-.158 2.64-.443l3.36 1.209-1.08-2.99C22.852 20.766 24 19.11 24 17.3c0-3.276-1.8-4.932-4-4.932zm-2.139 4.756a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8zm4.139 0a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8z"></path></svg>加载中…</button></div></div></div></div></aside></div></main><div class="blog-mobile-bar fixed inset-x-0 bottom-[calc(3.25rem+env(safe-area-inset-bottom))] z-40 border-t border-violet-500/15 bg-white/95 px-4 py-2.5 shadow-[0_-8px_32px_-8px_rgba(0,0,0,0.12)] backdrop-blur-md md:hidden" aria-label="快速购买"><div class="mx-auto flex max-w-lg items-center gap-3"><div class="min-w-0 flex-1"><p class="truncate text-xs text-muted-foreground">Java程序员面试宝典视频课程之HTML(十八)</p><p class="text-lg font-bold tabular-nums text-primary">¥<!-- -->39.00</p></div><button type="button" tabindex="0" data-slot="button" class="group/button inline-flex items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground [a]:hover:bg-primary/80 gap-1 rounded-[min(var(--radius-md),12px)] text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 btn-shimmer btn-shimmer--tech h-10 shrink-0 px-5">立即购买</button><a class="shrink-0 text-xs font-medium text-violet-600 hover:underline" href="/pricing">开 VIP</a></div></div></div></div><footer class="site-footer relative mt-12 border-t border-violet-500/10 md:mt-16"><div class="site-header-glow pointer-events-none absolute inset-x-0 top-0 h-px opacity-60" aria-hidden="true"></div><div class="mx-auto max-w-7xl px-4 py-10 md:px-10 md:py-12"><div class="grid gap-8 md:grid-cols-[1.4fr_1fr_1fr] md:gap-12"><div><span class="site-logo group inline-flex items-center mb-1"><span class="site-logo-art relative inline-flex items-baseline font-[family-name:var(--font-heading)] text-[1.15rem]"><span class="site-logo-art-glow pointer-events-none absolute -inset-x-2 -inset-y-1 rounded-lg opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-100" aria-hidden="true"></span><span class="site-logo-char relative z-[1] font-extrabold tracking-tight site-logo-char--lead">飞</span><span class="site-logo-char relative z-[1] font-extrabold tracking-tight site-logo-char--mid">豹</span><span class="site-logo-char relative z-[1] font-extrabold site-logo-char--tail ml-0.5 text-[0.82em] tracking-[0.14em]">客</span></span></span><p class="mt-3 max-w-md text-sm leading-relaxed text-muted-foreground">高性价比 IT 教程平台 · 实战资源齐全 · 站长亲筛上架</p><div class="mt-4 inline-flex items-center gap-2 rounded-full border border-violet-500/12 bg-violet-500/5 px-3 py-1.5 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check size-3.5 text-violet-500" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>100% 含下载资源 · 失效补链 · MP4 直放</div></div><div><p class="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">快速导航</p><nav class="grid grid-cols-2 gap-2"><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/">首页</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/rankings">排行榜</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/pricing">会员套餐</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/member">个人中心</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/?featured=1#featured">精品教程</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/#store">教程商城</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/feed.xml">RSS 订阅</a></nav></div><div><p class="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">关于本站</p><nav class="grid grid-cols-2 gap-2 md:grid-cols-1"><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/about">关于飞豹客</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/contact">联系我们</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/privacy">隐私政策</a><a class="text-sm text-muted-foreground transition-colors hover:text-violet-700" href="/terms">用户协议</a></nav></div></div><div class="mt-8 flex flex-col items-center justify-between gap-2 border-t border-violet-500/8 pt-6 text-xs text-muted-foreground md:flex-row"><p>© <!-- -->2026<!-- --> <!-- -->飞豹客<!-- -->. All rights reserved.</p><a href="https://www.feibaoke.com" class="font-mono text-[11px] text-muted-foreground/70 transition-colors hover:text-violet-600">www.feibaoke.com</a></div></div></footer><nav class="site-mobile-nav fixed inset-x-0 bottom-0 z-50 border-t border-violet-500/10 bg-white/96 md:hidden" aria-label="移动端导航"><div class="mx-auto flex h-[3.25rem] max-w-lg items-stretch justify-around px-2 pb-[env(safe-area-inset-bottom)]"><a class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 text-[10px] font-medium transition-colors text-muted-foreground" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house size-[18px]" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>首页</a><a class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 text-[10px] font-medium transition-colors text-muted-foreground" href="/rankings"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-grid size-[18px]" aria-hidden="true"><rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect></svg>榜单</a><a class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 text-[10px] font-medium transition-colors text-muted-foreground" href="/pricing"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-crown size-[18px]" aria-hidden="true"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"></path><path d="M5 21h14"></path></svg>会员</a><a class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 text-[10px] font-medium transition-colors text-muted-foreground" href="/member"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user size-[18px]" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>我的</a></div></nav><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/0yb2wil16uz6h.js" id="_R_" async=""></script><div hidden id="S:0"><div class="header-search-shell relative transition-transform duration-300 ease-out hidden min-w-0 flex-1 md:block lg:max-w-md xl:max-w-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/70" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg><input type="search" placeholder="试试「Java 高薪」" aria-label="搜索课程" class="header-search-input w-full rounded-full border pl-9 pr-9 text-sm text-foreground outline-none transition-all duration-300 border-violet-500/12 bg-white/70 shadow-[0_2px_16px_-6px_rgba(99,102,241,0.12)] placeholder:text-muted-foreground/65 focus-visible:border-cyan-400/35 focus-visible:bg-white/95 focus-visible:shadow-[0_4px_24px_-6px_rgba(34,211,238,0.2)] focus-visible:ring-[3px] focus-visible:ring-cyan-400/10 h-10" value=""/></div></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script><div hidden id="S:1"><div class="header-search-shell relative transition-transform duration-300 ease-out"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/70" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg><input type="search" placeholder="试试「Java 高薪」" aria-label="搜索课程" class="header-search-input w-full rounded-full border pl-9 pr-9 text-sm text-foreground outline-none transition-all duration-300 border-violet-500/12 bg-white/70 shadow-[0_2px_16px_-6px_rgba(99,102,241,0.12)] placeholder:text-muted-foreground/65 focus-visible:border-cyan-400/35 focus-visible:bg-white/95 focus-visible:shadow-[0_4px_24px_-6px_rgba(34,211,238,0.2)] focus-visible:ring-[3px] focus-visible:ring-cyan-400/10 h-9" value=""/></div></div><script>$RC("B:1","S:1")</script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\"],\"default\"]\n4:I[22016,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"\"]\n6:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\"],\"OutletBoundary\"]\n9:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\"],\"ViewportBoundary\"]\nb:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\"],\"MetadataBoundary\"]\nd:I[68027,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/089vxvcdp92rm.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"46546\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"id\",\"46546\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/089vxvcdp92rm.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/01xlw8hd842-c.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0n4z.7yu76je-.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"zh-CN\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://gw.alipayobjects.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://gw.alipayobjects.com\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"title\":\"飞豹客 RSS\",\"href\":\"https://www.feibaoke.com/feed.xml\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@graph\\\":[{\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"飞豹客\\\",\\\"alternateName\\\":[\\\"feibaoke.com\\\",\\\"飞豹客 IT 教程\\\"],\\\"url\\\":\\\"https://www.feibaoke.com\\\",\\\"description\\\":\\\"飞豹客专注提供高品质 IT 技能提升课程,涵盖 Python、React、AI、大数据、前端开发、后端架构、小程序等热门领域。精选实战教程与资源,支持专题检索与会员下载,内容持续更新。\\\",\\\"inLanguage\\\":\\\"zh-CN\\\"},{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"飞豹客\\\",\\\"url\\\":\\\"https://www.feibaoke.com\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://www.feibaoke.com/org-logo.png\\\",\\\"width\\\":512,\\\"height\\\":512},\\\"image\\\":\\\"https://www.feibaoke.com/api/og?title=%E9%A3%9E%E8%B1%B9%E5%AE%A2+-+%E6%B5%B7%E9%87%8FIT%E7%BC%96%E7%A8%8B%E3%80%81AI%E3%80%81%E8%AE%BE%E8%AE%A1%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%BA%90+%7C+%E6%AF%8F%E6%97%A5%E6%9B%B4%E6%96%B0\\\",\\\"description\\\":\\\"飞豹客 提供海量 IT 教程、编程资源、技术文档与开发工具下载,覆盖前端、后端、移动开发、人工智能、大数据等全栈技术领域。\\\"}]}\"}}]]}],[\"$\",\"body\",null,{\"className\":\"min-h-screen font-sans antialiased\",\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"main\",null,{\"className\":\"mx-auto flex min-h-[60vh] max-w-xl flex-col justify-center px-4 py-16\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-muted-foreground\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"mt-2 text-3xl font-semibold\",\"children\":\"页面不存在\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm text-muted-foreground\",\"children\":\"你访问的地址没有对应内容,可能已被删除。\"}],[\"$\",\"$L4\",null,{\"href\":\"/\",\"className\":\"mt-6 text-sm underline\",\"children\":\"返回首页\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"script\",null,{\"src\":\"https://www.feibaoke.com/chat-embed.js\",\"data-site\":\"feibaoke\",\"data-exclude-paths\":\"/admin\",\"async\":true}]]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0gogvxblyxa9..js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0tdfxlippxeg6.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L6\",null,{\"children\":\"$@7\"}]]}],{},null,false,null]},null,false,\"$@8\"]},null,false,\"$@8\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}],[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$d\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/089vxvcdp92rm.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"cULn_ZFNRA4NL-PnLQr5g\"}\n"])</script><script>self.__next_f.push([1,"e:[]\n8:\"$We\"\na:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"f:I[62590,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"default\"]\n10:I[87668,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"SiteHeader\"]\n1c:I[27201,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\"],\"IconMark\"]\n"])</script><script>self.__next_f.push([1,"5:[[\"$\",\"div\",null,{\"className\":\"pb-[calc(3.25rem+env(safe-area-inset-bottom))] md:pb-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"art-shell min-h-screen pb-20 md:pb-0\",\"style\":{\"background\":\"var(--bg)\"},\"children\":[[\"$\",\"$Lf\",null,{\"event\":\"blog_detail_view\",\"extra\":{\"blogId\":46546,\"category\":\"体系课\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BlogPosting\\\",\\\"@id\\\":\\\"https://www.feibaoke.com/blog/46546#article\\\",\\\"url\\\":\\\"https://www.feibaoke.com/blog/46546\\\",\\\"headline\\\":\\\"Java程序员面试宝典视频课程之HTML(十八)\\\",\\\"description\\\":\\\"**Java程序员面试宝典:HTML核心考点精讲导读** 在Java后端开发的职业道路上,前端基础知识往往是面试官考察候选人全面性的“试金石”。本课程作为《Java程序员面试宝典》体系课的第18讲,聚焦于HTML的核心概念与高频面试题。虽然Java主攻服务端逻辑,但理解HTML、HTTP及浏览器工作原理,是构建全栈思维、高效排查前后端交互问题的必备基石。本文将为你梳理本课程的核心脉络,助你从原理…\\\",\\\"image\\\":[\\\"https://www.feibaoke.com/api/uploads/f741f072-5fd3-44a4-a528-a0ce04196f9a.jpg\\\"],\\\"datePublished\\\":\\\"2026-10-02T17:16:31.261Z\\\",\\\"dateModified\\\":\\\"2026-10-02T17:17:00.472Z\\\",\\\"articleSection\\\":\\\"体系课\\\",\\\"author\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"飞豹客\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"飞豹客\\\",\\\"url\\\":\\\"https://www.feibaoke.com\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://www.feibaoke.com/org-logo.png\\\",\\\"width\\\":512,\\\"height\\\":512}},\\\"inLanguage\\\":\\\"zh-CN\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"category\\\":\\\"Paid\\\",\\\"price\\\":39,\\\"priceCurrency\\\":\\\"CNY\\\",\\\"availability\\\":\\\"https://schema.org/InStock\\\",\\\"url\\\":\\\"https://www.feibaoke.com/blog/46546\\\"}}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"首页\\\",\\\"item\\\":\\\"https://www.feibaoke.com\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"体系课\\\",\\\"item\\\":\\\"https://www.feibaoke.com/topics/体系课\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Java程序员面试宝典视频课程之HTML(十八)\\\",\\\"item\\\":\\\"https://www.feibaoke.com/blog/46546\\\"}]}\"}}],[\"$\",\"$L10\",null,{}],[\"$\",\"main\",null,{\"className\":\"depth-stage mx-auto max-w-7xl px-5 py-8 md:px-10 md:py-10\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-8 lg:grid-cols-[1fr_320px]\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card\",\"data-size\":\"default\",\"className\":\"group/card flex flex-col gap-4 rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[\u003eimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl shine-card relative overflow-hidden shadow-md\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"group-data-[size=sm]/card:px-3 relative p-6 md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"hero-orb hero-orb-primary float-orb absolute -right-8 -top-8 h-28 w-28\"}],[\"$\",\"nav\",null,{\"className\":\"mb-5 flex flex-wrap items-center gap-1.5 border-b border-border/80 pb-4 text-xs text-muted-foreground md:text-sm\",\"aria-label\":\"面包屑导航\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"当前位置\"}],[\"$\",\"span\",null,{\"className\":\"text-border\",\"children\":\"/\"}],[\"$\",\"$L4\",null,{\"href\":\"/\",\"className\":\"text-primary hover:underline\",\"children\":\"首页\"}],[[\"$\",\"span\",null,{\"className\":\"text-border\",\"children\":\"/\"}],[\"$\",\"$L4\",null,{\"href\":\"/topics/体系课\",\"className\":\"text-primary hover:underline\",\"children\":\"体系课\"}],null],[\"$\",\"span\",null,{\"className\":\"text-border\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"正文\"}]]}],[\"$\",\"p\",null,{\"className\":\"section-kicker mb-2\",\"children\":[\"飞豹客\",\" · 教程详情\"]}],[\"$\",\"h1\",null,{\"className\":\"art-title text-2xl font-bold leading-snug md:text-3xl\",\"children\":\"Java程序员面试宝典视频课程之HTML(十八)\"}],null,[\"$\",\"div\",null,{\"className\":\"relative mt-5 aspect-video w-full overflow-hidden rounded-xl border bg-muted/30\",\"children\":\"$L11\"}],\"$L12\",\"$L13\",\"$L14\",\"$L15\",\"$L16\"]}]}],\"$L17\"]}],\"$L18\"]}]}],\"$L19\"]}]}],\"$L1a\",\"$L1b\"]\n"])</script><script>self.__next_f.push([1,"7:null\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"title\",\"0\",{\"children\":\"Java程序员面试宝典视频课程之HTML(十八) | 飞豹客\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"**Java程序员面试宝典:HTML核心考点精讲导读** 在Java后端开发的职业道路上,前端基础知识往往是面试官考察候选人全面性的“试金石”。本课程作为《Java程序员面试宝典》体系课的第18讲,聚焦于HTML的核心概念与高频面试题。虽然Java主攻服务端逻辑,但理解HTML、HTTP及浏览器工作原理,是构建全栈思…\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"飞豹客\"}],[\"$\",\"meta\",\"3\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"4\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"5\",{\"rel\":\"canonical\",\"href\":\"https://www.feibaoke.com/blog/46546\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Java程序员面试宝典视频课程之HTML(十八)\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"**Java程序员面试宝典:HTML核心考点精讲导读** 在Java后端开发的职业道路上,前端基础知识往往是面试官考察候选人全面性的“试金石”。本课程作为《Java程序员面试宝典》体系课的第18讲,聚焦于HTML的核心概念与高频面试题。虽然Java主攻服务端逻辑,但理解HTML、HTTP及浏览器工作原理,是构建全栈思…\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://www.feibaoke.com/blog/46546\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:locale\",\"content\":\"zh_CN\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"https://www.feibaoke.com/api/og?title=Java%E7%A8%8B%E5%BA%8F%E5%91%98%E9%9D%A2%E8%AF%95%E5%AE%9D%E5%85%B8%E8%A7%86%E9%A2%91%E8%AF%BE%E7%A8%8B%E4%B9%8BHTML%EF%BC%88%E5%8D%81%E5%85%AB%EF%BC%89\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:alt\",\"content\":\"Java程序员面试宝典视频课程之HTML(十八)\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://www.feibaoke.com/api/uploads/f741f072-5fd3-44a4-a528-a0ce04196f9a.jpg\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"Java程序员面试宝典视频课程之HTML(十八)\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:published_time\",\"content\":\"2026-10-02T17:16:31.261Z\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:modified_time\",\"content\":\"2026-10-02T17:17:00.472Z\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Java程序员面试宝典视频课程之HTML(十八)\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"**Java程序员面试宝典:HTML核心考点精讲导读** 在Java后端开发的职业道路上,前端基础知识往往是面试官考察候选人全面性的“试金石”。本课程作为《Java程序员面试宝典》体系课的第18讲,聚焦于HTML的核心概念与高频面试题。虽然Java主攻服务端逻辑,但理解HTML、HTTP及浏览器工作原理,是构建全栈思…\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://www.feibaoke.com/api/og?title=Java%E7%A8%8B%E5%BA%8F%E5%91%98%E9%9D%A2%E8%AF%95%E5%AE%9D%E5%85%B8%E8%A7%86%E9%A2%91%E8%AF%BE%E7%A8%8B%E4%B9%8BHTML%EF%BC%88%E5%8D%81%E5%85%AB%EF%BC%89\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://www.feibaoke.com/api/uploads/f741f072-5fd3-44a4-a528-a0ce04196f9a.jpg\"}],[\"$\",\"link\",\"22\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon.ico?v=20260820\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0lkexnl0dvtb4.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-32.png?v=20260820\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?v=20260820\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"$L1c\",\"26\",{}]]\n"])</script><script>self.__next_f.push([1,"1d:I[1251,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"default\"]\n1e:I[68602,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"default\"]\n1f:I[58541,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"default\"]\n20:\"$Sreact.suspense\"\n22:I[35228,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"BlogDetailPriceDisplay\"]\n23:I[69573,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"BlogDetailPayPanel\"]\n24:I[61967,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"default\"]\n26:I[60484,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0n4z.7yu76je-.js\",\"/_next/static/chunks/0gogvxblyxa9..js\",\"/_next/static/chunks/0dg3~tyzfx35e.js\",\"/_next/static/chunks/0tdfxlippxeg6.js\"],\"SiteMobileNav\"]\n11:[\"$\",\"$L1d\",null,{\"src\":\"/api/uploads/f741f072-5fd3-44a4-a528-a0ce04196f9a.jpg\",\"alt\":\"Java程序员面试宝典视频课程之HTML(十八)\",\"priority\":true,\"sizes\":\"(max-width: 1024px) 100vw, 65vw\",\"fallback\":\"/api/cover\"}]\n12:[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap items-center justify-between gap-3\",\"children\":[\"$\",\"$L1e\",null,{\"title\":\"Java程序员面试宝典视频课程之HTML(十八)\",\"url\":\"https://www.feibaoke.com/blog/46546\"}]}]\n13:[\"$\",\"div\",null,{\"className\":\"mt-3 flex flex-wrap gap-2\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"data-variant\":\"outline\",\"className\":\"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3! [a]:hover:bg-muted [a]:hover:text-muted-foreground border-primary/30 text-primary\",\"children\":\"体系课\"}]}]\n14:[\"$\",\"div\",null,{\"className\":\"mt-5 flex flex-wrap gap-2 border-b border-border/80 pb-5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"neo-chip inline-flex items-center gap-1.5 text-xs md:text-sm\",\"children\":[[\"$\",\"$L1f\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\",\"key\":\"1nclc0\"}],[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"3\",\"key\":\"1v7zrd\"}]],\"className\":\"lucide-eye size-3.5 text-primary\",\"aria-hidden\":true}],0,\" 人浏览\"]}],[\"$\",\"span\",null,{\"className\":\"neo-chip inline-flex items-center gap-1.5 text-xs md:text-sm\",\"children\":[[\"$\",\"$L1f\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M8 2v4\",\"key\":\"1cmpym\"}],[\"path\",{\"d\":\"M16 2v4\",\"key\":\"4m81vk\"}],[\"rect\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\",\"key\":\"1hopcy\"}],[\"path\",{\"d\":\"M3 10h18\",\"key\":\"8toen8\"}]],\"className\":\"lucide-calendar size-3.5 text-primary\",\"aria-hidden\":true}],\"发布 \",\"2026-10-02\"]}],[\"$\",\"span\",null,{\"className\":\"neo-chip inline-flex items-center gap-1.5 text-xs md:text-sm\",\"children\":[[\"$\",\"$L1f\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 6v6l4 2\",\"key\":\"mmk7yg\"}]],\"className\":\"lucide-clock size-3.5 text"])</script><script>self.__next_f.push([1,"-primary\",\"aria-hidden\":true}],\"更新 \",\"2026-10-02\"]}]]}]\n16:[\"$\",\"div\",null,{\"className\":\"mt-8 rounded-xl border border-primary/20 bg-primary/5 px-4 py-4 text-center md:hidden\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-medium text-foreground\",\"children\":\"本篇 ¥39.00 · 开通 VIP 更划算\"}],[\"$\",\"a\",null,{\"href\":\"#purchase-panel\",\"className\":\"mt-2 inline-flex h-10 items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground\",\"children\":\"查看价格与购买\"}]]}]\n17:[\"$\",\"$20\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"mt-8 h-48 animate-pulse rounded-xl bg-muted/40\",\"aria-hidden\":true}],\"children\":\"$L21\"}]\n"])</script><script>self.__next_f.push([1,"18:[\"$\",\"aside\",null,{\"id\":\"purchase-panel\",\"className\":\"flex scroll-mt-24 flex-col gap-4 lg:sticky lg:top-20 lg:self-start\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card\",\"data-size\":\"default\",\"className\":\"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[\u003eimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl shine-card shadow-md\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 pb-2\",\"children\":[[\"$\",\"p\",null,{\"className\":\"section-kicker mb-1\",\"children\":\"课程购买\"}],[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-heading group-data-[size=sm]/card:text-sm text-base font-bold text-foreground\",\"children\":\"价格与权益\"}]]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-4 group-data-[size=sm]/card:px-3 space-y-5\",\"children\":[[\"$\",\"$L22\",null,{\"coin\":39,\"plans\":[{\"type\":\"LIFETIME\",\"name\":\"永久会员\",\"discountRate\":0.4},{\"type\":\"YEARLY\",\"name\":\"年会员\",\"discountRate\":0.5},{\"type\":\"MONTHLY\",\"name\":\"月会员\",\"discountRate\":0.6},{\"type\":\"WEEKLY\",\"name\":\"周会员\",\"discountRate\":0.7}],\"memberFreeMonthly\":false,\"memberFreeYearly\":false,\"memberFreeLifetime\":false}],[\"$\",\"div\",null,{\"className\":\"rounded-xl border bg-muted/30 px-3 py-3 text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-semibold text-foreground\",\"children\":\"销量\"}],[\"$\",\"span\",null,{\"className\":\"ml-2 text-xl font-bold tabular-nums text-primary\",\"children\":0}]]}],[\"$\",\"div\",null,{\"className\":\"rounded-xl border border-border/80 bg-background/50 px-3 py-2.5\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-medium text-foreground\",\"children\":\"会员下载\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs leading-relaxed text-muted-foreground\",\"children\":\"会员通道未开放本篇,请单独购买。\"}],null]}],[\"$\",\"$L4\",null,{\"href\":\"/member\",\"className\":\"flex items-center justify-center rounded-lg border border-primary/25 bg-primary/5 px-3 py-3 text-center text-sm font-medium text-primary transition-colors hover:bg-primary/10\",\"children\":\"开通会员 · 按档位与额度下载 →\"}],[\"$\",\"$L23\",null,{\"blogId\":46546,\"coinAmount\":39,\"title\":\"Java程序员面试宝典视频课程之HTML(十八)\",\"hasDownUrl\":true,\"memberFreeMonthly\":false,\"memberFreeYearly\":false,\"memberFreeLifetime\":false,\"plans\":\"$18:props:children:props:children:1:props:children:0:props:plans\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"$L24\",null,{\"blogId\":46546,\"title\":\"Java程序员面试宝典视频课程之HTML(十八)\",\"coin\":39,\"isMemberFree\":false}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"footer\",null,{\"className\":\"site-footer relative mt-12 border-t border-violet-500/10 md:mt-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"site-header-glow pointer-events-none absolute inset-x-0 top-0 h-px opacity-60\",\"aria-hidden\":true}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 py-10 md:px-10 md:py-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid gap-8 md:grid-cols-[1.4fr_1fr_1fr] md:gap-12\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"site-logo group inline-flex items-center mb-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"site-logo-art relative inline-flex items-baseline font-[family-name:var(--font-heading)] text-[1.15rem]\",\"children\":[[\"$\",\"span\",null,{\"className\":\"site-logo-art-glow pointer-events-none absolute -inset-x-2 -inset-y-1 rounded-lg opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-100\",\"aria-hidden\":true}],[[\"$\",\"span\",\"飞-0\",{\"className\":\"site-logo-char relative z-[1] font-extrabold tracking-tight site-logo-char--lead\",\"children\":\"飞\"}],[\"$\",\"span\",\"豹-1\",{\"className\":\"site-logo-char relative z-[1] font-extrabold tracking-tight site-logo-char--mid\",\"children\":\"豹\"}],[\"$\",\"span\",\"客-2\",{\"className\":\"site-logo-char relative z-[1] font-extrabold site-logo-char--tail ml-0.5 text-[0.82em] tracking-[0.14em]\",\"children\":\"客\"}]]]}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 max-w-md text-sm leading-relaxed text-muted-foreground\",\"children\":\"高性价比 IT 教程平台 · 实战资源齐全 · 站长亲筛上架\"}],[\"$\",\"div\",null,{\"className\":\"mt-4 inline-flex items-center gap-2 rounded-full border border-violet-500/12 bg-violet-500/5 px-3 py-1.5 text-xs text-muted-foreground\",\"children\":[[\"$\",\"$L1f\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\",\"key\":\"oel41y\"}],[\"path\",{\"d\":\"m9 12 2 2 4-4\",\"key\":\"dzmm74\"}]],\"className\":\"lucide-shield-check size-3.5 text-violet-500\",\"aria-hidden\":true}],\"100% 含下载资源 · 失效补链 · MP4 直放\"]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground\",\"children\":\"快速导航\"}],[\"$\",\"nav\",null,{\"className\":\"grid grid-cols-2 gap-2\",\"children\":[[\"$\",\"$L4\",\"/\",{\"href\":\"/\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"首页\"}],[\"$\",\"$L4\",\"/rankings\",{\"href\":\"/rankings\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"排行榜\"}],[\"$\",\"$L4\",\"/pricing\",{\"href\":\"/pricing\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"会员套餐\"}],[\"$\",\"$L4\",\"/member\",{\"href\":\"/member\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"个人中心\"}],[\"$\",\"$L4\",\"/?featured=1#featured\",{\"href\":\"/?featured=1#featured\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"精品教程\"}],[\"$\",\"$L4\",\"/#store\",{\"href\":\"/#store\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"教程商城\"}],[\"$\",\"$L4\",\"/feed.xml\",{\"href\":\"/feed.xml\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"RSS 订阅\"}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground\",\"children\":\"关于本站\"}],[\"$\",\"nav\",null,{\"className\":\"grid grid-cols-2 gap-2 md:grid-cols-1\",\"children\":[[\"$\",\"$L4\",\"/about\",{\"href\":\"/about\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"关于飞豹客\"}],[\"$\",\"$L4\",\"/contact\",{\"href\":\"/contact\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"联系我们\"}],[\"$\",\"$L4\",\"/privacy\",{\"href\":\"/privacy\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"隐私政策\"}],[\"$\",\"$L4\",\"/terms\",{\"href\":\"/terms\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"用户协议\"}]]}]]}]]}],\"$L25\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"$L26\",null,{}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"div\",null,{\"className\":\"mt-8 flex flex-col items-center justify-between gap-2 border-t border-violet-500/8 pt-6 text-xs text-muted-foreground md:flex-row\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"© \",2026,\" \",\"飞豹客\",\". All rights reserved.\"]}],[\"$\",\"a\",null,{\"href\":\"https://www.feibaoke.com\",\"className\":\"font-mono text-[11px] text-muted-foreground/70 transition-colors hover:text-violet-600\",\"children\":\"www.feibaoke.com\"}]]}]\n27:T14ce,"])</script><script>self.__next_f.push([1,"\u003c!--wb-editorial--\u003e\n\u003csection class=\"wb-editorial\"\u003e**Java程序员面试宝典:HTML核心考点精讲导读**\n\n在Java后端开发的职业道路上,前端基础知识往往是面试官考察候选人全面性的“试金石”。本课程作为《Java程序员面试宝典》体系课的第18讲,聚焦于HTML的核心概念与高频面试题。虽然Java主攻服务端逻辑,但理解HTML、HTTP及浏览器工作原理,是构建全栈思维、高效排查前后端交互问题的必备基石。本文将为你梳理本课程的核心脉络,助你从原理到实战全面掌握HTML面试要点。\n\n**一、 基础认知与语义化规范**\n\n课程开篇首先厘清了URL、HTML与HTTP三大基石的作用关系:URL是资源的地址,HTTP是传输协议,而HTML则是承载内容的骨架。在实际编码规范中,讲师特别强调了属性值的书写灵活性——双引号、单引号甚至不加引号均符合标准,但为了代码的可读性与规范性,建议统一使用双引号。此外,编辑完HTML文件后,务必确保扩展名为`.html`,这是浏览器正确解析页面的前提。\n\n语义化标签的选择是进阶关键。课程深入剖析了`title`与`h3`、`b`与`strong`、`i`与`em`之间的微妙区别,指出`\u003cstrong\u003e`和`\u003cem\u003e`不仅具有加粗或斜体的视觉效果,更承载着“强调”的语义信息,对SEO友好;而`\u003cp\u003e`标签用于段落划分,`\u003ctitle\u003e`、`\u003cmeta\u003e`中的`description`和`keywords`则直接关联搜索引擎优化(SEO),这些元数据位于`\u003chead\u003e`中,不会在页面正文显示,却在幕后极大影响网页排名。\n\n**二、 多媒体、链接与交互元素**\n\n针对网页视觉与交互,课程详细讲解了`\u003cimg loading=\"lazy\" decoding=\"async\"\u003e`标签中`alt`与`title`属性的差异:`alt`主要用于图片加载失败时的替代文本及屏幕阅读器识别,而`title`则是鼠标悬停时的提示文本。同时,讲师演示了如何将图片作为超链接的子元素,以及如何利用`target`属性控制链接在何种窗口下打开(如_blank、_self等)。对于视频嵌入,课程提供了将第三方网站视频引入自身页面的编程技巧,拓展了多媒体集成的思路。\n\n锚点(Anchor)的应用场景也是考察重点,它常用于页面内部跳转或跨页定位,提升长页面的导航体验。而在表单设计中,课程重点辨析了`\u003clabel\u003e`标签的关联作用——通过`for`属性绑定`id`,不仅能提升点击区域的可访问性,更是无障碍浏览的重要实践。\n\n**三、 表单处理与底层原理**\n\n表单部分是面试的重灾区。课程系统对比了GET与POST请求的区别,从参数位置、安全性、缓存机制到数据长度限制,逐一拆解。在控件分组方面,明确指出了单选按钮(Radio)和复选框(Checkbox)通过相同的`name`属性实现分组互斥或多选逻辑,并归纳了“多选一”与“多选多”对应的表单域类型。\n\n最后,课程升华至浏览器渲染原理,解析了浏览器页面的三层构成(结构层、表现层、行为层),介绍了DOCTYPE声明对严格模式与混杂模式的切换作用,以及浏览器内核(如WebKit、Blink)的基本概念。同时,清晰区分了`src`(引入资源,如图片、脚本)与`href`(建立引用关系,如超链接、样式表)的本质差异。\n\n掌握这些知识点,不仅能助你从容应对Java后端面试中的HTML考题,更为日后理解前后端分离架构打下坚实基础。\u003c/section\u003e\n\u003c!--/wb-editorial--\u003e\n\u003cdiv class=\"wb-catalog\" style=\"margin:20px 0;\"\u003e\u003ch3 style=\"margin:0 0 12px 0;\"\u003e课程目录\u003c/h3\u003e\u003cpre style=\"margin:0;padding:16px;border-radius:8px;font-size:13px;line-height:1.8;white-space:pre-wrap;word-wrap:break-word;\"\u003e1 叙述 URL、HTML、HTTP 的作用 (02:10)\n2 HTML 中,属性值用双引号、单引号、不加引号都可以。 (04:22)\n3 使用文本编辑器编辑完 HTML 后,扩展名需要使用哪些 (01:53)\n4 p标记的作用是 (01:42)\n5 SEO 是什么 (01:14)\n6 title、description、keywords 都跟 (01:59)\n7 做一个如下效果,怎么做 (03:36)\n8 head中的内容会在页面上显示吗 (01:04)\n9 img标记中 alt 属性和 title 属性的区别 (02:53)\n10 【编程题】将第三方法网站上的视频添加的自己的网页中 (03:19)\n11 怎么使用图片作为超链接的子元素 (01:33)\n12 锚点的作用是什么时候可能用到 (04:26)\n13 【编程题】写出列表标签的示例代码 (01:52)\n14 Frameset、frame iframe 有什么作用 (05:04)\n15 Form表单的get 和 post,它们有什么区别没有设定 (06:03)\n16 单选按钮和 复选框 是分组的,名字相同的分为一组对吗 (02:47)\n17 多选一可以使用哪些表单域多选多可以使用哪些表单域默 (04:22)\n18 浏览器页面有哪三层构成,分别是什么,作用是什么 (01:35)\n19 octype作用严格模式与混杂模式如何区分 (02:51)\n20 超链接target属性的取值和作用 (03:30)\n21 介绍一下浏览器内核的理解 (02:12)\n22 Label的作用是什么,是怎么用的 (06:56)\n23 title与h3的区别、b与strong的区别、i与em的区 (05:58)\n24 描述下src与href的区别 (03:54)\n25 表单的基本组成部分有哪些,表单的主要用途是什么 (01:32)\u003c/pre\u003e\u003c/div\u003e"])</script><script>self.__next_f.push([1,"15:[\"$\",\"div\",null,{\"className\":\"article-body mt-6 max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$27\"}}]\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"data-size\":\"default\",\"className\":\"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[\u003eimg:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl shine-card mt-8 shadow-md\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-heading group-data-[size=sm]/card:text-sm art-title text-sm font-bold\",\"children\":\"相关推荐\"}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-4 group-data-[size=sm]/card:px-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 gap-3 sm:grid-cols-3\",\"children\":[[\"$\",\"$L4\",\"27111\",{\"href\":\"/blog/27111\",\"className\":\"tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative h-20 w-full overflow-hidden border-b\",\"children\":[\"$\",\"$L1d\",null,{\"src\":\"/api/uploads/06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg\",\"alt\":\"黑马程序员AI大模型开发2026线下版V7.5\",\"sizes\":\"160px\",\"fallback\":\"/api/cover\"}]}],[\"$\",\"div\",null,{\"className\":\"p-3\",\"children\":[[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm font-medium text-foreground\",\"children\":\"黑马程序员AI大模型开发2026线下版V7.5\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-muted-foreground\",\"children\":[\"¥\",\"95.00\",\" · \",4514,\" 浏览\"]}]]}]]}],[\"$\",\"$L4\",\"9130\",{\"href\":\"/blog/9130\",\"className\":\"tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative h-20 w-full overflow-hidden border-b\",\"children\":[\"$\",\"$L1d\",null,{\"src\":\"/api/cover?title=%E5%B0%8F%E6%BB%B4%E8%AF%BE%E5%A0%82%E6%96%B0%E4%B8%80%E4%BB%A3AI%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88-%E5%BE%AE%E6%9C%8D%E5%8A%A1AI%E6%99%BA%E8%83%BD%E9%9D%A2%E8%AF%95%E5%AF%B9%E8%AF%9D%E5%B9%B3%E5%8F%B0\",\"alt\":\"小滴课堂新一代AI全栈工程师-微服务AI智能面试对话平台\",\"sizes\":\"160px\",\"fallback\":\"/api/cover\"}]}],[\"$\",\"div\",null,{\"className\":\"p-3\",\"children\":[[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm font-medium text-foreground\",\"children\":\"小滴课堂新一代AI全栈工程师-微服务AI智能面试对话平台\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-muted-foreground\",\"children\":[\"¥\",\"76.00\",\" · \",5977,\" 浏览\"]}]]}]]}],[\"$\",\"$L4\",\"26600\",{\"href\":\"/blog/26600\",\"className\":\"tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative h-20 w-full overflow-hidden border-b\",\"children\":[\"$\",\"$L1d\",null,{\"src\":\"/api/uploads/7631eb53-e70d-4add-ae87-64621a91a465.jpg\",\"alt\":\"QCon 北京 2026 (4 月)\",\"sizes\":\"160px\",\"fallback\":\"/api/cover\"}]}],[\"$\",\"div\",null,{\"className\":\"p-3\",\"children\":[[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm font-medium text-foreground\",\"children\":\"QCon 北京 2026 (4 月)\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-muted-foreground\",\"children\":[\"¥\",\"10.00\",\" · \",2646,\" 浏览\"]}]]}]]}],[\"$\",\"$L4\",\"9194\",{\"href\":\"/blog/9194\",\"className\":\"tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative h-20 w-full overflow-hidden border-b\",\"children\":[\"$\",\"$L1d\",null,{\"src\":\"/api/uploads/1f6f4323-81be-4134-8434-e942174ef6a8.jpg\",\"alt\":\"AI+全能测试工程师\",\"sizes\":\"160px\",\"fallback\":\"/api/cover\"}]}],[\"$\",\"div\",null,{\"className\":\"p-3\",\"children\":[[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm font-medium text-foreground\",\"children\":\"AI+全能测试工程师\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-muted-foreground\",\"children\":[\"¥\",\"95.00\",\" · \",6669,\" 浏览\"]}]]}]]}],\"$L28\",\"$L29\"]}],\"$L2a\"]}]]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"$L4\",\"19708\",{\"href\":\"/blog/19708\",\"className\":\"tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative h-20 w-full overflow-hidden border-b\",\"children\":[\"$\",\"$L1d\",null,{\"src\":\"/api/uploads/b292844a-8895-46f1-abe3-f42945c70367.jpg\",\"alt\":\"小滴课堂中间件项目大课-自动化云测平台/Spingboot3.X/微服务/Kafka3.x\",\"sizes\":\"160px\",\"fallback\":\"/api/cover\"}]}],[\"$\",\"div\",null,{\"className\":\"p-3\",\"children\":[[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm font-medium text-foreground\",\"children\":\"小滴课堂中间件项目大课-自动化云测平台/Spingboot3.X/微服务/Kafka3.x\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-muted-foreground\",\"children\":[\"¥\",\"67.00\",\" · \",3810,\" 浏览\"]}]]}]]}]\n29:[\"$\",\"$L4\",\"26165\",{\"href\":\"/blog/26165\",\"className\":\"tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative h-20 w-full overflow-hidden border-b\",\"children\":[\"$\",\"$L1d\",null,{\"src\":\"/api/uploads/a03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg\",\"alt\":\"图灵工控一期:上位机+AI\",\"sizes\":\"160px\",\"fallback\":\"/api/cover\"}]}],[\"$\",\"div\",null,{\"className\":\"p-3\",\"children\":[[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm font-medium text-foreground\",\"children\":\"图灵工控一期:上位机+AI\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-muted-foreground\",\"children\":[\"¥\",\"38.00\",\" · \",2936,\" 浏览\"]}]]}]]}]\n2a:[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-x-4 gap-y-2 text-sm\",\"children\":[[\"$\",\"$L4\",null,{\"href\":\"/topics/体系课\",\"className\":\"font-medium text-primary hover:underline\",\"children\":[\"更多 \",\"体系课\",\" 教程 →\"]}],[\"$\",\"$L4\",null,{\"href\":\"/rankings\",\"className\":\"font-medium text-primary hover:underline\",\"children\":\"课程排行榜 →\"}]]}]\n"])</script><link rel="preload" as="image" href="/api/cover?title=%E5%B0%8F%E6%BB%B4%E8%AF%BE%E5%A0%82%E6%96%B0%E4%B8%80%E4%BB%A3AI%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88-%E5%BE%AE%E6%9C%8D%E5%8A%A1AI%E6%99%BA%E8%83%BD%E9%9D%A2%E8%AF%95%E5%AF%B9%E8%AF%9D%E5%B9%B3%E5%8F%B0" imageSizes="160px"/><div hidden id="S:2"><div data-slot="card" data-size="default" class="group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl shine-card mt-8 shadow-md"><div data-slot="card-header" class="group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3"><div data-slot="card-title" class="font-heading group-data-[size=sm]/card:text-sm art-title text-sm font-bold">相关推荐</div></div><div data-slot="card-content" class="px-4 group-data-[size=sm]/card:px-3"><div class="grid grid-cols-2 gap-3 sm:grid-cols-3"><a class="tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40" href="/blog/27111"><div class="relative h-20 w-full overflow-hidden border-b"><img alt="黑马程序员AI大模型开发2026线下版V7.5" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="160px" srcSet="/_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=16&q=75 16w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=32&q=75 32w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=48&q=75 48w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=64&q=75 64w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=96&q=75 96w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=128&q=75 128w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=256&q=75 256w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=384&q=75 384w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=640&q=75 640w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=750&q=75 750w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=828&q=75 828w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=1920&q=75 1920w" src="/_next/image?url=%2Fapi%2Fuploads%2F06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg&w=1920&q=75"/></div><div class="p-3"><p class="line-clamp-2 text-sm font-medium text-foreground">黑马程序员AI大模型开发2026线下版V7.5</p><p class="mt-1 text-xs text-muted-foreground">¥<!-- -->95.00<!-- --> · <!-- -->4514<!-- --> 浏览</p></div></a><a class="tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40" href="/blog/9130"><div class="relative h-20 w-full overflow-hidden border-b"><img src="/api/cover?title=%E5%B0%8F%E6%BB%B4%E8%AF%BE%E5%A0%82%E6%96%B0%E4%B8%80%E4%BB%A3AI%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88-%E5%BE%AE%E6%9C%8D%E5%8A%A1AI%E6%99%BA%E8%83%BD%E9%9D%A2%E8%AF%95%E5%AF%B9%E8%AF%9D%E5%B9%B3%E5%8F%B0" alt="小滴课堂新一代AI全栈工程师-微服务AI智能面试对话平台" sizes="160px" class="absolute inset-0 h-full w-full object-cover"/></div><div class="p-3"><p class="line-clamp-2 text-sm font-medium text-foreground">小滴课堂新一代AI全栈工程师-微服务AI智能面试对话平台</p><p class="mt-1 text-xs text-muted-foreground">¥<!-- -->76.00<!-- --> · <!-- -->5977<!-- --> 浏览</p></div></a><a class="tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40" href="/blog/26600"><div class="relative h-20 w-full overflow-hidden border-b"><img alt="QCon 北京 2026 (4 月)" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="160px" srcSet="/_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=16&q=75 16w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=32&q=75 32w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=48&q=75 48w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=64&q=75 64w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=96&q=75 96w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=128&q=75 128w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=256&q=75 256w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=384&q=75 384w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=640&q=75 640w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=750&q=75 750w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=828&q=75 828w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=1920&q=75 1920w" src="/_next/image?url=%2Fapi%2Fuploads%2F7631eb53-e70d-4add-ae87-64621a91a465.jpg&w=1920&q=75"/></div><div class="p-3"><p class="line-clamp-2 text-sm font-medium text-foreground">QCon 北京 2026 (4 月)</p><p class="mt-1 text-xs text-muted-foreground">¥<!-- -->10.00<!-- --> · <!-- -->2646<!-- --> 浏览</p></div></a><a class="tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40" href="/blog/9194"><div class="relative h-20 w-full overflow-hidden border-b"><img alt="AI+全能测试工程师" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="160px" srcSet="/_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=16&q=75 16w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=32&q=75 32w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=48&q=75 48w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=64&q=75 64w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=96&q=75 96w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=128&q=75 128w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=256&q=75 256w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=384&q=75 384w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=640&q=75 640w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=750&q=75 750w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=828&q=75 828w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=1920&q=75 1920w" src="/_next/image?url=%2Fapi%2Fuploads%2F1f6f4323-81be-4134-8434-e942174ef6a8.jpg&w=1920&q=75"/></div><div class="p-3"><p class="line-clamp-2 text-sm font-medium text-foreground">AI+全能测试工程师</p><p class="mt-1 text-xs text-muted-foreground">¥<!-- -->95.00<!-- --> · <!-- -->6669<!-- --> 浏览</p></div></a><a class="tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40" href="/blog/19708"><div class="relative h-20 w-full overflow-hidden border-b"><img alt="小滴课堂中间件项目大课-自动化云测平台/Spingboot3.X/微服务/Kafka3.x" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="160px" srcSet="/_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=16&q=75 16w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=32&q=75 32w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=48&q=75 48w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=64&q=75 64w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=96&q=75 96w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=128&q=75 128w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=256&q=75 256w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=384&q=75 384w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=640&q=75 640w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=750&q=75 750w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=828&q=75 828w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=1920&q=75 1920w" src="/_next/image?url=%2Fapi%2Fuploads%2Fb292844a-8895-46f1-abe3-f42945c70367.jpg&w=1920&q=75"/></div><div class="p-3"><p class="line-clamp-2 text-sm font-medium text-foreground">小滴课堂中间件项目大课-自动化云测平台/Spingboot3.X/微服务/Kafka3.x</p><p class="mt-1 text-xs text-muted-foreground">¥<!-- -->67.00<!-- --> · <!-- -->3810<!-- --> 浏览</p></div></a><a class="tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40" href="/blog/26165"><div class="relative h-20 w-full overflow-hidden border-b"><img alt="图灵工控一期:上位机+AI" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="160px" srcSet="/_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=16&q=75 16w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=32&q=75 32w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=48&q=75 48w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=64&q=75 64w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=96&q=75 96w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=128&q=75 128w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=256&q=75 256w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=384&q=75 384w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=640&q=75 640w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=750&q=75 750w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=828&q=75 828w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=1920&q=75 1920w" src="/_next/image?url=%2Fapi%2Fuploads%2Fa03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg&w=1920&q=75"/></div><div class="p-3"><p class="line-clamp-2 text-sm font-medium text-foreground">图灵工控一期:上位机+AI</p><p class="mt-1 text-xs text-muted-foreground">¥<!-- -->38.00<!-- --> · <!-- -->2936<!-- --> 浏览</p></div></a></div><div class="mt-4 flex flex-wrap gap-x-4 gap-y-2 text-sm"><a class="font-medium text-primary hover:underline" href="/topics/体系课">更多 <!-- -->体系课<!-- --> 教程 →</a><a class="font-medium text-primary hover:underline" href="/rankings">课程排行榜 →</a></div></div></div></div><script>$RC("B:2","S:2")</script></body></html>