HTML / CSS FUNDAMENTALS
HTML/CSS 入门代码编写教学
从语义化标签到盒模型布局，写出结构清晰、可访问、可上线的静态网页，为后续 JavaScript 与部署打下骨架。
为什么先学 HTML / CSS
HTML 与 CSS 是所有网页的骨架与皮肤，掌握它们意味着你能够把任何一张设计稿还原成真实可见的页面。尧图把入门拆成可量化的小目标，让零基础学员在第一节课就写出可访问的页面。
- 语义化标签让搜索引擎与读屏软件都能读懂你的页面
- 盒模型与定位是后续布局、组件、动画的共同语言
- 响应式基础让同一份代码适配手机、平板与桌面
- 每节课配套可上线的静态页面作业，看得见进度
我们的交付标准
尧图不教"能跑就行"的写法，而是按企业真实交付标准训练学员，从命名规范到结构语义都对照在线上站点可维护的代码风格。
- 统一的命名规范与目录结构，源码可交接可维护
- 结构、样式、行为三层分离，避免行内样式堆积
- 关键页面通过基础可访问性与移动端验收清单
- 结课作品可直接用于作品集或部署上线
CORE TOPICS
四个 核心知识点
从标签语义到响应式布局，四个知识点构成 HTML/CSS 入门的完整地图。
语义化标签
header、nav、main、article 等标签的合理使用，让结构表达内容意图。
盒模型布局
content、padding、border、margin 与 Flex / Grid 布局，精准控制每个元素的位置。
响应式基础
媒体查询、视口设置与流式布局，让一份代码适配多端屏幕尺寸。
实战小项目
从企业落地页到产品介绍页，把知识点落成可写进作品集的真实页面。
LEARNING FLOW
四步 学习流程
从语法认知到项目交付，每一步都有可验收的产出物。
01
语法认知
认识标签、属性与样式规则，建立结构与样式的直觉。
02
布局训练
用 Flex 与 Grid 还原常见页面模块，掌握对齐与间距。
03
响应式适配
加入媒体查询与移动端断点，让页面在多端可读可用。
04
项目交付
独立完成落地页作品，通过代码评审与可访问性检查。