# htmlcss

## 规则（Rules）

# HTML+CSS编码规范

## 适用对象和范围

本规范适用于所有编写HTML页面结构和CSS样式代码的场景，包括页面布局、样式设计和响应式适配。

---

## 1. 文件命名规范

**规则**：同一项目中，CSS文件名必须与对应的HTML文件名保持一致。

| HTML 文件 | CSS 文件 |
|-----------|---------|
| `index.html` | `index.css` |
| `about.html` | `about.css` |

- ✅ 正确：`index.html` → `index.css`
- ❌ 错误：`index.html` → `style.css`

**违反后果**：CSS与HTML文件名不一致导致查找困难，增加维护成本。

---

## 2. ID命名规范

**规则**：ID必须全部小写，用下划线 `_` 拼接。

- ✅ 正确：`id="header_nav"`、`id="submit_btn"`
- ❌ 错误：`id="HeaderNav"`、`id="headerNav"`、`id="header-nav"`

**违反后果**：ID命名不一致导致选择器混乱，HTML与CSS的对应关系不清晰。

---

## 3. CSS class命名规范

**规则**：class必须全部小写，组件命名用下划线 `_` 拼接，状态/样式变体用连字符 `-` 拼接。

- ✅ 正确：`.btn`、`.card`、`.btn_icon`、`.card_title`、`.btn_hover-info`、`.card_border-danger`
- ❌ 错误：`.btnIcon`、`.BtnIcon`、`.btn-icon`（组件名用连字符，与状态变体混淆）

**违反后果**：class命名混乱导致无法区分组件名和状态名，样式覆盖困难。

---

## 4. 注释规范

**规则**：CSS使用区块注释，HTML使用条件注释。

**CSS区块注释**：
```css
/* ========================================
   Header区域样式
   ======================================== */

/* 导航栏容器 */
.nav { ... }
```

**HTML条件注释**：
```html
<!-- ====== 页面头部 ====== -->
<header>...</header>

<!-- 导航栏 -->
<nav>...</nav>
```

- ✅ 正确：有明确的区域分隔注释
- ❌ 错误：无注释或注释不清晰

**违反后果**：无注释导致CSS/HTML结构难以理解，增加维护难度。

---

## 5. 代码分离规范

**规则**：HTML和CSS必须分离到独立文件，禁止内联样式。

- ✅ 正确：`<link rel="stylesheet" href="css/style.css">`
- ❌ 错误：`<div style="color: red;">`（内联样式）
- ❌ 错误：`<style>div { color: red; }</style>`（页面内样式）

**违反后果**：样式与结构混合导致代码难以维护，复用性差。

---

## 6. 单位规范

**规则**：尺寸值优先使用 `rem` 单位，只有边框宽度使用 `1px`。rem值尽量使用 `0.25rem` 的倍数。

- ✅ 正确：`padding: 1rem;`、`margin: 0.5rem 0;`、`font-size: 0.75rem;`、`border: 1px solid #ccc;`
- ❌ 错误：`padding: 16px;`（非rem）、`border: 0.0625rem solid #ccc;`（边框用rem）

**常用rem值**：`0.25rem`、`0.5rem`、`0.75rem`、`1rem`、`1.25rem`、`1.5rem`、`1.75rem`、`2rem`、`3rem`

**违反后果**：使用px单位导致页面不能随根字体大小等比例缩放，影响可访问性。

---

## 7. 语义化标签规范

**规则**：必须使用HTML5语义化标签，禁止全篇使用 `<div>`。

- ✅ 正确：`<header>`、`<nav>`、`<main>`、`<section>`、`<article>`、`<footer>`
- ❌ 错误：`<div class="header">`、`<div class="nav">`

**违反后果**：非语义化标签导致页面结构不清晰，不利于SEO和屏幕阅读器解析。

---

## 8. 响应式适配规范

**规则**：必须使用媒体查询 `@media` 适配不同屏幕尺寸，至少覆盖移动端（≤768px）和桌面端（>768px）。

- ✅ 正确：
```css
@media (max-width: 768px) {
  .container { flex-direction: column; }
}
@media (min-width: 769px) {
  .container { flex-direction: row; }
}
```

**违反后果**：无响应式适配导致移动端显示异常，用户体验差。

---

## 9. 目录结构规范

**规则**：HTML入口文件必须为 `static/index.html`，CSS文件存放于 `static/css/`。

```
./project/{项目名}/static/
├── index.html
├── css/
│   └── style.css
├── img/
├── font/
└── template/
```

**违反后果**：目录混乱导致文件查找困难，构建部署配置复杂。

## 方法（Methods）

# HTML+CSS编码方法

## 前置条件

- [ ] 已获取UI设计规范文档或需求文档
- [ ] 已确定页面结构、布局方式和配色方案
- [ ] 已明确需要创建的页面数量

## 流程概览

分析需求 → 规划文件结构 → 编写HTML结构 → 编写CSS样式 → 实现响应式 → 验证完整性

## 详细步骤

### 步骤1：分析需求
分析UI设计规范文档或需求文档，确定页面结构、布局方式和配色方案。

### 步骤2：规划文件结构
确定页面数量，规划HTML和CSS文件。

## 技巧（Tips）

# HTML+CSS编码技巧

## 1. 使用Flexbox布局

**适用场景**：需要实现一维布局（水平或垂直排列、居中、等分布局）。

**具体做法**：使用 `display: flex;` 和相关属性。

**对比说明**：

| 维度 | 传统布局（float/inline-block） | Flexbox |
|------|-------------------------------|---------|
| 垂直居中 | 需要复杂计算 | `align-items: center` 一行搞定 |
| 等分布局 | 需计算百分比 | `flex: 1` 自动等分 |
| 排序 | 依赖HTML顺序 | `order` 属性可重排 |

**示例**：
```css
/* ✅ Flexbox 水平居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ✅ Flexbox 等分布局 */
.nav_items {
  display: flex;
}
.nav_item {
  flex: 1;
  text-align: center;
}
```

**注意事项**：Flexbox是**一维**布局，如果需要同时控制行和列（二维），应使用CSS Grid。

---

## 2. 使用CSS Grid布局

**适用场景**：需要实现二维布局（网格、卡片墙、仪表盘）。

**具体做法**：使用 `display: grid;` 和相关属性。

**对比说明**：

| 维度 | Flexbox | CSS Grid |
|------|---------|----------|
| 维度 | 一维（行或列） | 二维（行和列同时） |
| 网格间隙 | 需用margin | `gap` 属性 |
| 区域命名 | 不支持 | `grid-template-areas` |

**示例**：
```css
/* ✅ Grid 页面布局 */
.page_layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  gap: 1rem;
}
```

**注意事项**：Grid适合页面级别的整体布局，Flexbox适合组件级别的局部布局。

---

## 3. rem单位配合根字体设置

**适用场景**：需要页面整体缩放时。

**具体做法**：在CSS中设置 `html` 的 `font-size`，所有尺寸使用 `rem`。

**示例**：
```css
/* 基准设置 */
html {
  font-size: 16px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

/* 使用rem */
.card {
  padding: 1rem;    /* = 16px / 14px */
  margin: 0.5rem;   /* = 8px / 7px */
  font-size: 0.875rem; /* = 14px / 12.25px */
}
```

**注意事项**：边框宽度使用 `1px`（不随字体缩放），其他尺寸使用 `rem`。

---

## 4. 常见问题速查

| 问题 | 原因 | 解决方案 |
|------|------|---------|
| 图片底部有空白 | 图片默认是inline元素 | `display: block` 或 `vertical-align: middle` |
| 子元素浮动后父元素高度塌陷 | 浮动脱离文档流 | 父元素加 `overflow: hidden` 或使用 `display: flow-root` |
| margin重叠 | 相邻元素margin合并 | 使用padding代替其中一个margin，或使用flex/grid布局 |
| 响应式断点太多 | 过度适配 | 只覆盖3个断点：移动端(≤768px)、平板(769-1024px)、桌面(>1024px) |
| z-index无效 | 未设置position | z-index只对定位元素生效，需设置 `position: relative/absolute/fixed` |