打开XMind，网页新建一个空白画布，制作在中心节点敲下“网页制作”四个字。导图别急着往外拉分支，网页先盯着它看十秒——你要做的制作不是一个漂亮的树状图，而是导图一张能让你在动手写代码时不迷路的地图。我见过太多人把思维导图画成了教科书目录，网页分类工整，制作颜色协调，导图结果真到写HTML的网页时候，还是制作不知道从哪下手。

先拆第一层分支：结构、导图样式、网页行为。制作这是导图网页的三根支柱，缺一个都站不稳。结构就是HTML，负责告诉浏览器“这里有个标题，那里有个段落，底部有个导航栏”。样式是CSS，决定这些东西长什么样——字号多大、颜色多深、间距多宽。行为归JavaScript管，点击按钮弹窗、滚动加载图片、表单验证，全是它的活。三根支柱各司其职，但别把它们画成三棵独立的树，因为它们在实际项目里是缠在一起的。你写一个按钮，HTML定义它，CSS美化它，JS让它能响应点击，思维导图上应该有一条虚线把它们连起来。

结构分支往下走，分出头、体、语义标签。head里放meta、title、link，body里放header、main、footer。语义标签这块值得单独拉一条线出来，因为很多人还在用div堆页面。header、nav、article、section、aside、footer，这些标签浏览器不会给你加任何默认样式，但屏幕阅读器和搜索引擎能读懂。我自己的习惯是：能用语义标签就不用div，实在找不到合适的再用。表单单独拉一个子分支，input、select、textarea、button，每个下面再标上常用属性，比如input的type、name、required。画到这里你会发现，HTML的节点其实不多，但每个节点都值得展开两三层。

CSS分支比HTML复杂得多。选择器、盒模型、布局、响应式、动画，五个子节点跑不掉。选择器下面分基础选择器、组合选择器、伪类伪元素，伪类里再把:hover、:focus、:nth-child拎出来。盒模型就四个词：content、padding、border、margin，但box-sizing这个属性得单独标红，因为border-box和content-box的差异坑过太多人。布局是重头戏，float和position可以画小一点，flex和grid必须放大。flex一维排列，grid二维网格，现在做页面基本这两个就够用了。响应式下面挂媒体查询和相对单位，rem、em、vw、vh，每个写一行注释说明使用场景。动画分transition和animation，transition管状态切换的过渡，animation管关键帧循环。

JavaScript分支最容易画歪。有人一上来就列语法：变量、函数、循环、条件。这些当然要有，但思维导图不是语法手册。我的画法是按“操作什么”来分：操作DOM、操作数据、操作浏览器。DOM下面挂querySelector、addEventListener、classList；数据下面挂数组方法、对象操作、JSON解析；浏览器下面挂localStorage、fetch、setTimeout。ES6的新特性单独拉一条线：let/const、箭头函数、模板字符串、解构赋值、Promise。这条线不用太细，因为语法细节查文档比看图快。

画完这三根主分支，再拉一条横线穿过它们，写上“工具链”。版本控制Git、包管理npm、构建工具Vite或Webpack、代码格式化Prettier。这条线不用展开太深，知道它们存在、知道什么时候该用就行。最后在画布右下角加一个节点：“部署”。Vercel、Netlify、GitHub Pages，选一个把做好的页面传上去，看到公网地址那一刻，这张思维导图才算真正闭环。

别把这张图当圣旨。每做完一个项目，回来改几笔——删掉没用的节点，补上踩坑后才知道要加的分支。思维导图的价值不在画的那半小时，而在你每次打开它时，能三秒内找到下一步该干什么。