做项目比刷标签文档更有效，因为项目迫使你在真实场景中解决语义化选择、css优先级冲突、跨浏览器差异、移动端适配等实际问题，而纯学文档无法触发这些决策与调试过程。
项目驱动是唯一能绕过“学了不会用”陷阱的路径——不靠堆知识点，靠在真实页面里反复调试结构、样式和交互的组合。
为什么做项目比刷标签文档更有效
单独记 <nav></nav> 是语义化标签没用，但在做一个企业官网导航时，你必须决定：是否用 <ul></ul> 套链接、要不要加 aria-current="page"、折叠逻辑放 JS 还是纯 CSS；这些决策只有在项目中才会真实出现。
常见错误现象包括：写完 5 个页面才发现所有 <header></header> 结构不一致、表单校验逻辑散落在不同 script 标签里无法复用、图片加载后布局抖动却查不出原因。
- 纯看文档容易忽略浏览器默认样式差异（比如
<button></button>在 Safari 和 Chrome 的 padding 不同） - 项目中暴露的 CSS 优先级冲突，比教程里的“权重计算表”更难缠
- 移动端适配不是加个
viewport就完事——<input type="tel">在 iOS 上会触发数字键盘，但type="number"可能带微调按钮，影响体验
选项目要卡住三个硬指标
不是所有“练手项目”都值得投入时间。一个合格的进阶项目必须同时满足：
-
有明确 DOM 操作需求：比如轮播图要动态切换
class、商品筛选要增删<li>节点、表单提交后要清空并重置验证状态 -
含至少一处语义化冲突点：例如“用户评论区”该用
<section></section>还是<article></article>？侧边栏广告位能否用<aside></aside>？这些边界问题逼你查规范、读 MDN -
需要跨文件协作痕迹：CSS 文件里不能只写
.btn { ... }，得出现类似.header-nav .logo img这种带上下文的选择器，否则学不会组件隔离思维
像“个人简历静态页”这种零交互、无复用、全靠复制粘贴的项目，练完只是熟悉了标签拼写，不是进阶。
每个项目做完必须检查这三件事
很多人做完就扔，结果下次遇到同类问题还是重头试错。真正起效的练习，收尾动作比编码更重要：
- 打开 Chrome DevTools 的 Elements 面板，逐层折叠，确认没有多余嵌套（比如
<div><div><p>文本</p></div></div>） - 用 Lighthouse 跑一次 Accessibility 审计，重点看
<form></form>是否每个<input>都有对应<label></label>，<nav></nav>是否漏了aria-label - 把所有内联样式（
style="..."）和内联脚本（<script>...</script>）全部移出 HTML，哪怕暂时多建一个utils.js
最容易被忽略的是第三点：HTML 文件里混着 JS 和 CSS，表面快，实则锁死了后续拆分组件、接入构建工具的所有可能。模板一旦写死，改一个 logo 就得翻 8 个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
