前端开发超详细笔记：HTML + CSS 从入门到实战（完整版）
摘要
大家好，这篇是全网最细、最适合零基础、最适合复习的前端 HTML+CSS 完整学习笔记。我把所有知识点100% 整理、扩充、排版，内容覆盖：网页基础、HTML 语法、常用标签、CSS 基础、选择器、样式、盒子模型、浮动、定位、CSS3、Flex、移动端、响应式、Bootstrap、工程化技巧。
不管你是初学前端、备考、面试、复习，这一篇完全够用。
一、网页与 HTML 核心基础
1.1 什么是网页 / 网站
- 网站：在互联网上，使用 HTML 等规则制作的，用于展示内容的网页集合。
- 网页：构成网站的基本单元，由文字、图片、链接、音频、视频组成。
- 网页文件后缀：
.html/.htm，所以网页也叫 HTML 文件。 - 网页必须通过浏览器才能解析并显示。
1.2 什么是 HTML
HTML =HyperText Markup Language 超文本标记语言
- HTML不是编程语言，是标记语言。
- 核心：用标签描述网页结构。
“超文本” 两层含义：
- 超越文本：可以插入图片、声音、视频、动画。
- 超级链接：可以从一个页面跳转到另一个页面。
1.3 HTML 基本语法
- 标签由尖括号 < > 包裹，如
<html>。 - 绝大多数标签是双标签：开始标签 + 结束标签，如
<div> </div>。 - 少数是单标签：自成闭合，如
<br/><img/><input/>。
1.4 标签之间的关系
- 包含关系（嵌套）
<head> <title></title> </head>- 并列关系（同级）
<head></head> <body></body>1.5 HTML 骨架
任何网页都必须有以下 4 组标签：
| 标签 | 作用 | 说明 |
|---|---|---|
<html> | 根标签 | 整个页面最大的标签 |
<head> | 网页头部 | 存放配置信息 |
<title> | 网页标题 | 浏览器标签栏显示 |
<body> | 网页主体 | 所有可见内容都写这里 |
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> 内容 </body> </html>1.6 VS Code 快速开发技巧
- 新建文件：
Ctrl + N - 保存：
Ctrl + S→ 必须存为.html - 快速生成骨架：输入
!→ 按Tab - 选中相同单词：
Ctrl + D - 全局替换：
Ctrl + H - 视图放大 / 缩小：
Ctrl + / -
1.7 网页头部必备配置
1.语言设置
<html lang="zh-CN"> 中文 <html lang="en"> 英文作用：帮助浏览器、搜索引擎识别页面语言。
2.字符集（防乱码）
<meta charset="UTF-8">- 必须写，否则会出现中文乱码。
- 统一使用
UTF-8（万国码）。
二、HTML 常用标签
2.1 标题标签 h1~h6
<h1>一级标题</h1> <h2>二级标题</h2> ... <h6>六级标题</h6>特点：
- 文字加粗
- 独占一行
- 从 h1 到 h6 字号逐渐变小
2.2 段落标签 p
<p>这是一个段落</p>特点：
- 文本自动根据浏览器宽度换行
- 段落之间有默认空隙
2.3 换行标签 br
<br/>- 强制换行
- 单标签
- 不会产生垂直间距
2.4 无语义布局盒子
<div>：块级盒子，一行只能放一个，用来布局。<span>：行内盒子，一行可以放多个，用来装文字。
2.5 图片标签 img（重点）
<img src="图片路径" alt="替换文字" title="提示文字" width="500">属性：
src：必须属性，图片路径alt：图片加载失败时显示的文字title：鼠标放上去显示的提示width：宽度height：高度border：边框
2.6 路径（必会）
相对路径
- 同级：
pic.jpg - 下一级：
images/pic.jpg - 上一级：
../pic.jpg
绝对路径
- 本地完整路径：
D:\web\pic.jpg - 网络地址：
https://xxx.jpg
2.7 超链接标签 a（重点）
<a href="跳转地址" target="_blank">文字或图片</a>属性：
href：必须属性，目标地址target="_blank"：新窗口打开target="_self"：当前窗口打开（默认）
链接分类：
- 外部链接：
https://www.baidu.com - 内部链接：
index.html - 空链接：
# - 下载链接：指向文件 / 压缩包
- 锚点链接：跳转到页面指定位置
2.8 表格标签 table
结构：
<table> <tr> <th>表头</th> </tr> <tr> <td>单元格</td> </tr> </table>常用属性：
border：边框align：对齐cellpadding：内容与边框距离cellspacing：单元格之间距离- border-collapse: collapse合并细线边框
单元格合并：
- 跨列合并：
colspan="2" - 跨行合并：
rowspan="2"
口诀：目标单元格写合并，删除多余单元格
2.9 无序列表 ul（最常用）
<ul> <li>列表项1</li> <li>列表项2</li> </ul>- ul 里面只能放 li
- li 里面可以放任何标签
- 去掉小圆点：
list-style: none
2.10 表单标签（重点）
表单 = 收集用户信息 由三部分组成：表单域、表单控件、提示文字
表单域 form
<form action="提交地址" method="post/get"> 所有表单元素 </form>action：后台处理地址method：提交方式 get /post
输入框 input（单标签）
<input type="xxx">type 属性：
text：文本框password：密码框radio：单选按钮checkbox：复选框submit：提交按钮reset：重置按钮button：普通按钮file：文件上传
input 其他属性：
name：控件名称（后台用）value：默认值checked：默认选中maxlength：最大输入长度
label 标签（增强体验）
<label for="man">男</label> <input type="radio" id="man">点击文字自动选中控件。
下拉菜单 select
<select> <option>北京</option> <option selected>上海</option> </select>selected：默认选中
文本域 textarea
<textarea rows="5" cols="20"> 默认文字 </textarea>- 多行输入
- 实际开发用 CSS 控制大小
2.11 注释与特殊字符
注释：
<!-- 注释内容 -->快捷键：Ctrl + /
常用特殊字符：
- 空格：
- < 小于号：
< - >大于号：
> - 版权：
© - 人民币：
¥
三、CSS 基础：网页美容师
3.1 什么是 CSS
CSS =Cascading Style Sheets 层叠样式表作用：
- 设置文字样式
- 设置图片样式
- 设置布局与外观
- 实现结构 HTML 与样式 CSS 分离
3.2 CSS 语法
选择器 { 属性: 值; 属性: 值; }- 选择器：选中要改的标签
- 属性与值：键值对，必须以分号结束
3.3 CSS 三种引入方式
行内样式（不推荐）
<div style="color:red">文字</div>内部样式表
<head> <style> div { color: red; } </style> </head>外部样式表（开发首选）
<link rel="stylesheet" href="style.css">3.4 Chrome 调试工具（必会）
- 打开：
F12或 右键检查 - 左侧：HTML 结构
- 右侧：CSS 样式
- 黄色叹号：样式写错
- 无样式：类名错误 / 引入失败
四、CSS 选择器
4.1 基础选择器
| 选择器 | 写法 | 特点 | 权重 |
|---|---|---|---|
| 标签选择器 | p {} | 选中所有同类标签 | 1 |
| 类选择器 | .red {} | 可重复使用，最常用 | 10 |
| id 选择器 | #nav {} | 唯一，只能用一次 | 100 |
| 通配符 | * {} | 选中所有元素 | 0 |
多类名使用：
<div class="red font20">文字</div>4.2 复合选择器
后代选择器
ul li {}选中所有后代（儿子、孙子…）
子元素选择器
div > p {}只选亲儿子
并集选择器
div, p, span {}同时选中多组标签
链接伪类选择器（必须按顺序）
a:link未访问a:visited已访问a:hover鼠标经过（最重要）a:active鼠标按下focus 伪类
input:focus {}选中获得光标的表单
4.3 CSS3 新增选择器
属性选择器
input[type=text] {} div[class^=icon] {}结构伪类选择器
li:nth-child(2n) {}- 2n = 偶数
- 2n+1 = 奇数
伪元素
div::before {} div::after {}- 行内元素
- 必须有
content - 常用作清除浮动、装饰、小图标
五、CSS 文字与文本样式
5.1 字体样式
font-family：字体font-size：大小font-weight：粗细- normal = 400
- bold = 700
font-style：斜体
复合写法（必须掌握）：
font: 样式 粗细 大小/行高 字体;必须保留：大小 和 字体
5.2 文本样式
color：颜色text-align：对齐 left /center/righttext-indent：首行缩进 2emtext-decoration：装饰- none：去掉下划线
- underline：下划线
line-height：行高
六、元素显示模式
6.1 三种模式
块级元素div p h1 ul li
- 独占一行
- 可设宽高
- 可嵌套任意标签
行内元素span a em strong
- 一行多个
- 不能设宽高
- 只能嵌套行内 / 文字
行内块元素img input td
- 一行多个
- 可设宽高
6.2 模式转换
- 转块级：
display: block - 转行内：
display: inline - 转行内块：
display: inline-block
七、CSS 背景样式
background: 颜色 图片 平铺 滚动 位置;background-color：背景色background-image：背景图background-repeat：- no-repeat 不平铺
- repeat-x 横向平铺
background-position：位置background-attachment: fixed固定背景background:rgba(0,0,0,0.3)半透明
八、CSS 三大特性
层叠性样式冲突 →就近原则，后面覆盖前面。
继承性子元素继承父元素的文字样式。
优先级权重从低到高： 继承 < 标签 < 类 / 伪类 < id < 行内 < !important
复合选择器权重会叠加，但不会进位。
九、盒子模型（网页布局核心）
所有 HTML 标签都是矩形盒子。 盒子 = 内容 + 内边距 + 边框 + 外边距
9.1 边框 border
border: 1px solid red;单边：
- border-top
- border-right
- border-bottom
- border-left
圆角：
border-radius: 50%;正方形 → 圆形
9.2 内边距 padding
内容与边框之间的距离。 简写顺序：上 右 下 左
⚠️ 注意：padding 会撑大盒子。
9.3 外边距 margin
盒子与盒子之间的距离。
块级盒子水平居中：
width: xxx; margin: 0 auto;9.4 清除默认内外边距
* { margin: 0; padding: 0; }9.5 CSS3 盒子模型（不会撑大）
box-sizing: border-box;- width 包含 border + padding
- 开发必用
9.6 盒子阴影
box-shadow: 水平 垂直 模糊 大小 颜色 inset;十、浮动 float（布局神器）
10.1 浮动特点
- 脱标：脱离标准流，不占位置
- 浮动元素贴靠在一起
- 任何元素浮动后都具有行内块特性
10.2 浮动布局规则
- 父级标准流排上下
- 子级浮动排左右
- 一个浮动，全都浮动
10.3 清除浮动（解决父级高度塌陷）
方法：
- 额外标签法
- 父级 overflow:hidden
- 伪元素清除浮动（推荐）
.clearfix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { *zoom: 1; }十一、定位 position（精准摆放）
定位 = 定位模式 + 边偏移（top/left/bottom/right）
11.1 四种定位
静态定位 static默认，无效果。
相对定位 relative
- 相对于自己原来位置移动
- 不脱标，保留位置
- 做绝对定位的父级
绝对定位 absolute
- 相对于最近的有定位的祖先移动
- 脱标，不占位置
- 无定位祖先 → 相对浏览器
固定定位 fixed
- 相对于浏览器可视区
- 滚动页面不动
- 脱标
11.2 子绝父相（最重要口诀）
- 子：绝对定位
- 父：相对定位
作用：子元素自由移动，父元素约束范围。
11.3 层级 z-index
z-index: 999;- 数值越大越在上
- 只有定位元素有效
十二、元素显示与隐藏
display: none隐藏，不占位置（最常用）visibility: hidden隐藏，保留位置overflow: hidden隐藏超出盒子的内容
十三、CSS3 高级特性
13.1 2D 转换 transform
移动
transform: translate(x, y);百分比相对于自身。
旋转
transform: rotate(45deg);缩放
transform: scale(0.8);中心点
transform-origin: center bottom;综合写法：位移永远放前面
13.2 过渡 transition
transition: all 0.5s;13.3 动画 animation
定义动画
@keyframes move { 0% { transform: translate(0); } 100% { transform: translate(100px); } }使用动画
animation: move 2s infinite;13.4 3D 转换
- 透视
perspective - 3D 呈现
transform-style: preserve-3d
十四、HTML5 新特性
14.1 语义化标签
<header>头部<nav>导航<section>区域<article>文章<aside>侧边栏<footer>底部
14.2 多媒体
- 视频
<video src="xxx.mp4" controls muted autoplay> - 音频
<audio src="xxx.mp3" controls>
谷歌浏览器：视频静音才能自动播放。
14.3 新增 input 类型
emailurldatenumbersearchcolor
14.4 新增表单属性
required必填placeholder提示文字autofocus自动聚焦multiple多文件上传
十五、移动端开发核心
15.1 视口 viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">15.2 适配方案
rem 适配rem = 相对于 html 字体大小的单位。
flexible.js淘宝方案，自动把屏幕分为 10 等份。
vw 适配1vw = 屏幕宽度的 1%。
15.3 二倍图
高清屏幕使用 2 倍图，避免模糊。
15.4 移动端常用样式
box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-appearance: none;十六、Flex 布局（移动端首选）
16.1 原理
给父盒子加display: flex，控制子元素排列。
16.2 父元素属性
flex-direction主轴方向justify-content主轴对齐align-items侧轴对齐（单行）align-content侧轴对齐（多行）flex-wrap是否换行
16.3 子元素属性
flex: 1占满剩余空间align-self单独对齐order调整顺序
十七、响应式 + Bootstrap
17.1 媒体查询
@media screen and (min-width:768px) { 样式 }17.2 Bootstrap
- 移动优先
- 12 列栅格系统
- 容器：
.container/.container-fluid - 列类：
.col-xs-.col-sm-.col-md-.col-lg-
十八、前端工程化实战技巧
- CSS 初始化：清除默认样式
- 精灵图：减少 HTTP 请求
- 字体图标：不失真、可改色
- SEO 三要素：title / description / keywords
- favicon.ico：网站图标
十九、完整学习路线
- HTML 结构 → 会写页面骨架
- CSS 样式 → 会美化页面
- 浮动 + 定位 → 会 PC 端布局
- CSS3 → 会做动效
- Flex → 会移动端布局
- 响应式 + Bootstrap → 会做适配页面
这份前端学习内容全面覆盖了 HTML 结构、CSS 样式、布局核心、CSS3 动效、Flex 弹性布局、移动端适配与响应式开发，从最基础的网页概念、标签语法、选择器样式，到浮动、定位、盒子模型这些布局关键，再到移动端与工程化实战，是一套完整且能直接落地的前端入门体系。只要你按顺序一步步理解、动手练习，不用死记硬背也能快速掌握。前端学习没有那么难，坚持写、坚持练、多做页面，你很快就能独立做出完整网页，越来越自信，越学越有成就感，继续加油，你一定可以稳稳学会、学好！