🌐 HTML 基础教学

从零开始学习网页制作,掌握现代 HTML5 技术,构建语义化、可访问、高性能的网页

📚 系统学习

从基础结构到高级语义化,循序渐进的学习路径

💻 实战项目

通过实际项目巩固所学知识,提高应用能力

♿ 无障碍优先

注重可访问性设计,构建对所有人都友好的网页

🎯 最佳实践

学习企业级开发标准,养成良好的编码习惯

第一阶段:启蒙与基础 (The Foundation)

目标:理解网页是如何构成的,掌握 HTML 文档的基本结构和文本格式化。

第一章:欢迎来到 Web 世界

Web 发展简史、HTML 的角色、开发环境搭建、第一个网页

第二章:HTML 文档结构解析

DOCTYPE 声明、html/head/body、元数据配置、语义化基础

第三章:文本内容格式化

标题与段落、列表结构、文本格式化标签、引用与代码

第二阶段:构建丰富内容 (Rich Content)

目标:学会插入图片、链接、列表和表格,让网页内容更加丰富。

第四章:超链接与导航

链接基础、路径详解、锚点跳转、导航结构设计

第五章:图像与多媒体

图片优化、响应式图片、figure/figcaption、视频与音频

第六章:列表与数据结构

有序/无序列表、定义列表、表格设计、数据展示最佳实践

第三阶段:语义化与表单 (Semantics & Interaction)

目标:编写高质量的语义化代码,构建用户交互表单。

第七章:HTML5 语义化布局

语义化标签、文档大纲、结构化数据、SEO 优化

第八章:表单与用户输入

表单结构、输入类型、表单验证、用户体验优化

第四阶段:进阶与优化 (Advanced & Optimization)

目标:达到企业级开发标准,编写高性能、可访问的网页。

第九章:Head 进阶与 SEO 优化

meta 标签详解、Open Graph、结构化数据、性能提示

第十章:无障碍访问 (A11y)

ARIA 属性、屏幕阅读器、键盘导航、无障碍最佳实践

第十一章:HTML 性能与最佳实践

加载优化、资源提示、代码规范、企业级开发标准

第五阶段:综合实战项目 (Capstone Projects)

目标:产出可展示的作品,将所学知识融会贯通。

第十二章:实战演练

个人简历页面、企业官网、响应式博客、作品集网站