大前端

主题

🎨 HTML & CSS 基础教程 ​

从零开始，构建精美的 Web 页面

HTML 定义结构，CSS 赋予样式，共同打造现代化 Web 应用

📝 HTML5🎨 CSS3📐 布局🎭 动画🔧 预处理器

📚 学习路径 ​

建议按照以下路径系统学习，循序渐进：

mermaid
graph TD
    A[HTML 基础] --> B[CSS 基础]
    B --> C[CSS 布局]
    C --> D[CSS3 高级特性]
    D --> E[响应式设计]
    E --> F[CSS 预处理器]

🏗️ HTML 部分 ​

📖 HTML 基础 ​

HTML 基础知识回顾 ​

  • Web 标准三层结构
  • 常用 HTML 标签详解
  • 表单元素使用
  • 语义化标签实践

适合人群：零基础入门
难度：⭐

HTML5 新特性 ​

  • 新增语义化标签
  • 多媒体标签（video/audio）
  • Canvas 画布
  • 本地存储 API

适合人群：有 HTML 基础
难度：⭐⭐

HTML5 表单增强 ​

  • 新增 input 类型
  • 表单验证属性
  • 表单自动完成
  • 实用案例演示

适合人群：进阶学习
难度：⭐⭐

表单设计与实践 ​

  • 表单元素详解
  • 表单布局设计
  • 表单验证技巧
  • 用户体验优化

适合人群：实战应用
难度：⭐⭐⭐

🎯 HTML 核心概念 ​

🏷️ 语义化标签

html
<header>  <!-- 头部 -->
<nav>     <!-- 导航 -->
<main>    <!-- 主要内容 -->
<article> <!-- 文章 -->
<section> <!-- 区块 -->
<aside>   <!-- 侧边栏 -->
<footer>  <!-- 页脚 -->

📋 表单元素

html
<input type="text">       <!-- 文本输入 -->
<input type="email">      <!-- 邮箱 -->
<input type="password">   <!-- 密码 -->
<input type="number">     <!-- 数字 -->
<input type="date">       <!-- 日期 -->
<textarea></textarea>     <!-- 多行文本 -->
<select></select>         <!-- 下拉选择 -->

🖼️ 多媒体标签

html
<img src="" alt="">       <!-- 图片 -->
<video controls></video>  <!-- 视频 -->
<audio controls></audio>  <!-- 音频 -->
<canvas></canvas>         <!-- 画布 -->

🎨 CSS 部分 ​

🎯 CSS 基础 ​

CSS 样式表和选择器 ​

  • CSS 引入方式
  • 选择器详解
  • 选择器优先级
  • 最佳实践

推荐指数：⭐⭐⭐⭐⭐
难度：⭐

CSS 选择器完全指南 ​

  • 基础选择器
  • 伪类选择器
  • 伪元素选择器
  • 组合选择器

推荐指数：⭐⭐⭐⭐⭐
难度：⭐⭐

CSS 继承性和层叠性 ​

  • 继承机制
  • 层叠规则
  • 优先级计算
  • 实际应用

推荐指数：⭐⭐⭐⭐
难度：⭐⭐

CSS 盒模型详解 ​

  • 标准盒模型
  • IE 盒模型
  • box-sizing
  • 实战案例

推荐指数：⭐⭐⭐⭐⭐
难度：⭐⭐

📐 CSS 布局 ​

🎯 现代布局方案 ​

Flex 弹性布局 ​

  • Flex 容器属性
  • Flex 项目属性
  • 常见布局案例
  • 兼容性处理

🔥 必学：现代布局核心
难度：⭐⭐⭐

Grid 网格布局 ​

  • Grid 容器属性
  • Grid 项目属性
  • 复杂布局实现
  • 响应式网格

🔥 必学：二维布局利器
难度：⭐⭐⭐⭐

定位详解 ​

  • static/relative/absolute
  • fixed/sticky
  • 定位场景
  • 实战技巧

推荐指数：⭐⭐⭐⭐
难度：⭐⭐

浮动布局 ​

  • 浮动原理
  • 清除浮动
  • 浮动布局
  • 常见问题

推荐指数：⭐⭐⭐
难度：⭐⭐

🎭 CSS 样式 ​

字体和文本属性 ​

  • font 系列属性
  • text 系列属性
  • 文字排版技巧
  • Web 字体应用

推荐指数：⭐⭐⭐⭐
难度：⭐

背景属性详解 ​

  • background-color
  • background-image
  • background 复合属性
  • 渐变背景

推荐指数：⭐⭐⭐⭐
难度：⭐⭐

伪类与伪元素 ​

  • :hover/:active/:focus
  • ::before/::after
  • 创意应用
  • 实战案例

推荐指数：⭐⭐⭐⭐⭐
难度：⭐⭐

CSS3 动画 ​

  • transition 过渡
  • animation 动画
  • transform 变换
  • 性能优化

🔥 精彩：打造流畅动效
难度：⭐⭐⭐

⚡ CSS3 高级特性 ​

CSS3 新增属性 ​

  • 圆角边框
  • 阴影效果
  • 渐变背景
  • 滤镜效果

推荐指数：⭐⭐⭐⭐
难度：⭐⭐

字体样式进阶 ​

  • @font-face
  • Web 字体加载
  • 字体优化
  • 图标字体

推荐指数：⭐⭐⭐
难度：⭐⭐

🔧 CSS 预处理器 ​

📦 Sass/SCSS ​

Sass 入门 ​

  • Sass 基础语法
  • 嵌套规则
  • 变量与混入
  • 快速上手

推荐指数：⭐⭐⭐⭐
难度：⭐⭐

变量与数据类型 ​

  • 变量定义
  • 数据类型
  • 作用域
  • 默认值

难度：⭐

导入与模块化 ​

  • @import 规则
  • 部分文件
  • 文件组织
  • 最佳实践

难度：⭐

Mixin 混入 ​

  • 定义 mixin
  • 传递参数
  • 内容块
  • 实用案例

推荐指数：⭐⭐⭐⭐⭐
难度：⭐⭐

继承与占位符 ​

  • @extend 规则
  • 占位符选择器
  • 继承链
  • 性能考虑

难度：⭐⭐

函数定义 ​

  • 自定义函数
  • 返回值
  • 参数处理
  • 实用函数库

难度：⭐⭐

控制指令 @if ​

  • 条件判断
  • 逻辑运算
  • 多分支
  • 实战应用

难度：⭐⭐

循环 @for ​

  • for 循环
  • through vs to
  • 循环应用
  • 生成工具类

难度：⭐⭐

循环 @while ​

  • while 循环
  • 条件控制
  • 应用场景
  • 性能优化

难度：⭐⭐

循环 @each ​

  • each 遍历
  • 列表循环
  • Map 循环
  • 批量生成

难度：⭐⭐

内置函数 ​

  • 颜色函数
  • 字符串函数
  • 数学函数
  • 列表函数

难度：⭐⭐

@use 规则 ​

  • 模块系统
  • 命名空间
  • 私有成员
  • 最佳实践

难度：⭐⭐

@forward 转发 ​

  • 转发模块
  • 配置前缀
  • 隐藏成员
  • 模块整合

难度：⭐⭐

@at-root 根级 ​

  • 跳出嵌套
  • 根级输出
  • 应用场景
  • 注意事项

难度：⭐⭐

📚 综合实践 ​

其他重要概念 ​

  • BFC 块级格式化上下文
  • IFC 行内格式化上下文
  • 层叠上下文
  • 视觉格式化模型

推荐指数：⭐⭐⭐⭐
难度：⭐⭐⭐

Web 标准与规范 ​

  • W3C 标准
  • HTML5 规范
  • CSS3 规范
  • 最佳实践

推荐指数：⭐⭐⭐
难度：⭐⭐

🎯 学习建议 ​

初学者路线（0-3个月） ​

第一阶段：HTML 基础

  1. 学习常用 HTML 标签
  2. 理解语义化标签
  3. 掌握表单元素
  4. 练习页面结构搭建

第二阶段：CSS 基础

  1. CSS 选择器
  2. 盒模型理解
  3. 文本和字体样式
  4. 背景和边框

第三阶段：布局入门

  1. 定位布局
  2. Flex 布局
  3. 响应式基础
  4. 实战小项目

进阶路线（3-6个月） ​

第四阶段：高级布局

  1. Grid 网格布局
  2. 复杂响应式设计
  3. 移动端适配
  4. 布局性能优化

第五阶段：CSS3 特性

  1. 过渡和动画
  2. 变换效果
  3. 渐变和滤镜
  4. 创意特效

第六阶段：工程化

  1. CSS 预处理器（Sass/Less）
  2. PostCSS
  3. CSS Modules
  4. CSS-in-JS

🛠️ 实用工具 ​

在线工具 ​

开发工具 ​

  • 🔧 Chrome DevTools
  • 🔧 Firefox Developer Tools
  • 🔧 CSS Peeper
  • 🔧 WhatFont

学习资源 ​

💡 最佳实践 ​

HTML 编码规范 ​

html
<!-- ✅ 推荐 -->
<div class="container">
  <h1 class="title">标题</h1>
  <p class="description">描述文本</p>
</div>

<!-- ❌ 不推荐 -->
<div>
<h1>标题</h1>
<p>描述文本</p>
</div>

CSS 编码规范 ​

css
/* ✅ 推荐 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ❌ 不推荐 */
.container{display:flex;justify-content:center;align-items:center;}

命名规范 ​

css
/* BEM 命名规范 */
.block {}
.block__element {}
.block--modifier {}

/* 示例 */
.card {}
.card__header {}
.card__body {}
.card--featured {}

🎓 学习检查清单 ​

HTML 基础 ​

  • [ ] 理解 HTML 文档结构
  • [ ] 掌握常用标签
  • [ ] 熟悉语义化标签
  • [ ] 会使用表单元素
  • [ ] 了解 HTML5 新特性

CSS 基础 ​

  • [ ] 掌握 CSS 选择器
  • [ ] 理解盒模型
  • [ ] 会使用定位
  • [ ] 掌握浮动和清除浮动
  • [ ] 熟悉常用样式属性

现代布局 ​

  • [ ] 熟练使用 Flexbox
  • [ ] 掌握 Grid 布局
  • [ ] 会做响应式设计
  • [ ] 了解移动端适配
  • [ ] 能实现复杂布局

高级特性 ​

  • [ ] 会使用 CSS3 动画
  • [ ] 掌握过渡效果
  • [ ] 了解 transform
  • [ ] 会用渐变和滤镜
  • [ ] 能优化性能

工程化 ​

  • [ ] 掌握 Sass/Less
  • [ ] 了解 PostCSS
  • [ ] 会用 CSS 模块化
  • [ ] 熟悉构建工具
  • [ ] 遵循编码规范

🎯 开始学习之旅

建议从 HTML 基础开始，逐步深入 CSS，最后学习预处理器

💪 坚持练习，每天进步一点点！