java学习路线对比
传统学习路线
最新学习路线
总的来说就是先学前端三件套，再学前端框架，最后学后端框架SpringBoot
HTML和CSS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>📘 前端笔记 · HTML & CSS</title>
<!-- 使用 Google Font 提升阅读体验 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap" rel="stylesheet" />
<style>
/* ===== CSS 重置 & 基础 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #f8fafc;
color: #0b1120;
line-height: 1.6;
padding: 2rem 1rem;
}
.container {
max-width: 1100px;
margin: 0 auto;
background: white;
padding: 2.5rem 2.8rem;
border-radius: 28px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s;
}
/* ===== 标题区 ===== */
.header {
margin-bottom: 2.5rem;
border-bottom: 2px solid #eef2f6;
padding-bottom: 1.8rem;
}
.header h1 {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #2563eb, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.header .sub {
display: block;
font-size: 1rem;
color: #475569;
margin-top: 0.4rem;
font-weight: 400;
-webkit-text-fill-color: #475569;
background: none;
}
/* ===== 通用卡片 & 章节 ===== */
section {
margin-bottom: 3rem;
}
h2 {
font-size: 1.6rem;
font-weight: 600;
letter-spacing: -0.01em;
color: #0b1120;
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.2rem;
}
h2 .badge {
font-size: 0.75rem;
font-weight: 500;
background: #dbeafe;
color: #1d4ed8;
padding: 0.15rem 0.8rem;
border-radius: 40px;
letter-spacing: 0.01em;
}
h3 {
font-size: 1.1rem;
font-weight: 600;
margin: 1.6rem 0 0.6rem 0;
color: #1e293b;
}
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
margin: 1rem 0;
}
.card {
background: #f9fbfd;
border-radius: 18px;
padding: 1.4rem 1.6rem;
border: 1px solid #edf2f7;
transition: background 0.15s;
}
.card:hover {
background: #f1f5f9;
}
.card h4 {
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.3rem;
color: #0b1120;
}
.card p,
.card li {
color: #334155;
font-size: 0.95rem;
}
.card ul {
list-style: none;
padding: 0;
margin-top: 0.4rem;
}
.card ul li {
padding: 0.2rem 0 0.2rem 1.4rem;
position: relative;
}
.card ul li::before {
content: "▹";
position: absolute;
left: 0;
color: #2563eb;
font-weight: 600;
}
/* ===== 代码块 ===== */
.code-block {
background: #0b1120;
color: #e2e8f0;
padding: 1.2rem 1.6rem;
border-radius: 16px;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.9rem;
overflow-x: auto;
margin: 0.8rem 0 1.2rem 0;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
border: 1px solid #1e293b;
}
.code-block .comment {
color: #94a3b8;
font-style: italic;
}
.code-block .tag {
color: #f472b6;
}
.code-block .attr {
color: #67e8f9;
}
.code-block .value {
color: #fbbf24;
}
.code-block .selector {
color: #a78bfa;
}
.code-block .prop {
color: #60a5fa;
}
.inline-code {
background: #eef2f6;
color: #1e293b;
padding: 0.15rem 0.5rem;
border-radius: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
font-weight: 500;
}
/* ===== 布局示例 (flex / grid 展示) ===== */
.demo-box {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin-top: 0.6rem;
}
.demo-item {
background: #dbeafe;
color: #1e3a8a;
padding: 0.4rem 1rem;
border-radius: 40px;
font-size: 0.85rem;
font-weight: 500;
border: 1px solid #bfdbfe;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 0.6rem;
margin-top: 0.6rem;
}
.demo-grid .demo-item {
text-align: center;
border-radius: 12px;
padding: 0.5rem 0.2rem;
background: #e0e7ff;
border-color: #c7d2fe;
}
/* ===== 特殊标记 ===== */
.tip {
background: #ecfdf5;
border-left: 4px solid #10b981;
padding: 0.8rem 1.2rem;
border-radius: 12px;
margin: 1.2rem 0;
color: #065f46;
}
.tip strong {
color: #047857;
}
.warning {
background: #fffbeb;
border-left: 4px solid #f59e0b;
padding: 0.8rem 1.2rem;
border-radius: 12px;
margin: 1.2rem 0;
color: #92400e;
}
/* ===== 响应式 ===== */
@media (max-width: 700px) {
.container {
padding: 1.5rem 1.2rem;
}
.header h1 {
font-size: 2rem;
}
.grid-2col {
grid-template-columns: 1fr;
gap: 1rem;
}
.code-block {
font-size: 0.8rem;
padding: 1rem;
}
}
/* ===== 页脚 ===== */
.footer {
margin-top: 3rem;
border-top: 1px solid #e2e8f0;
padding-top: 1.5rem;
text-align: center;
color: #64748b;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<header class="header">
<h1>📘 HTML & CSS 笔记</h1>
<span class="sub">清晰 · 易懂 · 适合复习 —— 前端开发工程师必备基础</span>
</header>
<!-- ============================================================ -->
<!-- 第一部分：HTML -->
<!-- ============================================================ -->
<section>
<h2>🧩 HTML · 超文本标记语言 <span class="badge">骨架</span></h2>
<p style="color:#334155; margin-bottom:1.2rem;">
HTML 是网页的<strong>骨架</strong>，用来描述内容和结构。浏览器会解析 HTML 标签，渲染出我们看到的页面。
</p>
<div class="grid-2col">
<!-- 基础结构 -->
<div class="card">
<h4>📐 基础文档结构</h4>
<div class="code-block">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是一个段落。</p>
</body>
</html>
</div>
<ul>
<li><span class="inline-code"><!DOCTYPE html></span> 声明文档类型</li>
<li><span class="inline-code"><html></span> 根元素，<span class="inline-code">lang</span> 属性指定语言</li>
<li><span class="inline-code"><head></span> 元数据（字符集、标题、样式等）</li>
<li><span class="inline-code"><body></span> 可见内容</li>
</ul>
</div>
<!-- 常用标签 -->
<div class="card">
<h4>🏷️ 常用标签</h4>
<ul>
<li><strong>标题</strong>：<span class="inline-code"><h1></span> ~ <span class="inline-code"><h6></span></li>
<li><strong>段落</strong>：<span class="inline-code"><p></span></li>
<li><strong>链接</strong>：<span class="inline-code"><a href="url"></span></li>
<li><strong>图片</strong>：<span class="inline-code"><img src="..." alt="..."></span></li>
<li><strong>列表</strong>：<span class="inline-code"><ul></span> (无序) / <span class="inline-code"><ol></span> (有序)</li>
<li><strong>容器</strong>：<span class="inline-code"><div></span> (块级) / <span class="inline-code"><span></span> (行内)</li>
<li><strong>语义化</strong>：<span class="inline-code"><header></span>, <span class="inline-code"><main></span>, <span class="inline-code"><section></span>, <span class="inline-code"><footer></span> 等</li>
</ul>
<div class="tip" style="margin-top:0.6rem;">
💡 <strong>语义化</strong> 让代码更可读、更利于 SEO 和 accessibility。
</div>
</div>
</div>
<!-- 属性与表单 -->
<div class="grid-2col">
<div class="card">
<h4>⚙️ 属性 (Attributes)</h4>
<p>标签可以附加属性，提供额外信息。</p>
<div class="code-block">
<a href="https://example.com" target="_blank">链接</a>
<img src="photo.jpg" alt="描述文字" width="300">
</div>
<ul>
<li><span class="inline-code">href</span>：链接目标</li>
<li><span class="inline-code">src</span>：图片/资源路径</li>
<li><span class="inline-code">alt</span>：图片替代文字（无障碍）</li>
<li><span class="inline-code">class</span> / <span class="inline-code">id</span>：CSS/JS 钩子</li>
</ul>
</div>
<div class="card">
<h4>📝 表单 (Forms)</h4>
<p>用于收集用户输入。</p>
<div class="code-block">
<form action="/submit" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="username">
<button type="submit">提交</button>
</form>
</div>
<ul>
<li><span class="inline-code"><input></span>：<span class="inline-code">type</span> 有 text, email, password, checkbox, radio 等</li>
<li><span class="inline-code"><label></span> 关联 <span class="inline-code">for</span> 与 <span class="inline-code">id</span></li>
<li><span class="inline-code"><button></span> 或 <span class="inline-code"><input type="submit"></span></li>
</ul>
</div>
</div>
<div class="tip">
🧠 <strong>记住</strong>：HTML 负责 <em>内容</em> 和 <em>结构</em>，不要用 HTML 控制样式（那交给 CSS）。
</div>
</section>
<!-- ============================================================ -->
<!-- 第二部分：CSS -->
<!-- ============================================================ -->
<section>
<h2>🎨 CSS · 层叠样式表 <span class="badge">样式</span></h2>
<p style="color:#334155; margin-bottom:1.2rem;">
CSS 用来给 HTML 添加<strong>样式</strong>：颜色、布局、字体、动画…… 让页面变得美观且富有表现力。
</p>
<div class="grid-2col">
<!-- 引入方式 -->
<div class="card">
<h4>📥 三种引入方式</h4>
<ul>
<li><strong>行内样式</strong>：<span class="inline-code">style="color: red;"</span> (优先级高，不推荐)</li>
<li><strong>内部样式表</strong>：<span class="inline-code"><style></span> 写在 <span class="inline-code"><head></span> 中</li>
<li><strong>外部样式表</strong>：<span class="inline-code"><link rel="stylesheet" href="style.css"></span> (最佳实践)</li>
</ul>
<div class="code-block" style="margin-top:0.6rem;">
<!-- 外部样式表 -->
<link rel="stylesheet" href="main.css">
</div>
</div>
<!-- 基本语法 -->
<div class="card">
<h4>✍️ 基本语法</h4>
<div class="code-block">
<span class="selector">选择器</span> {
<span class="prop">属性</span>: <span class="value">值</span>;
<span class="prop">font-size</span>: <span class="value">16px</span>;
<span class="prop">color</span>: <span class="value">#333</span>;
}
</div>
<ul>
<li><strong>选择器</strong>：选中要应用样式的元素</li>
<li><strong>声明块</strong>：<span class="inline-code">{ }</span> 内包含一个或多个声明</li>
<li><strong>声明</strong>：<span class="inline-code">属性: 值;</span> 以分号结尾</li>
</ul>
</div>
</div>
<!-- 选择器 -->
<h3>🎯 常用选择器</h3>
<div class="grid-2col">
<div class="card">
<h4>基础选择器</h4>
<ul>
<li><span class="inline-code">*</span> 通配选择器（选中所有元素）</li>
<li><span class="inline-code">div</span> 标签选择器</li>
<li><span class="inline-code">.class</span> 类选择器（最常用）</li>
<li><span class="inline-code">#id</span> ID 选择器（唯一）</li>
</ul>
</div>
<div class="card">
<h4>组合与伪类</h4>
<ul>
<li><span class="inline-code">父 子</span> 后代选择器 (空格)</li>
<li><span class="inline-code">父 > 子</span> 子代选择器</li>
<li><span class="inline-code">.a.b</span> 同时拥有两个类</li>
<li><span class="inline-code">:hover</span> 鼠标悬停伪类</li>
<li><span class="inline-code">:nth-child(n)</span> 第 n 个子元素</li>
</ul>
</div>
</div>
<!-- 盒模型 & 布局 -->
<h3>📦 盒模型 (Box Model)</h3>
<div class="grid-2col">
<div class="card">
<h4>组成</h4>
<ul>
<li><strong>内容</strong> (content) — 文本或元素</li>
<li><strong>内边距</strong> (padding) — 内容与边框的距离</li>
<li><strong>边框</strong> (border) — 包裹内边距的线</li>
<li><strong>外边距</strong> (margin) — 元素与外部元素的距离</li>
</ul>
<div class="tip" style="margin-top:0.6rem;">
💡 <span class="inline-code">box-sizing: border-box;</span> 让 padding 和 border 包含在宽高内，更直观。
</div>
</div>
<div class="card">
<h4>示例</h4>
<div class="code-block">
.card {
<span class="prop">width</span>: <span class="value">200px</span>;
<span class="prop">padding</span>: <span class="value">20px</span>;
<span class="prop">border</span>: <span class="value">2px solid #ccc</span>;
<span class="prop">margin</span>: <span class="value">10px</span>;
<span class="prop">box-sizing</span>: <span class="value">border-box</span>;
}
</div>
</div>
</div>
<!-- 布局：Flex + Grid -->
<h3>🧱 布局 · Flexbox & Grid</h3>
<div class="grid-2col">
<div class="card">
<h4>📌 Flexbox (一维布局)</h4>
<p>适合排列一行或一列的元素。</p>
<div class="code-block">
.container {
<span class="prop">display</span>: <span class="value">flex</span>;
<span class="prop">justify-content</span>: <span class="value">center</span>;
<span class="prop">align-items</span>: <span class="value">center</span>;
<span class="prop">gap</span>: <span class="value">10px</span>;
}
</div>
<div class="demo-box">
<span class="demo-item">Flex 1</span>
<span class="demo-item">Flex 2</span>
<span class="demo-item">Flex 3</span>
</div>
<ul style="margin-top:0.4rem;">
<li><span class="inline-code">flex-direction</span>：主轴方向 (row / column)</li>
<li><span class="inline-code">justify-content</span>：主轴对齐</li>
<li><span class="inline-code">align-items</span>：交叉轴对齐</li>
</ul>
</div>
<div class="card">
<h4>📌 Grid (二维布局)</h4>
<p>适合同时控制行和列。</p>
<div class="code-block">
.grid {
<span class="prop">display</span>: <span class="value">grid</span>;
<span class="prop">grid-template-columns</span>: <span class="value">1fr 2fr 1fr</span>;
<span class="prop">gap</span>: <span class="value">16px</span>;
}
</div>
<div class="demo-grid">
<span class="demo-item">1</span>
<span class="demo-item">2</span>
<span class="demo-item">3</span>
<span class="demo-item">4</span>
</div>
<ul style="margin-top:0.4rem;">
<li><span class="inline-code">grid-template-columns</span>：定义列宽</li>
<li><span class="inline-code">grid-template-rows</span>：定义行高</li>
<li><span class="inline-code">fr</span> 单位：分配剩余空间</li>
</ul>
</div>
</div>
<!-- 常用属性速查 -->
<h3>🎨 常用 CSS 属性速查</h3>
<div class="grid-2col">
<div class="card">
<h4>文字 & 颜色</h4>
<ul>
<li><span class="inline-code">color</span>：文字颜色</li>
<li><span class="inline-code">font-size</span>：字号</li>
<li><span class="inline-code">font-weight</span>：粗细 (bold / 400 / 700)</li>
<li><span class="inline-code">text-align</span>：对齐 (left / center / right)</li>
<li><span class="inline-code">line-height</span>：行高</li>
</ul>
</div>
<div class="card">
<h4>背景 & 边框</h4>
<ul>
<li><span class="inline-code">background-color</span> / <span class="inline-code">background-image</span></li>
<li><span class="inline-code">border</span>：<span class="inline-code">1px solid #ddd</span></li>
<li><span class="inline-code">border-radius</span>：圆角</li>
<li><span class="inline-code">box-shadow</span>：阴影</li>
</ul>
</div>
</div>
<!-- 响应式 -->
<div class="card" style="background:#f1f5f9; border-color:#cbd5e1;">
<h4>📱 响应式设计 (Media Queries)</h4>
<p>让页面在不同屏幕尺寸下都能良好显示。</p>
<div class="code-block">
<span class="comment">/* 当屏幕宽度 ≤ 600px 时 */</span>
<span class="selector">@media (max-width: 600px)</span> {
.container {
<span class="prop">padding</span>: <span class="value">10px</span>;
}
.grid-2col {
<span class="prop">grid-template-columns</span>: <span class="value">1fr</span>;
}
}
</div>
<ul>
<li><span class="inline-code">max-width</span> / <span class="inline-code">min-width</span> 设定断点</li>
<li>移动优先：先写移动端样式，再用 <span class="inline-code">min-width</span> 逐步增强</li>
</ul>
</div>
<div class="warning">
⚠️ <strong>层叠与优先级</strong>：CSS 遵循「就近原则」和「权重」规则。<br />
<span class="inline-code">!important</span> > 行内样式 > ID > 类 > 标签 > 通配符。尽量少用 <span class="inline-code">!important</span>。
</div>
</section>
<!-- ============================================================ -->
<!-- 第三部分：小贴士 -->
<!-- ============================================================ -->
<section>
<h2>🧠 开发小贴士 <span class="badge">习惯</span></h2>
<div class="grid-2col">
<div class="card">
<h4>✅ 好习惯</h4>
<ul>
<li>使用语义化 HTML 标签</li>
<li>类名用 <span class="inline-code">kebab-case</span>，如 <span class="inline-code">.main-header</span></li>
<li>外部 CSS，结构与样式分离</li>
<li>善用浏览器开发者工具 (F12) 调试</li>
<li>移动端优先 + 响应式设计</li>
</ul>
</div>
<div class="card">
<h4>🔧 实用工具</h4>
<ul>
<li><strong>VS Code</strong> + 插件：Live Server, Prettier</li>
<li><strong>Can I Use</strong>：查询 CSS 属性兼容性</li>
<li><strong>Flexbox Froggy</strong> / <strong>Grid Garden</strong>：游戏式学习</li>
<li><strong>MDN Web Docs</strong>：权威参考</li>
</ul>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
✦ 前端笔记 · HTML & CSS 基础 ✦<br />
持续学习 · 保持好奇 · 写出优雅的代码
</footer>
</div>
<!-- end container -->
</body>
</html>
Comments NOTHING