源本科技 | 码上会

项目准备 新建一个名为 blog 的项目，并创建以下文件结构 blog/ ├── index.html # 首页：展示精选/最新文章列表 ├── list.html # 列表页：展示所有文章及分页 ├── article.html # 详情页：单篇文章完整内容及评论

学习目标 掌握 HTML5 语义化布局标签的核心作用 能够正确使用 <header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 构建清晰页面结构 理解语义化布局对可访问性、SEO 和代码维护性的价值 结合 CSS 实现美观且响应式的现代网页布

学习目标 理解响应式设计的核心理念与三大支柱 掌握 <meta name="viewport"> 的作用与正确写法 能够实现响应式图片、响应式文本和响应式布局 熟练使用 CSS 媒体查询（Media Queries） 设置断点 正确应用 Flexbox、CSS Grid 和 多列布局 构建现代响应式

学习目标 理解 Emoji 在 Web 中的本质：Unicode 字符 掌握在 HTML 中插入 Emoji 的三种方式 能够使用十进制与十六进制 Unicode 引用 Emoji 学会通过 CSS 控制 Emoji 的显示大小与样式 了解编码设置对 Emoji 显示的关键作用 Emoji 本质 U

学习目标 掌握 HTML 中用于表示计算机代码的五种语义化标签 理解每种标签的适用场景与语义含义 能够正确组合使用 <pre> 与 <code> 实现代码块展示 提升网页内容的可访问性与专业性 为什么需要 普通段落文本无法准确表达编程内容的语义。HTML 提供了一组语义化标签，不仅在视觉上区分代码，

学习目标 理解 favicon 的作用与重要性 掌握在 HTML 中正确添加 favicon 的方法 了解不同设备和浏览器对 favicon 尺寸与格式的要求 能够排查并解决常见的 favicon 显示问题 什么是 Favicon Favicon（全称 favorite icon，收藏夹图标）是一个

学习目标 理解 HTML 中文件路径的核心作用 准确区分绝对路径与相对路径的定义、语法和适用场景 掌握相对路径的三种形式：文档相对、根相对、目录导航（含 . 和 ..） 遵循工程化最佳实践，构建健壮、可移植的前端项目结构 什么是文件路径 HTML 文件路径用于指定外部资源（如图片、CSS、JavaS

学习目标 理解 <iframe> 的作用与核心用途 掌握 <iframe> 的基本语法和常用属性 能够在网页中嵌入外部内容（如视频、地图、工具等） 了解安全、性能与可访问性方面的最佳实践 什么是 <iframe> <iframe>（Inline Frame，内联框架）是 HTML 中用于在当前网页中