🚀 前端开发进阶之路：HTML/CSS/JS 全记录
这是一份关于前端基础（HTML、CSS、JavaScript、jQuery、Bootstrap）的详细学习笔记。
📅 Day 01：HTML 标签起步
📚 课程介绍
- 前端三剑客： HTML、CSS、JavaScript
- 进阶工具： jQuery、Bootstrap (UI)
- 作业平台： houdu.online（注意：账号权限变动需重新登录）
💻 电脑基础操作
- 开关机： 正常关机，不要强按电源键（保护硬盘）。
- 系统更新： Windows 更新只能延缓，不能彻底暂停。
- 文件管理： 区分文件与文件夹，掌握文件后缀名。
- 压缩解压： 掌握常规解压/压缩操作。
- VS Code： 强大的扩展性，支持 Python、C（需 MinGW 编译器）等。
📅 Day 02：HTML 结构深化
一、HTML 核心概念
-
超文本标记语言： 使用标记操作页面。
-
标记类型：
-
单标记：
<标签>或<标签/>（无内容）。 -
双标记：
<标签>内容</标签>。 -
嵌套关系：
<div>(爷) -><p>(父) -><a>(子)。 -
注释：
`（快捷键：Ctrl + /`）。 -
基本结构：
HTML
<html>
<head>
<meta charset='UTF-8'>
<title>页面标题</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
二、基础块标签
<div>：基础块标签，自带换行。<p>：段落标签（注意：内部不能嵌套<div>，会被强行截断）。<h1>~<h6>：六级标题，字体由大到小。- Favicon 设置：
<link rel="icon" href="favicon.ico">（写在<head>中）。
📅 Day 03：HTML 功能标签 & CSS 选择器
一、列表与格式
- 无序列表：
<ul>+<li>（小圆点）。 - 有序列表：
<ol>+<li>（数字排序）。 - 行内样式标签：
- 加粗：
<b>、<strong> - 倾斜：
<i>、<em> - 下划线：
<u>、<ins> - 删除线：
<s>、<del> - 下标：
<sub>| 上标：<sup> - 预格式化：
<pre>（保留代码中的空格和换行）。
二、超链接与路径
- 路径分类： *
绝对路径（盘符开始） 相对路径（常用，./当前，../上级）网络路径（URL）。- 跳转控制：
target="_self"(当前页) 或target="_blank"(新页面)。 - 锚点定位： 使用
href="#id"跳转到指定 ID 的标签。
三、图片标签
<img src="路径" alt="失败文案">
四、CSS 入门与选择器
- 实体符：
(空格),>(>),<(<),©(©)。 - 样式引入： * 行内样式 (
style="...") - 内部样式 (
<style>标签) - 外部样式 (
<link rel="stylesheet" href="...">) - 选择器大全：
- 标签选择器：
h1 { color: red; } - Class 选择器：
.name { ... } - ID 选择器：
#name { ... } - 通配符：
* { ... } - 属性选择器：
[src^='https'](开头),[src$='.pdf'](结尾),[src*='runoob'](包含)。 - 优先级权重： *
!important> 内联样式 > ID > 类 > 标签 > * > 继承。 - 组合选择器：
- 后代：
.box p(空格) - 子代：
.box > span(大于号) - 相邻兄弟：
.box p + a(加号，紧跟其后的一个) - 关联兄弟：
.box p ~ a(波浪线，后面所有的) - 复合选择器：
div.box#id(紧挨着，高精度) - 伪类选择器：
:link,:visited,:hover,:active:focus(焦点):nth-child(n)(第 n 个，odd奇数，even偶数)
📅 Day 04：CSS 盒子模型
一、权重计算 ⚖️
- 质量胜过数量。按照 "ID > 类 > 标签" 的顺序逐级对比。
二、盒子模型组成
- Width/Height： 宽高。
- Padding： 内边距（影响盒子大小）。
- Border： 边框。
- Margin： 外边距（盒子间的距离）。
- 居中技巧：
margin: auto;（仅限块盒子）。 - 穿透/合并： 注意垂直方向的外边距合并现象。
- 怪异盒模型：
box-sizing: border-box;（宽高包含 Padding 和 Border）。
📅 Day 05：文字样式与布局
一、盒子类型
- Block (块级)： 独占一行，可设宽高。
- Inline (行内)： 随内容走，不可设宽高，不支持上下 Margin。
- Inline-block (行内块)： 既能设宽高，又能在一行显示。
二、文字属性 ✍️
- 单位：
px,em(倍数),rem(根元素倍数),vh/vw(视口高度宽度)。 - 颜色： 单词、
#16进制、rgb/rgba(带有透明度)。 - 粗细：
font-weight: 700(粗),400(正常)。 - 装饰：
text-decoration: underline/line-through/none。 - 行高：
line-height。 - 复合写法：
font: italic 700 16px/1.5 "微软雅黑";
三、溢出处理
overflow: hidden(隐藏),scroll(滚动条),auto(按需)。- 弹性布局：
display: flex;(让盒子横着排)。
📅 Day 06：文本进阶与背景
一、文本控制
text-align: justify(两端对齐)。text-indent: 2em(首行缩进)。word-break: break-all(强制截断换行)。- 省略号三部曲：
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
二、背景属性 🖼️
background-image: url();background-repeat: no-repeat;background-size: cover(铺满) /contain(完整)。background-attachment: fixed;(背景固定)。- 渐变：
linear-gradient(颜色1, 颜色2)。 - 精灵图： 通过
background-position移动背景图位置来显示不同小图标。
📅 Day 07：布局扩展与圆角阴影
一、样式美化
- 圆角：
border-radius: 50%(圆形)。 - 阴影：
box-shadow: 水平 垂直 模糊 扩展 颜色 (inset内阴影)。 - 透明度：
opacity: 0.5(影响内容)。 - 过渡：
transition: 1s;(属性变化的过程)。
二、浮动布局 (Float)
float: left/right;- 特点： 脱离文档流，不遮挡文字，需清除浮动（
clear: both）。
三、Flex 弹性布局（重点）🌟
- 容器属性：
flex-direction:row(水平) /column(垂直)。justify-content:center/space-between(两端) /space-evenly(均匀)。align-items: 交叉轴对齐（单行）。
📅 Day 08：Flex 进阶与定位
一、Flex 项目属性
order: 排序。flex-grow: 放大比例。flex-shrink: 缩小比例。align-self: 单独控制某个项目的对齐。
二、定位 (Position) 📍
- Fixed (固定定位)： 相对浏览器窗口，脱离文档流。
- Relative (相对定位)： 相对自身原始位置，不脱离文档流。
- Absolute (绝对定位)： 相对最近的非 static 祖先元素，脱离文档流。
- 层级：
z-index(数值越大越在上层)。
📅 Day 09：JavaScript 基础
一、JS 引入与输出
- 方式：
<script>标签或外部.js文件。 - 输出：
console.log(),alert(),confirm(),prompt()。 - DOM 输出：
document.body.innerHTML = ""。
二、变量与数据类型
- 声明：
let(变量),const(常量),var(旧版)。 - 类型： * Number, String (模板字符串用
), Boolean, Null, Undefined. - 复合型： 数组
[], 对象{}。
三、DOM 操作 🖱️
- 获取：
querySelector(),querySelectorAll()。 - 类名操作：
classList.add(),.remove(),.toggle(),.replace()。 - 内容操作：
.innerHTML(解析标签),.innerText(纯文本)。
📅 Day 10-12：JS 语法、逻辑与常用方法
一、逻辑判断
- 隐式转换：
+遇字符串变字符串；- * /遇字符串变数字。 - 条件句：
if...else,switch...case,三元表达式 (?)。 - 循环：
for,while,do-while,for...of(值),for...in(键)。
二、字符串 & 数组方法 🛠️
- 字符串：
slice(),substring(),replace(),split(),indexOf(),JSON.stringify/parse。 - 数组：
push/pop(末尾),unshift/shift(头部),splice(增删改),sort(),reverse(),map(),filter(),forEach()。
📅 Day 13-14：函数、数学与日期
一、函数 (Function) ⚙️
- 形参实参：
arguments接收所有参数。 - 匿名函数： 可作为变量或回调。
- 箭头函数：
(p) => { ... }(简洁写法，注意this指向)。
二、内置对象
- Math：
random(),ceil(),floor(),round(),max/min()。 - 定时器：
setTimeout(一次),setInterval(循环)。 - Date：
getFullYear(),getMonth()(0-11),getTime()(时间戳)。
📅 Day 15-17：类、Promise、AJAX 与框架
一、面向对象 (Class) 🏛️
class定义类，constructor构造函数，extends继承，super()调用父类。- Getter/Setter： 监听和设置属性。
二、异步编程 (Promise) ⏳
- Promise 状态：
resolve(成功),reject(失败)。 - Async/Await： 异步代码同步化的终极方案。
三、数据交互 (AJAX/Axios)
- AJAX：
XMLHttpRequest对象，五种状态码。 - Axios： 基于 Promise 的流行请求库。
四、常用框架 🧰
- jQuery： 简洁的 DOM 操作，
$()选择器，.on()事件。 - Bootstrap： 响应式 UI 框架，利用栅格系统快速建站。