一篇文章梳理 HTML + CSS 核心知识（含响应式与 Sass）

文章目录

- [1️⃣ HTML：网页结构的基础](#1️⃣ HTML：网页结构的基础)
- - [1.1 HTML5 文档结构](#1.1 HTML5 文档结构)
  - [1.2 常见 HTML 元素](#1.2 常见 HTML 元素)
  - [1.3 表单（Form）](#1.3 表单（Form）)
- [2️⃣ CSS：让网页"好看起来"](#2️⃣ CSS：让网页“好看起来”)
- - [2.1 CSS 的三种使用方式（推荐顺序）](#2.1 CSS 的三种使用方式（推荐顺序）)
  - [2.2 常见 CSS 属性](#2.2 常见 CSS 属性)
  - [2.3 字体与边框](#2.3 字体与边框)
- [3️⃣ CSS 选择器（重点）](#3️⃣ CSS 选择器（重点）)
- - [3.1 基础选择器](#3.1 基础选择器)
  - [3.2 多元素选择器](#3.2 多元素选择器)
  - [3.3 层级选择器](#3.3 层级选择器)
  - [3.4 属性选择器](#3.4 属性选择器)
  - [3.5 伪类（Pseudo-class）](#3.5 伪类（Pseudo-class）)
- [4️⃣ CSS 特异性（非常重要）](#4️⃣ CSS 特异性（非常重要）)
- [5️⃣ 响应式设计（Responsive Design）](#5️⃣ 响应式设计（Responsive Design）)
- - [5.1 viewport](#5.1 viewport)
  - [5.2 Media Query](#5.2 Media Query)
- [6️⃣ 现代布局：Flexbox & Grid](#6️⃣ 现代布局：Flexbox & Grid)
- - [6.1 Flexbox（一维布局）](#6.1 Flexbox（一维布局）)
  - [6.2 Grid（二维布局）](#6.2 Grid（二维布局）)
- [7️⃣ Scss：CSS 的进阶工具](#7️⃣ Scss：CSS 的进阶工具)
- - [7.1 变量](#7.1 变量)
  - [7.2 嵌套](#7.2 嵌套)
  - [7.3 继承（extend）](#7.3 继承（extend）)
- [8️⃣ 总结](#8️⃣ 总结)

1️⃣ HTML：网页结构的基础

1.1 HTML5 文档结构

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>：声明 HTML5
HTML 负责结构，不负责样式

1.2 常见 HTML 元素

（1）文本与链接

html 复制代码

<a href="https://example.com">链接</a>

（2）图片

html 复制代码

<img src="image.jpg" alt="description">

（3）表格

html 复制代码

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>18</td>
  </tr>
</table>

1.3 表单（Form）

HTML 表单是用户输入的主要方式：

html 复制代码

<form>
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password">
  <input type="radio" name="gender">
  <input type="submit" value="提交">
</form>

常用属性说明：

属性	作用
`type`	输入类型
`placeholder`	占位提示
`name`	后端识别字段
`value`	默认值

2️⃣ CSS：让网页"好看起来"

2.1 CSS 的三种使用方式（推荐顺序）

❌ 内联样式（不推荐）
⚠️ <style> 标签
✅ 外部 CSS 文件（推荐）

css 复制代码

<link rel="stylesheet" href="style.css">

2.2 常见 CSS 属性

css 复制代码

div {
  color: red;
  font-size: 16px;
  margin: 20px;
  padding: 10px;
}

2.3 字体与边框

css 复制代码

p {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid black;
}

3️⃣ CSS 选择器（重点）

3.1 基础选择器

类型	示例
元素	`p`
class	`.box`
id	`#main`

3.2 多元素选择器

css 复制代码

th, td {
  border: 1px solid black;
}

3.3 层级选择器

css 复制代码

ul li { }     /* 后代 */
ul > li { }  /* 直接子元素 */

3.4 属性选择器

css 复制代码

a[href="https://facebook.com"] {
  color: red;
}

3.5 伪类（Pseudo-class）

css 复制代码

button:hover {
  background-color: orange;
}

4️⃣ CSS 特异性（非常重要）

优先级从高到低：

内联样式
ID 选择器
Class / 属性 / 伪类
元素选择器

css 复制代码

#foo { color: red; }  /* 胜出 */
h1 { color: blue; }

5️⃣ 响应式设计（Responsive Design）

5.1 viewport

css 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5.2 Media Query

css 复制代码

@media (min-width: 600px) {
  body { background-color: red; }
}

@media (max-width: 599px) {
  body { background-color: blue; }
}

6️⃣ 现代布局：Flexbox & Grid

6.1 Flexbox（一维布局）

css 复制代码

#container {
  display: flex;
  flex-wrap: wrap;
}

适合：横向 / 纵向排列，自适应换行

6.2 Grid（二维布局）

css 复制代码

#grid {
  display: grid;
  grid-template-columns: 200px 200px auto;
  gap: 20px;
}

适合：整体页面布局

7️⃣ Scss：CSS 的进阶工具

7.1 变量

scss 复制代码

$color: red;

ul { color: $color; }
ol { color: $color; }

7.2 嵌套

scss 复制代码

div {
  p { color: blue; }
  ul { color: green; }
}

7.3 继承（extend）

scss 复制代码

%message {
  font-size: 18px;
  padding: 20px;
}

.success {
  @extend %message;
  background: green;
}

8️⃣ 总结

HTML：负责结构
CSS：负责样式
Flexbox / Grid：负责布局
Media Query：负责响应式
Sass：负责工程化与复用