VS Code 轻量替代 IDEA：Spring Boot 开发提效实践
2026/9/14 21:02:22
2026 年如果你打算从零开始学前端，大概率会被一个词先拦住：到底该从 HTML5 和 CSS3 开始，还是直接从 Vue、React 这些框架开始？
我的建议很直接：先踏实走完 HTML5 和 CSS3 这一程，不然后面只会越学越虚。这不是老掉牙的“基础很重要”式说教，而是因为现在页面上所有看起来高级的东西——视频播放、响应式布局、CSS 变量、动画、图表、卡片式界面——底层都离不开这套结构化加样式化的协作规则。今天你省掉的时间，后面大概率会加倍还给“为什么这段代码没按我预期渲染”。
这篇文章按保姆级的思路来写。不预设你已经具备多少基础，也不为了显得专业而堆术语。我会把零基础入门 HTML5 和 CSS3 的完整路径拆成六个部分：它到底改变了什么、最小页面怎么跑通、哪些核心知识值得花时间、一个完整实战项目怎么做、以及页面出问题后怎么排查。每段都会解释为什么这样写、为什么这样学，而不是只丢一个语法清单给你背。
1. 先别急着敲代码，想清楚 HTML5 和 CSS3 到底改变了什么
很多新手容易把入门理解成“学一堆标签和属性”。顺着这种思路，学习会变得非常枯燥：记完 div、p、a，又记 color、font-size、margin，最后自己写页面时还是不知道怎么组织。
真正值得先花半小时理解的问题，是 HTML5 和 CSS3 在浏览器生态里到底扮演了什么样的角色。理解了这一点，后面每一个标签、每一条属性都有了意义。
1.1 HTML5 不只是新标签，它把“语义”和“多媒体”变成了页面基础能力
在 HTML5 出现之前，页面结构基本是靠 div 和 class 一层层套出来的。比如一个页面顶部、导航、内容区、侧边栏，常见写法是：
<div class="header">顶部区域</div> <div class="nav">导航链接</div> <div class="content">主体内容</div> <div class="sidebar">侧边栏</div>这种写法并不是不能用，但它带来的问题是：机器可读性很差。浏览器、搜索引擎、屏幕阅读器很难判断这个 div 到底是导航还是内容，只能通过 class 名字去猜。而 class 命名规则又五花八门，维护成本自然就上来了。
HTML5 的核心变化之一，是把一批语义化标签变成了浏览器原生认识的结构单位。比如：
<header>顶部区域</header> <nav>导航链接</nav> <main> <article>主要内容</article> <aside>侧边栏</aside> </main> <footer>底部区域</footer>这样一来，页面的骨架在 HTML 层面就有了明确含义。哪个区域是导航、哪个区域是主体、哪个区域是补充信息，不需要靠“人工阅读代码”才分得清。搜索引擎理解页面更容易，屏幕阅读器给视障用户朗读页面时也更准确，团队协作时新人接手项目也能更快找到要改住的区块。
这还只是语义化层面的变化。HTML5 还让浏览器原生支持了视频、音频、Canvas 绘图、地理位置、本地存储等能力。换句话说，浏览器不再只是一个“展示文档”的工具，而变成了一个可以承载应用级体验的平台。
对零基础学习者来说，最该记住的一点是：HTML5 不是一堆零散标签的集合，它是一套让页面从“看起来像人写的”变成“结构自解释”的改进方案。
1.2 CSS3 看起来只是样式升级，真正改变的是布局方式和可维护性
很多刚接触 CSS3 的人会误以为它只是“多了圆角、阴影和渐变”。这些特性确实存在，但不值得把它们当作学习主线。CSS3 真正影响深远的，是把“页面布局”从一套绕来绕去的技巧，变成了一种更接近设计直觉的声明式描述。
以前实现一个自适应居中布局，可能需要浮动、清除浮动、计算宽度、处理边距，稍不小心页面就塌了。CSS3 里一个 Flexbox 属性就能解决大量一维布局问题；对于更复杂的二维页面网格，Grid 又比表格和浮动组合清晰得多。
CSS3 还带来了变量、动画、过渡、媒体查询等能力。尤其是 CSS 变量，让设计样式第一次有了“可编程”的感觉。开发者可以在项目根节点定义一套颜色、尺寸、间距变量，后续所有组件都能引用它们，改一套变量就能批量影响整个站点风格。
这背后的本质是：CSS3 把“样式”从一个个孤立的属性，逐渐变成了一套可组合、可继承、可响应变化的样式系统。这不只是在提升视觉效果，而是在降低页面的长期维护成本。
1.3 入门阶段最重要的一句话：先建“结构 + 样式”的协作模型
如果把一个页面比作一套房子，HTML 是建筑结构图，决定房间类型、功能和区域划分；CSS 是装修方案，决定墙面颜色、家具位置和视觉效果。结构图不准确，装修做得再精致也很难住得舒服；装修方案混乱，结构再合理，人走进去也会觉得糟糕。
很多新手容易犯的错，是 HTML 里全都用 div 堆，到了 CSS 阶段又想靠 class 强行命名找回结构。这就是“结构不清晰，样式来补救”的拖延式写法。短时间看页面效果还行，但一旦想加新模块、做响应式、做主题切换，就会非常痛苦。
所以在正式动手前，先在心里建立这个模型：写 HTML 时想清楚“这部分在语义上是什么”，写 CSS 时想清楚“这套样式在视觉上是哪种规则”。把这两个问题分开处理，后面的学习速度会比只背语法的人快很多。
2. 零基础先跑通一个最小页面，不要急着背语法
有了整体认知，接下来就该动手了。但这一步不要贪多，不要想着一下子把 HTML 和 CSS 的所有特性都学会。最适合零基础的第一目标是：在浏览器里跑出一个由自己的 HTML 和 CSS 控制的简单页面，并理解文件之间是怎么关联的。
2.1 搭建一个最少必要的本地学习环境
做静态页面不需要复杂工程化环境。建议的最小准备清单是：
| 工具 | 作用 | 说明 |
|---|---|---|
| Chrome 或 Edge 浏览器 | 预览页面、调试代码 | 内置开发者工具，入门阶段最常用 |
| VS Code 编辑器 | 编写 HTML、CSS、JS 文件 | 安装 Live Server 插件可获得自动刷新能力 |
| 一个项目文件夹 | 存放所有页面文件 | 比如my-site，里面先建index.html和css文件夹 |
目录结构只需要做到下面这样即可：
my-site/ ├── index.html └── css/ └── style.css如果暂时不想装 Live Server，也可以直接双击index.html用浏览器打开。两种方式都能开发。区别在于：用 Live Server 时，修改代码保存后浏览器会自动刷新，省去手动切换窗口的麻烦。
2.2 第一段 HTML 骨架，理解每个头部标签的含义
新建index.html，输入下面的内容：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个页面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>你好，HTML5</h1> <p>这是由 HTML 提供结构、CSS 提供样式的页面。</p> </body> </html>这里面的每一行都有作用，值得逐个理解：
<!DOCTYPE html>不是标签，而是一条文档类型声明。它告诉浏览器“当前文档使用 HTML5 标准模式解析”。如果没有这一行，浏览器可能会进入怪异模式，导致很多样式行为无法预测。<html lang="zh-CN">声明页面语言为简体中文，既帮助浏览器正确识别语言，也让屏幕阅读器等辅助技术按对应语言发音。<meta charset="UTF-8">设置字符编码为 UTF-8。页面上如果出现中文乱码，最常见原因就是这一行缺失或顺序不对。<meta name="viewport" ...>是移动端适配的关键设置。它告诉浏览器如何控制页面宽度和缩放比例，是响应式设计的基础。<link rel="stylesheet" href="css/style.css">把独立的 CSS 文件引入页面。这也是“结构与样式分离”的第一步。
新建css/style.css，写一个简单样式：
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; padding: 40px; color: #333; background-color: #f8f9fa; } h1 { color: #2c3e50; }保存后在浏览器里打开index.html，你会看到页面标题、段落和背景色都按 CSS 生效了。这个流程虽然简单，但它是以后所有前端开发的原子链路：HTML 提供内容骨架，CSS 描述视觉样式，浏览器把它们合成为最终页面。
2.3 先跑通“改一下就能看到变化”的正反馈
学习前端最怕的是一口气看太多理论，半天不动手。跑通最小页面后，建议立刻试几个小改动，建立正反馈：
- 把
<h1>标题文字改成你自己的名字。 - 在 CSS 里把
font-size改成更大或更小，保存，观察变化。 - 新增一行
<p>段落，观察文字自动换行效果。 - 把
background-color换成你喜欢的色值。
这些小改动看似简单，但能帮你快速理解文件关联、浏览器渲染和样式覆盖逻辑。先让这套链路跑顺，再往里面填充更多知识点。
3. 语义化、表单、多媒体、Canvas：四个最容易让新手区分新旧的入口
熟悉了最小页面之后，可以开始扩展对 HTML5 的认知。以下几个方向最容易让新手感受到“新版能力”和“老式写法”的差异，同时也非常贴合日常开发需求。
3.1 语义化标签：页面结构不再是“一屋子 div”
实际开发里，一个页面通常包含顶部导航、主体内容、文章列表、侧边栏、页脚等部分。用 HTML5 语义化标签写出来的结构清晰很多：
<header class="site-header"> <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于</a></li> <li><a href="#projects">项目</a></li> </ul> </nav> </header> <main> <section id="about"> <h2>关于我</h2> <p>一段个人介绍。</p> </section> <section id="projects"> <h2>作品展示</h2> <article> <h3>项目名称</h3> <p>项目描述。</p> </article> </section> </main> <footer> <p>© 2026</p> </footer>这样写出来的页面，一看 HTML 就能知道每个区块的作用。section表示一个主题区块，article表示一篇独立内容，main表示当前页面主体，nav表示导航区域。它们不是“神秘的高级技巧”，而是让结构回归本来含义。
新手常见误区是“只要坚持用 div 也能做出来”。确实能做出来，但长期维护和团队协作时，语义化的收益会越来越明显。如果你自己写项目，就尽量从第一版开始用语义化标签，不要等页面变大了再返工。
3.2 表单控件升级：原生校验和移动键盘体验
HTML5 给表单带来的变化很实际。以前想校验用户填写的邮箱是否合法，往往要靠 JavaScript 写正则表达式；现在可以直接用 type 和 required 声明需求：
<form action="#" method="post"> <label for="email">邮箱</label> <input type="email" id="email" name="email" required placeholder="name@example.com"> <label for="birthday">出生日期</label> <input type="date" id="birthday" name="birthday"> <label for="age">年龄</label> <input type="number" id="age" name="age" min="0" max="150"> <button type="submit">提交</button> </form>这段代码里，type="email"会触发浏览器的原生格式校验，required表示必填，type="date"会弹出一个日期选择器，type="number"配合min和max能限制数字范围。移动端上，不同的type还会调起不同键盘布局，比如type="tel"弹出数字键盘，type="email"弹出带@和.的键盘。这是一个很容易被初学者忽略的体验细节。
需要提醒的是，浏览器的原生校验样式在不同浏览器里表现并不一致。如果你希望在各个浏览器里看起来完全一样，后续还需要通过 CSS 配合筛选状态和少量 JavaScript 做统一处理。入门阶段先用原生能力就好，它会帮你规范后续的输入设计思路。
3.3 音视频标签：不要只写一个 video 标签就完事
HTML5 的<video>和<audio>标签让页面可以原生播放媒体文件，不需要第三方插件。但很多新手在写视频时只写一个 src，结果在部分浏览器或设备上黑屏，完全不知道哪里出了问题。
浏览器对 HTML5 播放器的支持并不是“支持与否”这么简单，更关键的是“支持哪种视频编码格式”。不同浏览器对 MP4、WebM、Ogg 等格式的兼容情况不一样，对 H.264、VP9、AV1 等编码的支持也有差异。稳妥的写法是提供多个来源，让浏览器自己选择第一个能播放的：
<video controls width="640" poster="poster.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 你的浏览器不支持 video 标签，请升级浏览器后观看。 </video>这背后是一个重要的前端思路：渐进增强。不同用户环境能力不同，页面需要从“基础可用”开始，具备条件的浏览器逐步获得更丰富的体验。
3.4 Canvas 和 SVG：页面里两条不同的绘图路线
HTML5 的 Canvas 和 SVG 都能画图，但适用场景完全不同。
SVG 描述的是矢量图形，可以理解为一组“图形元素”。它有 DOM 结构，能被 CSS 和 JavaScript 修改，适合做图标、标志、简单插画。Canvas 则是一块“像素画布”，需要通过脚本逐像素绘制，更接近画画，适合做游戏画面、图表、图像处理等高频重绘场景。
Canvas 在 HTML 中只是画布占位：
<canvas id="myChart" width="400" height="200"></canvas>真正的绘制要在 JavaScript 里获取 canvas 上下文再操作。入门阶段不一定要马上深入，但要理解它们的存在。很多网页工具，比如浏览器端的网络测速页面，会利用 HTML5 的 Fetch 接口下载测试文件、用 performance 记录耗时，再通过 Canvas 绘制速度图表。这种组合用法就是 HTML5 能力在真实项目里的体现。
4. 真正能提升页面能力的 CSS3 核心：选择器、Flexbox、Grid、变量、动画
CSS3 的内容很多，如果全部展开，新手很容易被细节淹没。我的建议是先抓住下面几个真正影响日常开发的点。它们互相配合，能覆盖大部分静态页面的视觉和布局需求。
4.1 选择器：不要只会用 class 选择器
很多新手写的 CSS 全是.box {}这种 class 规则，遇到需要“第一个子元素”“聚焦状态”“链接末尾加箭头”就不知道怎么办了。CSS3 选择器提供了更贴近语义的匹配方式。
几个最常用的例子：
li:first-child { font-weight: bold; } input:focus { border-color: #3498db; outline: none; } a::after { content: "→"; margin-left: 4px; }这里需要区分伪类和伪元素。伪类名前面是单个冒号，描述元素的某种状态，比如:hover、:focus、:first-child。伪元素名前面是双冒号，用来表示元素内部的某段结构或生成内容，比如::before、::after。理解这个区别后，很多神奇样式就变得有规律可循了。
顺带提醒一下，网上一旦把“CSS3 伪静态”这种概念混进来，容易让新手跑偏。伪静态经常指的是服务端 URL 重写方案，跟 CSS 本身的伪类、伪元素不是一回事。学习 CSS3 时，把注意力放在选择器和层叠规则上就好。
4.2 Flexbox：先解决一维布局
Flexbox 是 CSS3 里最值得优先掌握的布局方案。它解决的核心问题是“在一行或一列里，怎么分配空间、怎么对齐项目”。一个最简单的导航菜单居中效果：
.nav { display: flex; justify-content: center; align-items: center; gap: 16px; } .nav ul { display: flex; list-style: none; gap: 24px; }justify-content控制主轴方向上的排列，align-items控制交叉轴上的对齐，gap控制项目间距。这套规则直观且可预测，比浮动加 margin 的方案稳定太多。
4.3 Grid：遇到二维页面布局时，用它解放手
Grid 适合更复杂的二维布局，也就是同时控制行和列的排列。最常见的响应式卡片列表：
.project-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }单独看这行代码，似乎只是“网格容器”，但实际效果非常强大：当容器足够宽时，每行会放下尽可能多的卡片；当容器变窄时，卡片会自动换行到下一行。repeat(auto-fit, minmax(280px, 1fr))的含义是“让弹性列在 280px 到剩余空间之间自动分配”。
建议新手先掌握 Flexbox，再用 Grid 处理页面级别的大区块。不要把两个方案对立起来，实际项目里它们经常配合使用。
4.4 CSS 变量和动画：让样式系统从静态走向动态
CSS 变量可以让你把重复的颜色、间距、字号提取成命名常量，大幅提高可维护性。一个简单示例：
:root { --primary-color: #3498db; --text-color: #333; --space-lg: 32px; } body { color: var(--text-color); padding: var(--space-lg); } a { color: var(--primary-color); }改--primary-color一个值，全站链接和按钮主色都会跟着变。这是设计系统的雏形，也是后续接触更复杂主题方案的基础。
动画部分先把transition和animation的区别搞清楚。transition是从 A 状态变到 B 状态的过渡效果，通常配合 hover、focus 这类状态变化；animation则是在定义好的关键帧之间循环或播放，适合更复杂的动画序列。入门阶段建议少用花哨动画，多用来增强交互反馈，比如按钮悬停时轻微变色、卡片移入时阴影渐变，这些细节足以提升页面质感。
5. 实战项目：做一个完整的个人作品集首页
理论学再多，都不如把一个完整页面从零做出来。这个实战项目非常适合零基础：个人作品集首页。它不依赖后端，不需要数据库，但涵盖了语义化结构、响应式布局、CSS 变量、表单和可访问性等多个核心知识点。
5.1 先画出信息结构，再写代码
不要一上来就打开编辑器敲代码。先花几分钟确定页面里要放哪些内容，这是很多新手最容易跳过的步骤。
| 页面区域 | 内容 | 建议标签 |
|---|---|---|
| 顶部导航 | 站名、链接到各区块 | header+nav |
| Hero 区域 | 一句话自我介绍、行动按钮 | section |
| 关于区域 | 个人经历、技能亮点 | section |
| 作品展示 | 3 到 6 个作品卡片 | section+article |
| 联系区域 | 邮箱、简单的联系表单 | section+form |
| 页脚 | 版权信息、社交链接 | footer |
先画出这个结构后，HTML 的正文内容会非常自然，而且写完之后不会出现“结构边写边乱”的情况。
5.2 用语义化标签搭出页面骨架
根据上面规划的结构，搭建一个比较完整的 HTML 骨架：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的作品集</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="site-header"> <nav class="nav"> <a href="#home" class="brand">MySite</a> <ul> <li><a href="#about">关于</a></li> <li><a href="#projects">作品</a></li> <li><a href="#contact">联系</a></li> </ul> </nav> </header> <main> <section id="home" class="hero"> <h1>你好，我是前端学习者</h1> <p>正在用 HTML5 和 CSS3 构建更好的网页。</p> <a href="#projects" class="btn">查看作品</a> </section> <section id="about" class="about"> <h2>关于我</h2> <p>这里放一段自己的介绍，讲清楚你在做什么、擅长什么。</p> </section> <section id="projects" class="projects"> <h2>作品展示</h2> <div class="project-list"> <article class="project-card"> <h3>项目 A</h3> <p>项目描述。</p> </article> <article class="project-card"> <h3>项目 B</h3> <p>项目描述。</p> </article> </div> </section> <section id="contact" class="contact"> <h2>联系我</h2> <form action="#" method="post"> <label for="email">你的邮箱</label> <input type="email" id="email" name="email" required> <button type="submit">发送</button> </form> </section> </main> <footer class="site-footer"> <p>© 2026 MySite</p> </footer> </body> </html>这段代码包含了一整个静态页面所需的基本模块。注意，class 命名在这里是为了配合 CSS 控制布局和视觉，但 HTML 本身仍然通过语义化标签确定了每个区块的职责。
5.3 用 Flexbox 和 Grid 完成响应式布局
接下来是 CSS 部分。先把基础样式写好，再处理布局。
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--bg-color); } .nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; } .nav ul { display: flex; gap: 16px; list-style: none; } .hero { text-align: center; padding: 80px 24px; } .project-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .project-card { border: 1px solid #ddd; border-radius: 12px; padding: 24px; }这里同时用到了 Flexbox 和 Grid。Flexbox 处理导航条的项目排列和间距，Grid 处理作品卡片的二维排列。视觉效果上，作品区域会自动适应屏幕宽度：宽屏时多列并排，窄屏时卡片自动换行。
5.4 用 CSS 变量和媒体查询实现多端适配
为了让页面兼顾不同屏幕，可以定义主题变量，并用媒体查询调整窄屏下的布局。
:root { --bg-color: #f8f9fa; --text-color: #333; --primary-color: #3498db; } body { background: var(--bg-color); color: var(--text-color); } a { color: var(--primary-color); }常见断点写法：
@media (max-width: 768px) { .nav { flex-direction: column; gap: 12px; } .hero { padding: 48px 16px; } }另外，所有图片都建议加上这个规则，防止大图撑破布局：
img { max-width: 100%; display: block; }这步做完后，页面在手机、平板和桌面宽度下都能正常阅读。响应式不是“把每个尺寸都调一遍”，而是用弹性单位、自动网格和媒体查询，让页面自己适配不同环境。
5.5 上线前的可访问性和兼容性检查清单
页面写完不等于结束。这里给你一个最简单但有效的检查清单，每一条都能在真实项目中避免常见问题：
- HTML 里是否有且仅有一个
main标签。 - 导航链接是否真正能跳到对应区块，比如
href="#about"指向id="about"。 - 每个表单控件是否都有对应的
<label>。 - 图片是否设置了描述性的
alt。 - 文字颜色和背景色对比度是否足够清晰。
- 是否能在键盘上 Tab 到所有可交互元素。
- 在 Chrome 或 Edge 里开发者工具切到手机模式，检查主要断点下的布局是否错乱。
这些检查不需要高级工具，几分钟就能过一遍。它养成的习惯，比记住某个 CSS 属性值重要得多。
6. 页面没有生效？按这条排查链路走，比自己瞎试快得多
新手写页面，最常遇到的挫败感不是“不会写”，而是“明明写了，页面不生效，也不知道问题在哪”。这时候不要在浏览器和编辑器之间来回刷新瞎猜，按下面的顺序去排查，基本五分钟内能定位大多数问题。
6.1 第一步：先看 HTML 结构
打开浏览器开发者工具，切到 Elements 面板，看页面实际渲染出来的 DOM 结构。重点看标签是否闭合正确、嵌套是否合理。
常见情况：div或section忘了写闭合标签，导致后面的元素被浏览器当成子元素处理，CSS 样式自然无法命中预期目标。在这一步里，你不需要背下所有标签规则，只需要养成“结构不对，后续一切皆有可能异常”的意识。
6.2 第二步：再查 CSS 层叠和优先级
样式没生效，很多时候不是文件没挂上，而是选择器优先级不够，或者被后面更具体的规则覆盖了。CSS 优先级的基本顺序是：
内联样式 > ID 选择器 > 类选择器 > 标签选择器
如果你写了.nav ul li a {}，想覆盖一个a标签的默认颜色，通常没问题；但如果你想用a {}去覆盖.nav-link {}里的颜色，大概率不会成功，因为类选择器优先级更高。
排查时可以临时给目标元素加一个很显眼的 border，看是否被命中。能命中，说明选择器没问题；不能命中，就去检查优先级和规则顺序。
6.3 第三步：检查资源路径和浏览器缓存
CSS 文件没生效，另一个高频原因是link标签里的路径写错了。在本地文件结构里，css/style.css是相对路径，需要从当前页面文件位置出发去理解。如果页面在my-site/index.html，CSS 文件在my-site/css/style.css，那么href="css/style.css"是对的。如果结构不一样，路径也要相应调整。
浏览器缓存也会导致修改后的样式没有立刻生效。简单页面可以直接用强刷新组合键来强制刷新，比如 Chrome 里的Ctrl + Shift + R。如果用了构建工具，还需要确认是否因为文件名哈希没有更新导致浏览器命中了旧缓存。
6.4 第四步：最后看浏览器差异和特性兼容性
CSS3 和 HTML5 的很多新特性在不同浏览器里的支持程度不同。遇到某个样式在某个浏览器里完全不生效，可以去 caniuse 这类兼容性查询网站确认该特性的支持范围。旧浏览器可能需要厂商前缀、polyfill，或者采用“渐进增强”的思路：先提供一个所有浏览器都能看的基础版本，再为支持新特性的浏览器叠加增强效果。
CSS 也提供了特性检测的写法：
@supports (display: grid) { .project-list { display: grid; } }它能判断浏览器是否支持某个声明，支持时才应用对应样式。对于需要兼容老环境的项目，这个方案非常实用。
6.5 把排查经验沉淀成自己的“三层定位法”
以上排查链路可以总结成一个通用框架，以后遇到任何页面渲染问题都可以直接套用：
- 先确认结构和内容是否正确：打开开发者工具看 DOM。
- 再看样式规则是否真正命中元素：检查选择器、优先级和层叠顺序。
- 最后查环境和资源边界：路径、缓存、浏览器兼容性。
这三点是自下而上的定位顺序，大多数新手遇到的问题都集中在前两层。永远先怀疑最简单的环节，不要一上来就猜测是构建工具或操作系统的问题。
学完之后，下一步最该做什么
如果你今天把所有代码都跟着敲了一遍，接下来的重点不是立刻再找一个新教程，而是做两件事。
第一，把作品集页面继续扩展。给作品卡片加更多字段、调整配色、增加一个主题切换按钮、或者用学到的一点 JavaScript 给导航加平滑滚动。每一步都会让你更熟悉 HTML 和 CSS 的组合方式。
第二，回到你的真实需求里找项目。想想平时有什么页面让你觉得不够好，试着用 HTML5 和 CSS3 把它重新实现一遍，哪怕只是静态还原。用真实问题驱动学习，远比按教程顺序一章章刷下去更容易坚持。
HTML5 和 CSS3 的语法量并不少，但它们的核心并不在“记住全部属性”，而在于你能不能把结构、语义和样式分开思考，再让它们协作起来。掌握这个模型之后，不管以后学 JavaScript、框架还是工程化工具，底层都不会虚。