`/`| `表格结构展示数据。此阶段开始涉及多媒体与用户输入，网页从静态走向动态。
**第三阶段（第9-10节）：规范与最佳实践**
补充``与``元数据配置、注释技巧和文档类型声明。虽然代码量不大，但这部分是专业与否的分水岭——规范的文档结构能让浏览器和搜索引擎更好地理解你的页面。
## 门槛与前置知识
课程设计为零门槛友好型。你只需要：
- 会使用电脑和基本文件操作
- 有任意文本编辑器（推荐VS Code或记事本）
- 有任意现代浏览器（Chrome、Edge、Firefox均可）
无需安装任何开发环境，无需编程经验。每节课的视频时长控制在3到22分钟之间，节奏轻快，避免因信息过载而产生畏难情绪。
## 资料包的使用方法
课程配套的10个视频文件按顺序编号。建议以"先看视频理解概念，再动手敲代码验证效果"为基本流程：
1. 创建项目文件夹，将视频文件放入其中
2. 每看完一节课，在文件夹内新建对应的`.html`文件
3. 照着视频中的示例代码逐字输入（不要复制粘贴），感受每个标签的实际效果
4. 在浏览器中打开`.html`文件查看渲染结果，尝试修改参数观察变化
例如看完`<img loading="lazy" decoding="async">`标签课程后，可尝试更改图片路径、调整宽度、添加或不添加`alt`属性，亲自体会每个属性的作用。这种"做中学"的方式比单纯观看更容易形成长期记忆。
## 学完产出
完成全部10节课后，你将能够：
- 独立编写结构完整、语义清晰的HTML页面
- 理解并正确使用10种以上核心HTML标签
- 掌握文档类型声明、头部元数据、注释等基本规范
- 为后续学习CSS布局和JavaScript交互做好充分准备
这套课程的价值不在于深度，而在于覆盖面广、节奏适中、即学即用。如果你希望快速建立对HTML5的整体认知，或者需要补齐前端开发的基础知识，这是一份不错的选择。</section>
<!--/wb-editorial-->
<div class="wb-catalog" style="margin:20px 0;"><h3 style="margin:0 0 12px 0;">课程目录</h3><div class="wb-catalog-tree-root"><details class="wb-tree-stage"><summary class="wb-tree-summary wb-tree-summary--stage"><span class="wb-tree-stage-name">课程目录</span><span class="wb-tree-badge">10 集</span></summary><div class="wb-tree-stage__body"><ul class="wb-tree-files"><li class="wb-tree-file">1 什么是网页？什么是HTML? (22:29).mp4</li><li class="wb-tree-file">2 、标签 (08:19).mp4</li><li class="wb-tree-file">3 、、</li><li class="wb-tree-file">标签 (07:22).mp4</li><li class="wb-tree-file">4 、 至 (05:00).mp4</li><li class="wb-tree-file">5 标签 (08:04).mp4</li><li class="wb-tree-file">6 标签 (05:05).mp4</li><li class="wb-tree-file">7 、和标签 (03:43).mp4</li><li class="wb-tree-file">8 、和标签 (03:56).mp4</li><li class="wb-tree-file">9 和标签 (02:49).mp4</li><li class="wb-tree-file">10 注释和定义文档类型 (05:12).mp4</li></ul></div></details></div></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:max-h-[calc(100dvh-5.5rem)] lg:self-start lg:overflow-y-auto"><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-0"><div class="flex items-baseline justify-between gap-3"><div data-slot="card-title" class="font-heading group-data-[size=sm]/card:text-sm text-base font-semibold text-foreground">购买本课</div><p class="text-xs tabular-nums text-muted-foreground">销量 <!-- -->0</p></div></div><div data-slot="card-content" class="px-4 group-data-[size=sm]/card:px-3 space-y-3"><div><p class="text-[11px] tracking-wide text-muted-foreground">课程价格</p><div class="mt-1 flex flex-wrap items-baseline gap-2"><span class="text-[2rem] font-semibold leading-none tracking-tight tabular-nums text-foreground">39</span><span class="text-xs font-medium text-muted-foreground">金币</span></div></div><div class="space-y-3"><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 border border-transparent bg-clip-padding 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 gap-1.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-10 w-full justify-between rounded-lg bg-[#1677FF] px-3.5 text-sm font-medium text-white hover:bg-[#1677FF]/90"><span class="inline-flex items-center gap-2"><svg viewBox="0 0 24 24" fill="currentColor" class="size-4 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>支付宝</span><span class="tabular-nums">¥39.00</span></button><button type="button" data-disabled="" tabindex="0" disabled="" data-slot="button" class="group/button inline-flex shrink-0 items-center border border-transparent bg-clip-padding 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 gap-1.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-10 w-full justify-between rounded-lg bg-[#07C160] px-3.5 text-sm font-medium text-white hover:bg-[#07C160]/90"><span class="inline-flex items-center gap-2"><svg viewBox="0 0 24 24" fill="currentColor" class="size-4 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>微信</span><span class="tabular-nums">¥39.00</span></button></div></div><div class="rounded-lg border border-border/70 bg-muted/25 px-3 py-3"><p class="mb-2.5 text-[11px] font-medium tracking-wide text-muted-foreground">会员价 · 金币</p><div class="space-y-3"><div class="space-y-1.5"><p class="text-[11px] font-medium tracking-wide text-muted-foreground">会员 A</p><div class="space-y-1.5"><div class="grid grid-cols-[4.5rem_1fr_2.25rem] items-baseline gap-2 text-[13px]"><span class="text-muted-foreground">永久</span><span class="text-right font-semibold tabular-nums text-foreground">15.60</span><span class="text-right text-[11px] text-emerald-700">4折</span></div><div class="grid grid-cols-[4.5rem_1fr_2.25rem] items-baseline gap-2 text-[13px]"><span class="text-muted-foreground">年</span><span class="text-right font-semibold tabular-nums text-foreground">19.50</span><span class="text-right text-[11px] text-emerald-700">5折</span></div><div class="grid grid-cols-[4.5rem_1fr_2.25rem] items-baseline gap-2 text-[13px]"><span class="text-muted-foreground">月</span><span class="text-right font-semibold tabular-nums text-foreground">23.40</span><span class="text-right text-[11px] text-emerald-700">6折</span></div><div class="grid grid-cols-[4.5rem_1fr_2.25rem] items-baseline gap-2 text-[13px]"><span class="text-muted-foreground">周</span><span class="text-right font-semibold tabular-nums text-foreground">27.30</span><span class="text-right text-[11px] text-emerald-700">7折</span></div></div></div><div class="h-px bg-border/80"></div><div class="space-y-1.5"><p class="text-[11px] font-medium tracking-wide text-muted-foreground">会员 B</p><div class="grid grid-cols-[4.5rem_1fr_2.25rem] items-baseline gap-2 text-[13px]"><span class="text-muted-foreground">VIP</span><span class="text-right font-semibold tabular-nums text-foreground">7.80</span><span class="text-right text-[11px] text-emerald-700">低至</span></div><div class="grid grid-cols-[4.5rem_1fr_2.25rem] items-baseline gap-2 text-[13px]"><span class="text-muted-foreground">SVIP</span><span class="text-right font-semibold text-emerald-700">5天1门</span><span></span></div></div></div><p class="mt-2.5 text-[11px] leading-relaxed text-muted-foreground">游客按标价购买，不享受上表折扣。</p></div><a class="inline-flex text-[13px] font-medium text-primary hover:underline" href="/member">开通会员，按档位下载</a></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">超实用的HTML5基础视频课程</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">飞豹客<!-- -->（<!-- -->feibaoke.com<!-- -->）是 IT 编程、AI、设计课程资源站，教程可以在线看，也可以下载。</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="/news">课程资讯</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 class="mt-4 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground md:justify-start"><span class="text-muted-foreground/80">友情链接</span><a href="https://www.guisuke.com/" rel="noopener noreferrer" target="_blank" class="transition-colors hover:text-violet-700">2026课程清单</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="/"><span class="relative inline-flex"><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></span>首页</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"><span class="relative inline-flex"><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></span>榜单</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="/news"><span class="relative inline-flex"><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-newspaper size-[18px]" aria-hidden="true"><path d="M15 18h-5"></path><path d="M18 14h-8"></path><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"></path><rect width="8" height="4" x="10" y="6" rx="1"></rect></svg></span>资讯</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"><span class="relative inline-flex"><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></span>会员</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"><span class="relative inline-flex"><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></span>我的</a></div></nav><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/0ugg6p-reozoo.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[4880944,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"default\"]\n3:I[7339756,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"default\"]\n4:I[8837457,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"default\"]\n5:I[4522016,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"\"]\n7:I[3897367,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"OutletBoundary\"]\na:I[3897367,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"ViewportBoundary\"]\nc:I[3897367,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"MetadataBoundary\"]\ne:I[4168027,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0yqj3o~9nxg0u.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"45515\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"id\",\"45515\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0yqj3o~9nxg0u.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/08jlngmhi2kch.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0q30rjhmp-mu1.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\\\",\\\"@id\\\":\\\"https://www.feibaoke.com/#website\\\",\\\"name\\\":\\\"飞豹客\\\",\\\"alternateName\\\":[\\\"feibaoke.com\\\",\\\"www.feibaoke.com\\\",\\\"飞豹客官网\\\"],\\\"url\\\":\\\"https://www.feibaoke.com\\\",\\\"description\\\":\\\"飞豹客（feibaoke.com）是 IT 编程、AI、设计课程资源站，教程可以在线看，也可以下载。覆盖 Python、前端、后端、大数据与小程序，内容持续更新。\\\",\\\"inLanguage\\\":\\\"zh-CN\\\",\\\"publisher\\\":{\\\"@id\\\":\\\"https://www.feibaoke.com/#organization\\\"}},{\\\"@type\\\":\\\"Organization\\\",\\\"@id\\\":\\\"https://www.feibaoke.com/#organization\\\",\\\"name\\\":\\\"飞豹客\\\",\\\"alternateName\\\":[\\\"feibaoke.com\\\",\\\"飞豹客官网\\\"],\\\"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\\\":\\\"飞豹客（feibaoke.com）是 IT 编程、AI、设计课程资源站，教程可以在线看，也可以下载。\\\"}]}\"}}]]}],[\"$\",\"body\",null,{\"className\":\"min-h-screen font-sans antialiased\",\"children\":[null,[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",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\":\"你访问的地址没有对应内容，可能已被删除。\"}],[\"$\",\"$L5\",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,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0m6-swv.0hpzx.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L7\",null,{\"children\":\"$@8\"}]]}],{},null,false,null]},null,false,\"$@9\"]},null,false,\"$@9\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$e\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0yqj3o~9nxg0u.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"ToT4waYWle51-f01KMpZs\"}\n"])</script><script>self.__next_f.push([1,"f:[]\n9:\"$Wf\"\nb:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"10:I[3662590,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"default\"]\n11:I[4587668,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"SiteHeader\"]\n12:I[3601251,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"default\"]\n1d:I[5027201,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\"],\"IconMark\"]\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"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\":[[\"$\",\"$L10\",null,{\"event\":\"blog_detail_view\",\"extra\":{\"blogId\":45515,\"category\":\"体系课\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Course\\\",\\\"@id\\\":\\\"https://www.feibaoke.com/blog/45515#course\\\",\\\"url\\\":\\\"https://www.feibaoke.com/blog/45515\\\",\\\"name\\\":\\\"超实用的HTML5基础视频课程\\\",\\\"description\\\":\\\"# 超实用的HTML5基础视频课程导读 本课程是一套针对零基础的体系化HTML5入门教学，共10节视频课，时长总计约1.5小时。课程定位明确——不求深入，但求扎实。学完后，你将能够独立编写结构规范的简单网页，并为后续学习CSS样式和JavaScript交互打下坚实基础。 ## 课程逻辑与学习顺序 课程按照\\\\\\\"认知→结构→内容→交互→规范\\\\\\\"的递进逻辑编排： **第一阶段（第1-4节）：建立认知与基础…\\\",\\\"image\\\":[\\\"https://www.feibaoke.com/api/uploads/7f88daf4-981a-4098-864f-be91ad9f3c66.jpg\\\"],\\\"about\\\":[{\\\"@type\\\":\\\"Thing\\\",\\\"name\\\":\\\"体系课\\\"}],\\\"provider\\\":{\\\"@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/45515\\\"}}\"}}],[\"$\",\"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\\\":\\\"超实用的HTML5基础视频课程\\\",\\\"item\\\":\\\"https://www.feibaoke.com/blog/45515\\\"}]}\"}}],[\"$\",\"$L11\",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\":\"/\"}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"text-primary hover:underline\",\"children\":\"首页\"}],[[\"$\",\"span\",null,{\"className\":\"text-border\",\"children\":\"/\"}],[\"$\",\"$L5\",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\":\"超实用的HTML5基础视频课程\"}],null,[\"$\",\"div\",null,{\"className\":\"relative mt-5 aspect-video w-full overflow-hidden rounded-xl border bg-muted/30\",\"children\":[\"$\",\"$L12\",null,{\"src\":\"/api/uploads/7f88daf4-981a-4098-864f-be91ad9f3c66.jpg\",\"alt\":\"超实用的HTML5基础视频课程\",\"priority\":true,\"sizes\":\"(max-width: 1024px) 100vw, 65vw\",\"fallback\":\"/images/default-leopard-cover.png\"}]}],\"$L13\",\"$L14\",\"$L15\",\"$L16\",\"$L17\"]}]}],\"$L18\"]}],\"$L19\"]}]}],\"$L1a\"]}]}],\"$L1b\",\"$L1c\"]\n"])</script><script>self.__next_f.push([1,"8:null\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"title\",\"0\",{\"children\":\"超实用的HTML5基础视频课程 | 飞豹客\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"# 超实用的HTML5基础视频课程导读 本课程是一套针对零基础的体系化HTML5入门教学，共10节视频课，时长总计约1.5小时。课程定位明确——不求深入，但求扎实。学完后，你将能够独立编写结构规范的简单网页，并为后续学习CSS样式和JavaScript交互打下坚实基础。 ## 课程逻辑与学习顺序 课程按照\\\"认知→结构…\"}],[\"$\",\"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/45515\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"超实用的HTML5基础视频课程\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"# 超实用的HTML5基础视频课程导读 本课程是一套针对零基础的体系化HTML5入门教学，共10节视频课，时长总计约1.5小时。课程定位明确——不求深入，但求扎实。学完后，你将能够独立编写结构规范的简单网页，并为后续学习CSS样式和JavaScript交互打下坚实基础。 ## 课程逻辑与学习顺序 课程按照\\\"认知→结构…\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://www.feibaoke.com/blog/45515\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:locale\",\"content\":\"zh_CN\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"https://www.feibaoke.com/api/og?title=%E8%B6%85%E5%AE%9E%E7%94%A8%E7%9A%84HTML5%E5%9F%BA%E7%A1%80%E8%A7%86%E9%A2%91%E8%AF%BE%E7%A8%8B\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:alt\",\"content\":\"超实用的HTML5基础视频课程\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://www.feibaoke.com/api/uploads/7f88daf4-981a-4098-864f-be91ad9f3c66.jpg\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"超实用的HTML5基础视频课程\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:published_time\",\"content\":\"2026-10-02T16:38:20.073Z\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:modified_time\",\"content\":\"2026-10-21T10:23:55.000Z\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"超实用的HTML5基础视频课程\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"# 超实用的HTML5基础视频课程导读 本课程是一套针对零基础的体系化HTML5入门教学，共10节视频课，时长总计约1.5小时。课程定位明确——不求深入，但求扎实。学完后，你将能够独立编写结构规范的简单网页，并为后续学习CSS样式和JavaScript交互打下坚实基础。 ## 课程逻辑与学习顺序 课程按照\\\"认知→结构…\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://www.feibaoke.com/api/og?title=%E8%B6%85%E5%AE%9E%E7%94%A8%E7%9A%84HTML5%E5%9F%BA%E7%A1%80%E8%A7%86%E9%A2%91%E8%AF%BE%E7%A8%8B\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://www.feibaoke.com/api/uploads/7f88daf4-981a-4098-864f-be91ad9f3c66.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\"}],[\"$\",\"$L1d\",\"26\",{}]]\n"])</script><script>self.__next_f.push([1,"1e:I[9068602,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"default\"]\n1f:I[9258541,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"default\"]\n20:\"$Sreact.suspense\"\n22:I[4735228,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"BlogDetailPriceDisplay\"]\n23:I[5469573,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"BlogDetailPayPanel\"]\n24:I[9961967,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"default\"]\n28:I[8060484,[\"/_next/static/chunks/08jlngmhi2kch.js\",\"/_next/static/chunks/0q30rjhmp-mu1.js\",\"/_next/static/chunks/0-lpf~u8nbgob.js\",\"/_next/static/chunks/0m6-swv.0hpzx.js\"],\"SiteMobileNav\"]\n13:[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap items-center justify-between gap-3\",\"children\":[\"$\",\"$L1e\",null,{\"title\":\"超实用的HTML5基础视频课程\",\"url\":\"https://www.feibaoke.com/blog/45515\"}]}]\n14:[\"$\",\"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\":\"体系课\"}]}]\n15:[\"$\",\"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}],1,\" 人浏览\"]}],[\"$\",\"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-primary\",\"aria-hidden\":true}],\"更新 \",\"2026-10-21\"]}]]}]\n17:[\"$\",\"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\":\"查看价格与购买\"}]]}]\n18:[\"$\",\"$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,"19:[\"$\",\"aside\",null,{\"id\":\"purchase-panel\",\"className\":\"flex scroll-mt-24 flex-col gap-4 lg:sticky lg:top-20 lg:max-h-[calc(100dvh-5.5rem)] lg:self-start lg:overflow-y-auto\",\"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-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-baseline justify-between gap-3\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-heading group-data-[size=sm]/card:text-sm text-base font-semibold text-foreground\",\"children\":\"购买本课\"}],[\"$\",\"p\",null,{\"className\":\"text-xs tabular-nums text-muted-foreground\",\"children\":[\"销量 \",0]}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-4 group-data-[size=sm]/card:px-3 space-y-3\",\"children\":[[\"$\",\"$L22\",null,{\"part\":\"headline\",\"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},{\"type\":\"SVIP1_3M\",\"name\":\"SVIP1 · 三个月\",\"discountRate\":null},{\"type\":\"SVIP2_3M\",\"name\":\"SVIP2 · 三个月\",\"discountRate\":null},{\"type\":\"SVIP3_3M\",\"name\":\"SVIP3 · 三个月\",\"discountRate\":null},{\"type\":\"SVIP1_6M\",\"name\":\"SVIP1 · 半年\",\"discountRate\":null},{\"type\":\"SVIP2_6M\",\"name\":\"SVIP2 · 半年\",\"discountRate\":null},{\"type\":\"SVIP3_6M\",\"name\":\"SVIP3 · 半年\",\"discountRate\":null},{\"type\":\"SVIP1_1Y\",\"name\":\"SVIP1 · 一年\",\"discountRate\":null},{\"type\":\"SVIP2_1Y\",\"name\":\"SVIP2 · 一年\",\"discountRate\":null},{\"type\":\"SVIP3_1Y\",\"name\":\"SVIP3 · 一年\",\"discountRate\":null},{\"type\":\"SVIP1_3Y\",\"name\":\"SVIP1 · 三年\",\"discountRate\":null},{\"type\":\"SVIP2_3Y\",\"name\":\"SVIP2 · 三年\",\"discountRate\":null},{\"type\":\"SVIP3_3Y\",\"name\":\"SVIP3 · 三年\",\"discountRate\":null},{\"type\":\"SVIP1_LIFE\",\"name\":\"SVIP1 · 永久\",\"discountRate\":null},{\"type\":\"SVIP2_LIFE\",\"name\":\"SVIP2 · 永久\",\"discountRate\":null},{\"type\":\"SVIP3_LIFE\",\"name\":\"SVIP3 · 永久\",\"discountRate\":null},{\"type\":\"VIP0_1Y\",\"name\":\"VIP0 · 一年\",\"discountRate\":0.7},{\"type\":\"VIP1_1Y\",\"name\":\"VIP1 · 一年\",\"discountRate\":0.6},{\"type\":\"VIP2_1Y\",\"name\":\"VIP2 · 一年\",\"discountRate\":0.5},{\"type\":\"VIP2_3M\",\"name\":\"VIP2 · 三个月\",\"discountRate\":0.5},{\"type\":\"VIP3_1Y\",\"name\":\"VIP3 · 一年\",\"discountRate\":0.4},{\"type\":\"VIP4_1Y\",\"name\":\"VIP4 · 一年\",\"discountRate\":0.3},{\"type\":\"VIP5_1Y\",\"name\":\"VIP5 · 一年\",\"discountRate\":0.2},{\"type\":\"VIP0_LIFE\",\"name\":\"VIP0 · 永久\",\"discountRate\":0.7},{\"type\":\"VIP1_LIFE\",\"name\":\"VIP1 · 永久\",\"discountRate\":0.6},{\"type\":\"VIP2_LIFE\",\"name\":\"VIP2 · 永久\",\"discountRate\":0.5},{\"type\":\"VIP3_LIFE\",\"name\":\"VIP3 · 永久\",\"discountRate\":0.4},{\"type\":\"VIP4_LIFE\",\"name\":\"VIP4 · 永久\",\"discountRate\":0.3},{\"type\":\"VIP5_LIFE\",\"name\":\"VIP5 · 永久\",\"discountRate\":0.2}],\"memberFreeMonthly\":false,\"memberFreeYearly\":false,\"memberFreeLifetime\":false}],[\"$\",\"$L23\",null,{\"blogId\":45515,\"coinAmount\":39,\"title\":\"超实用的HTML5基础视频课程\",\"hasDownUrl\":true,\"markedFree\":false,\"listPrice\":39,\"memberFreeMonthly\":false,\"memberFreeYearly\":false,\"memberFreeLifetime\":false,\"plans\":\"$19:props:children:props:children:1:props:children:0:props:plans\"}],[\"$\",\"$L22\",null,{\"part\":\"breakdown\",\"coin\":39,\"plans\":\"$19:props:children:props:children:1:props:children:0:props:plans\",\"memberFreeMonthly\":false,\"memberFreeYearly\":false,\"memberFreeLifetime\":false}],null,[\"$\",\"$L5\",null,{\"href\":\"/member\",\"className\":\"inline-flex text-[13px] font-medium text-primary hover:underline\",\"children\":\"开通会员，按档位下载\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"$L24\",null,{\"blogId\":45515,\"title\":\"超实用的HTML5基础视频课程\",\"coin\":39,\"isMemberFree\":false}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"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\":[\"飞豹客\",\"（\",\"feibaoke.com\",\"）是 IT 编程、AI、设计课程资源站，教程可以在线看，也可以下载。\"]}],[\"$\",\"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\":[[\"$\",\"$L5\",\"/\",{\"href\":\"/\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"首页\"}],[\"$\",\"$L5\",\"/rankings\",{\"href\":\"/rankings\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"排行榜\"}],[\"$\",\"$L5\",\"/news\",{\"href\":\"/news\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"课程资讯\"}],[\"$\",\"$L5\",\"/pricing\",{\"href\":\"/pricing\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"会员套餐\"}],[\"$\",\"$L5\",\"/member\",{\"href\":\"/member\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"个人中心\"}],[\"$\",\"$L5\",\"/?featured=1#featured\",{\"href\":\"/?featured=1#featured\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"精品教程\"}],[\"$\",\"$L5\",\"/#store\",{\"href\":\"/#store\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"教程商城\"}],[\"$\",\"$L5\",\"/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\":[[\"$\",\"$L5\",\"/about\",{\"href\":\"/about\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"关于飞豹客\"}],[\"$\",\"$L5\",\"/contact\",{\"href\":\"/contact\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"联系我们\"}],[\"$\",\"$L5\",\"/privacy\",{\"href\":\"/privacy\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"隐私政策\"}],\"$L25\"]}]]}]]}],\"$L26\",\"$L27\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"$L28\",null,{}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"$L5\",\"/terms\",{\"href\":\"/terms\",\"className\":\"text-sm text-muted-foreground transition-colors hover:text-violet-700\",\"children\":\"用户协议\"}]\n26:[\"$\",\"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:[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground md:justify-start\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground/80\",\"children\":\"友情链接\"}],[[\"$\",\"a\",\"https://www.guisuke.com/\",{\"href\":\"https://www.guisuke.com/\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"className\":\"transition-colors hover:text-violet-700\",\"children\":\"2026课程清单\"}]]]}]\n29:T10fe,"])</script><script>self.__next_f.push([1,"\u003c!--wb-editorial--\u003e\n\u003csection class=\"wb-editorial\"\u003e# 超实用的HTML5基础视频课程导读\n\n本课程是一套针对零基础的体系化HTML5入门教学，共10节视频课，时长总计约1.5小时。课程定位明确——不求深入，但求扎实。学完后，你将能够独立编写结构规范的简单网页，并为后续学习CSS样式和JavaScript交互打下坚实基础。\n\n## 课程逻辑与学习顺序\n\n课程按照\"认知→结构→内容→交互→规范\"的递进逻辑编排：\n\n**第一阶段（第1-4节）：建立认知与基础结构**\n先从\"什么是网页、什么是HTML\"的概念讲起，理解HTML的本质是标记语言而非编程语言。随后快速掌握最核心的文本标签：`\u003ca\u003e`链接跳转、`\u003cp\u003e`段落文本、`\u003ch1\u003e`至`\u003ch6\u003e`标题层级，以及`\u003cdiv\u003e`容器、`\u003chr\u003e`水平线、`\u003cbr\u003e`换行符——这些是构建任何网页都离不开的骨架元素。\n\n**第二阶段（第5-8节）：丰富内容与交互**\n引入`\u003cimg loading=\"lazy\" decoding=\"async\"\u003e`图片嵌入，理解路径与替代文本的重要性；讲解`\u003cinput\u003e`表单输入与`\u003cbutton\u003e`按钮，建立用户交互意识；学习`\u003cul\u003e`/`\u003col\u003e`列表标签组织信息层级，以及`\u003ctable\u003e`/`\u003ctr\u003e`/`\u003ctd\u003e`表格结构展示数据。此阶段开始涉及多媒体与用户输入，网页从静态走向动态。\n\n**第三阶段（第9-10节）：规范与最佳实践**\n补充`\u003chead\u003e`与`\u003ctitle\u003e`元数据配置、注释技巧和文档类型声明。虽然代码量不大，但这部分是专业与否的分水岭——规范的文档结构能让浏览器和搜索引擎更好地理解你的页面。\n\n## 门槛与前置知识\n\n课程设计为零门槛友好型。你只需要：\n- 会使用电脑和基本文件操作\n- 有任意文本编辑器（推荐VS Code或记事本）\n- 有任意现代浏览器（Chrome、Edge、Firefox均可）\n\n无需安装任何开发环境，无需编程经验。每节课的视频时长控制在3到22分钟之间，节奏轻快，避免因信息过载而产生畏难情绪。\n\n## 资料包的使用方法\n\n课程配套的10个视频文件按顺序编号。建议以\"先看视频理解概念，再动手敲代码验证效果\"为基本流程：\n\n1. 创建项目文件夹，将视频文件放入其中\n2. 每看完一节课，在文件夹内新建对应的`.html`文件\n3. 照着视频中的示例代码逐字输入（不要复制粘贴），感受每个标签的实际效果\n4. 在浏览器中打开`.html`文件查看渲染结果，尝试修改参数观察变化\n\n例如看完`\u003cimg loading=\"lazy\" decoding=\"async\"\u003e`标签课程后，可尝试更改图片路径、调整宽度、添加或不添加`alt`属性，亲自体会每个属性的作用。这种\"做中学\"的方式比单纯观看更容易形成长期记忆。\n\n## 学完产出\n\n完成全部10节课后，你将能够：\n- 独立编写结构完整、语义清晰的HTML页面\n- 理解并正确使用10种以上核心HTML标签\n- 掌握文档类型声明、头部元数据、注释等基本规范\n- 为后续学习CSS布局和JavaScript交互做好充分准备\n\n这套课程的价值不在于深度，而在于覆盖面广、节奏适中、即学即用。如果你希望快速建立对HTML5的整体认知，或者需要补齐前端开发的基础知识，这是一份不错的选择。\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\u003cdiv class=\"wb-catalog-tree-root\"\u003e\u003cdetails class=\"wb-tree-stage\"\u003e\u003csummary class=\"wb-tree-summary wb-tree-summary--stage\"\u003e\u003cspan class=\"wb-tree-stage-name\"\u003e课程目录\u003c/span\u003e\u003cspan class=\"wb-tree-badge\"\u003e10 集\u003c/span\u003e\u003c/summary\u003e\u003cdiv class=\"wb-tree-stage__body\"\u003e\u003cul class=\"wb-tree-files\"\u003e\u003cli class=\"wb-tree-file\"\u003e1 什么是网页？什么是HTML? (22:29).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e2 、标签 (08:19).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e3 、、\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e标签 (07:22).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e4 、 至 (05:00).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e5 标签 (08:04).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e6 标签 (05:05).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e7 、和标签 (03:43).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e8 、和标签 (03:56).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e9 和标签 (02:49).mp4\u003c/li\u003e\u003cli class=\"wb-tree-file\"\u003e10 注释和定义文档类型 (05:12).mp4\u003c/li\u003e\u003c/ul\u003e\u003c/div\u003e\u003c/details\u003e\u003c/div\u003e\u003c/div\u003e"])</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"article-body mt-6 max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$29\"}}]\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\":[[\"$\",\"$L5\",\"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\":[\"$\",\"$L12\",null,{\"src\":\"/api/uploads/06565242-cbde-4f3b-805e-7fdd3e742b6c.jpg\",\"alt\":\"AI大模型开发2026线下版V7.5\",\"sizes\":\"160px\",\"fallback\":\"/images/default-leopard-cover.png\"}]}],[\"$\",\"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\",\" · \",4559,\" 浏览\"]}]]}]]}],[\"$\",\"$L5\",\"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\":[\"$\",\"$L12\",null,{\"src\":\"/images/default-leopard-cover.png\",\"alt\":\"小滴课堂新一代AI全栈工程师-微服务AI智能面试对话平台\",\"sizes\":\"160px\",\"fallback\":\"/images/default-leopard-cover.png\"}]}],[\"$\",\"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\",\" · \",6008,\" 浏览\"]}]]}]]}],[\"$\",\"$L5\",\"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\":[\"$\",\"$L12\",null,{\"src\":\"/api/uploads/7631eb53-e70d-4add-ae87-64621a91a465.jpg\",\"alt\":\"QCon 北京 2026 （4 月）\",\"sizes\":\"160px\",\"fallback\":\"/images/default-leopard-cover.png\"}]}],[\"$\",\"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\",\" · \",2650,\" 浏览\"]}]]}]]}],[\"$\",\"$L5\",\"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\":[\"$\",\"$L12\",null,{\"src\":\"/api/uploads/1f6f4323-81be-4134-8434-e942174ef6a8.jpg\",\"alt\":\"AI+全能测试工程师\",\"sizes\":\"160px\",\"fallback\":\"/images/default-leopard-cover.png\"}]}],[\"$\",\"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\",\" · \",6671,\" 浏览\"]}]]}]]}],[\"$\",\"$L5\",\"19708\",{\"href\":\"/blog/19708\",\"className\":\"tilt-card block overflow-hidden rounded-xl border bg-card/85 transition-colors hover:bg-muted/40\",\"children\":[\"$L2a\",\"$L2b\"]}],\"$L2c\"]}],\"$L2d\"]}]]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"div\",null,{\"className\":\"relative h-20 w-full overflow-hidden border-b\",\"children\":[\"$\",\"$L12\",null,{\"src\":\"/api/uploads/b292844a-8895-46f1-abe3-f42945c70367.jpg\",\"alt\":\"小滴课堂中间件项目大课-自动化云测平台/Spingboot3.X/微服务/Kafka3.x\",\"sizes\":\"160px\",\"fallback\":\"/images/default-leopard-cover.png\"}]}]\n2b:[\"$\",\"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,\" 浏览\"]}]]}]\n2c:[\"$\",\"$L5\",\"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\":[\"$\",\"$L12\",null,{\"src\":\"/api/uploads/a03399f3-3a72-49ca-98dd-e05cbf4c4df6.jpg\",\"alt\":\"图灵工控一期：上位机+AI\",\"sizes\":\"160px\",\"fallback\":\"/images/default-leopard-cover.png\"}]}],[\"$\",\"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\",\" · \",2941,\" 浏览\"]}]]}]]}]\n2d:[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-x-4 gap-y-2 text-sm\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/topics/体系课\",\"className\":\"font-medium text-primary hover:underline\",\"children\":[\"更多 \",\"体系课\",\" 教程 →\"]}],[\"$\",\"$L5\",null,{\"href\":\"/rankings\",\"className\":\"font-medium text-primary hover:underline\",\"children\":\"课程排行榜 →\"}]]}]\n"])</script><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<!-- --> · <!-- -->4559<!-- --> 浏览</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 alt="小滴课堂新一代AI全栈工程师-微服务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=%2Fimages%2Fdefault-leopard-cover.png&w=16&q=75 16w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=32&q=75 32w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=48&q=75 48w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=64&q=75 64w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=96&q=75 96w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=128&q=75 128w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=256&q=75 256w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=384&q=75 384w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=640&q=75 640w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=750&q=75 750w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=828&q=75 828w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=1920&q=75 1920w" src="/_next/image?url=%2Fimages%2Fdefault-leopard-cover.png&w=1920&q=75"/></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<!-- --> · <!-- -->6008<!-- --> 浏览</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<!-- --> · <!-- -->2650<!-- --> 浏览</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<!-- --> · <!-- -->6671<!-- --> 浏览</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<!-- --> · <!-- -->2941<!-- --> 浏览</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> |
