源本科技 | 码上会

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

学习目标 掌握 HTML 表单的基本结构及 form 标签的核心属性 熟悉常用输入控件 input 的不同类型及其应用场景 学会使用 label、select、textarea 等辅助标签优化用户体验 理解表单数据提交的基本原理及本地化验证方法 基础概念 HTML 表单是网页中与用户进行交互的主要方

学习目标 掌握 <video> 元素的基本语法与核心属性 理解主流视频格式（MP4、WebM、OGG）的浏览器兼容性 能够实现响应式、自动播放、循环播放等常见功能 遵循最佳实践，确保跨浏览器兼容性、性能与无障碍访问 什么是 <video> <video> 是 HTML5 引入的原生视频播放器，允许网

学习目标 掌握 <audio> 元素的基本语法与核心属性 理解不同音频格式的浏览器兼容性 能够实现带控件、自动播放、循环播放等常见功能 遵循最佳实践，确保跨浏览器兼容性与用户体验 什么是 <audio> <audio> 是 HTML5 引入的原生音频播放器，允许网页直接嵌入音频文件（如音乐、语音、音

学习目标 掌握 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