学习笔记项目文件解析与笔记 1. index.html 核心功能：定义敲击乐器的键盘界面关键实现：按键布局 9个.

核心功能：定义敲击乐器的键盘界面
关键实现：

按键布局
- 9个.key容器组成.keys父容器，每个按键包含字母（<div>）和音效名称（<span class="sound">）
- 使用Emmet快捷语法生成结构：.keys>.key>div+span.sound
响应式基础
- 通过<meta name="viewport">启用移动端适配
- 引入外部样式表common.css实现样式分离

代码示例：

<div class="keys">
  <div class="key">
    <div>A</div>
    <span class="sound">clap</span>
  </div>
  <!-- 其他按键结构类似 -->
</div>

核心功能：为页面提供视觉设计与交互反馈
关键技术点：

全局样式
- html设置全屏背景图，background-size: cover实现自适应填充
- 基础字号10px，使用rem单位便于比例控制
Flex布局
- .keys启用display: flex，通过justify-content: center和align-items: center实现水平垂直居中
- 每个.key固定宽度100px，半透明背景（rgba(0,0,0,0.4)）提升质感
细节增强
- 按键边框发光效果：box-shadow: 0 0 5px black
- 音效文字样式：橙色（#ffc600）、大写字母（text-transform: uppercase）

示例代码：

.key {
  border: 4px solid white;
  border-radius: 5px;
  background: rgba(0,0,0,0.4);
  /* 其他样式... */
}

核心思想：前端分层与开发效率优化
核心内容：

职责分离原则
- HTML：作为“演员”，定义页面结构（盒子模型、按键层级）
- CSS：作为“化妆师”，控制视觉表现（选择器、布局、样式）
开发技巧
- Emmet语法：快速生成HTML结构（如.keys>.key>div+span.sound）
- 选择器优先级：
  - 子元素选择器（.keys > .key）精确控制嵌套元素
  - 相邻兄弟选择器（+）处理元素间关系
布局基础
- 块级元素（div）与行内元素的区别
- Flex布局的核心作用：display: flex实现子元素弹性排列

HTML结构 (index.html)  
  ↓  
CSS样式 (common.css) → 定义布局、颜色、交互状态  
  ↓  
JavaScript (待补充) → 绑定键盘事件、播放音效、触发视觉反馈

学习笔记