📘 HTML & CSS 笔记

清晰 · 易懂 · 适合复习 —— 前端开发工程师必备基础

🧩 HTML · 超文本标记语言 骨架

HTML 是网页的骨架，用来描述内容和结构。浏览器会解析 HTML 标签，渲染出我们看到的页面。

📐 基础文档结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <h1>你好，世界！</h1> <p>这是一个段落。</p> </body> </html>
  • <!DOCTYPE html> 声明文档类型
  • <html> 根元素，lang 属性指定语言
  • <head> 元数据（字符集、标题、样式等）
  • <body> 可见内容

🏷️ 常用标签

  • 标题：<h1> ~ <h6>
  • 段落：<p>
  • 链接：<a href="url">
  • 图片：<img src="..." alt="...">
  • 列表：<ul> (无序) / <ol> (有序)
  • 容器：<div> (块级) / <span> (行内)
  • 语义化：<header>, <main>, <section>, <footer> 等
💡 语义化 让代码更可读、更利于 SEO 和 accessibility。

⚙️ 属性 (Attributes)

标签可以附加属性，提供额外信息。

<a href="https://example.com" target="_blank">链接</a> <img src="photo.jpg" alt="描述文字" width="300">
  • href：链接目标
  • src：图片/资源路径
  • alt：图片替代文字（无障碍）
  • class / id：CSS/JS 钩子

📝 表单 (Forms)

用于收集用户输入。

<form action="/submit" method="POST"> <label for="name">姓名：</label> <input type="text" id="name" name="username"> <button type="submit">提交</button> </form>
  • <input>：type 有 text, email, password, checkbox, radio 等
  • <label> 关联 for 与 id
  • <button> 或 <input type="submit">
🧠 记住：HTML 负责 内容 和 结构，不要用 HTML 控制样式（那交给 CSS）。

🎨 CSS · 层叠样式表 样式

CSS 用来给 HTML 添加样式：颜色、布局、字体、动画…… 让页面变得美观且富有表现力。

📥 三种引入方式

  • 行内样式：style="color: red;" (优先级高，不推荐)
  • 内部样式表：<style> 写在 <head> 中
  • 外部样式表：<link rel="stylesheet" href="style.css"> (最佳实践)
<!-- 外部样式表 --> <link rel="stylesheet" href="main.css">

✍️ 基本语法

选择器 { 属性: 值; font-size: 16px; color: #333; }
  • 选择器：选中要应用样式的元素
  • 声明块：{ } 内包含一个或多个声明
  • 声明：属性: 值; 以分号结尾

🎯 常用选择器

基础选择器

  • * 通配选择器（选中所有元素）
  • div 标签选择器
  • .class 类选择器（最常用）
  • #id ID 选择器（唯一）

组合与伪类

  • 父 子 后代选择器 (空格)
  • 父 > 子 子代选择器
  • .a.b 同时拥有两个类
  • :hover 鼠标悬停伪类
  • :nth-child(n) 第 n 个子元素

📦 盒模型 (Box Model)

组成

  • 内容 (content) — 文本或元素
  • 内边距 (padding) — 内容与边框的距离
  • 边框 (border) — 包裹内边距的线
  • 外边距 (margin) — 元素与外部元素的距离
💡 box-sizing: border-box; 让 padding 和 border 包含在宽高内，更直观。

示例

.card { width: 200px; padding: 20px; border: 2px solid #ccc; margin: 10px; box-sizing: border-box; }

🧱 布局 · Flexbox & Grid

📌 Flexbox (一维布局)

适合排列一行或一列的元素。

.container { display: flex; justify-content: center; align-items: center; gap: 10px; }
Flex 1 Flex 2 Flex 3
  • flex-direction：主轴方向 (row / column)
  • justify-content：主轴对齐
  • align-items：交叉轴对齐

📌 Grid (二维布局)

适合同时控制行和列。

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; }
1 2 3 4
  • grid-template-columns：定义列宽
  • grid-template-rows：定义行高
  • fr 单位：分配剩余空间

🎨 常用 CSS 属性速查

文字 & 颜色

  • color：文字颜色
  • font-size：字号
  • font-weight：粗细 (bold / 400 / 700)
  • text-align：对齐 (left / center / right)
  • line-height：行高

背景 & 边框

  • background-color / background-image
  • border：1px solid #ddd
  • border-radius：圆角
  • box-shadow：阴影

📱 响应式设计 (Media Queries)

让页面在不同屏幕尺寸下都能良好显示。

/* 当屏幕宽度 ≤ 600px 时 */ @media (max-width: 600px) { .container { padding: 10px; } .grid-2col { grid-template-columns: 1fr; } }
  • max-width / min-width 设定断点
  • 移动优先：先写移动端样式，再用 min-width 逐步增强
⚠️ 层叠与优先级：CSS 遵循「就近原则」和「权重」规则。
!important > 行内样式 > ID > 类 > 标签 > 通配符。尽量少用 !important。

🧠 开发小贴士 习惯

✅ 好习惯

  • 使用语义化 HTML 标签
  • 类名用 kebab-case，如 .main-header
  • 外部 CSS，结构与样式分离
  • 善用浏览器开发者工具 (F12) 调试
  • 移动端优先 + 响应式设计

🔧 实用工具

  • VS Code + 插件：Live Server, Prettier
  • Can I Use：查询 CSS 属性兼容性
  • Flexbox Froggy / Grid Garden：游戏式学习
  • MDN Web Docs：权威参考