Web前端学习项目

这是一个Web前端基础学习项目，包含了HTML、CSS的基础知识和实践案例。

项目结构

WebFrontProject/
├── .idea/                    # IDE配置文件
├── 11-相对路径/              # 相对路径示例
│   ├── 相对路径.html
│   ├── 3.jpg
│   └── images/
├── 16-综合案例一/            # 个人简历项目
│   ├── 个人简历.html
│   ├── 个人简历.css
│   └── 证件照系列
├── images/                   # 公共图片资源
│   └── headimage.jpg
├── media/                    # 多媒体资源
│   ├── 视频文件
│   └── 音频文件
└── 基础HTML练习/             # HTML基础知识练习
    ├── 01-标签的写法.html    # HTML标签基本语法
    ├── 02-HTML基本骨架.html  # HTML文档结构
    ├── 03-标签的关系.html    # 标签嵌套关系
    ├── 04-注释.html         # HTML注释使用
    ├── 05-标题标签.html     # 标题标签使用
    ├── 06-段落标签.html     # 段落标签使用
    ├── 07-换行与水平线.html  # br和hr标签
    ├── 08-文本格式化.html    # 文本样式标签
    ├── 09-图像基本使用.html  # img标签使用
    ├── 10-图像属性.html     # 图片属性设置
    ├── 12-绝对路径.html     # 路径使用示例
    ├── 13-超链接.html       # 链接标签使用
    ├── 14-音频.html        # 音频标签使用
    └── 15-视频标签.html     # 视频标签使用

学习内容

1. HTML基础

• HTML文档结构
• 常用标签使用
  • 文本标签（h1-h6, p, span等）
  • 多媒体标签（img, audio, video）
  • 超链接（a标签）
  • 格式化标签（strong, em, del等）
• 路径使用（相对路径、绝对路径）

2. CSS基础

• CSS选择器
• 文本样式
• 布局方式
• 盒模型

3. 综合案例

个人简历项目

• 实现了一个专业的个人简历页面
• 包含以下模块：
  • 基本信息
  • 教育背景
  • 工作经验
  • 兼职经历
  • 项目经历
  • 自我评价
  • 奖项证书
• 使用了现代化的CSS布局
  • Flex布局
  • Grid布局
  • 响应式设计

如何使用

1. 克隆项目到本地：

git clone [项目地址]

2. 使用VSCode等编辑器打开项目

3. 学习路线：

   • 从基础HTML练习开始，按照文件编号顺序学习
   • 理解每个示例的用途和实现方式
   • 尝试修改代码，观察效果
   • 最后学习综合案例，了解实际项目中的应用

4. 运行示例：

   • 直接在浏览器中打开HTML文件
   • 或使用VSCode的Live Server插件运行

注意事项

1. 路径使用：

   • 相对路径：使用./表示当前目录
   • 绝对路径：在Web开发中谨慎使用
   • 建议将资源文件放在专门的目录中（如images/、media/）

2. 多媒体文件：

   • 图片支持多种格式（jpg、png、gif等）
   • 音视频文件建议使用通用格式
   • 注意控制文件大小，优化加载性能

3. 代码规范：

   • 使用规范的HTML5文档结构
   • 保持代码缩进整洁
   • 添加适当的注释
   • 使用语义化标签

技术栈

• HTML5
• CSS3
• Font Awesome（图标库）

维护者

[你的名字]

许可证

MIT License