第一次搭个人网站的小白教程和坑点

这个站是我从空文件开始一行一行写的。写的过程中踩的坑，比学会的东西多。按疼的程度排一下，希望你能少疼几次。

坑 1：把「切换页面」全写在 JS 里

我最早做的是单页多 tab，靠 JS 切 `display`。在浏览器里一切正常，放到某些预览环境里点了没反应——因为预览用的沙箱 iframe 默认不开脚本权限。

教训：能用 <a href="xxx.html"> 解决的事，不要用脚本。导航是网站的地基，地基不该依赖装饰。

我在 head 里挂了一个字体 CDN 的样式表。本地测试时页面一直转圈，打开控制台才发现请求卡住了。阻塞渲染的外部样式表只要连不上，整页就白屏。

教训：字体用系统栈就够好看。真要引外部资源，至少给它一个兜底，别让它挡住内容。

我用 <symbol> + <use> 复用插画，结果所有插画都被压成了扁扁的一条。

原因：<use> 不会把 symbol 的 viewBox 带过去，外层 <svg> 没有 viewBox 就退回默认的 300×150。

教训：页面上每一个外层 <svg> 都要自己写 viewBox，别指望继承。

我给元素加了 `opacity: 0`，靠滚动触发显示。听起来没问题，但只要脚本没跑起来，整个页面除了第一屏全是空白——而且从源码看内容明明都在。

教训：「初始隐藏」必须挂在一个由脚本添加的类下面（比如 `.js .reveal{opacity:0}`），脚本不在就谁都别藏。最好再加个超时兜底，脚本挂了也能显示。

想给关键词加一块色底，用了 `background: linear-gradient` + `background-size` 的写法。英文没问题，中文的下缘被切掉了一截。

原因：那个方案是按 em 盒算的，而中文的字形并不填满 em 盒。

教训：中文高亮用 `display:inline-block` + `padding` 最稳，别跟字形度量较劲。

我做过一批「看起来能点、点了没反应」的标签和卡片。用户第一反应不是「这里不可用」，而是「你的网站坏了」。

教训：要么让它真的能点，要么别把它做成可点的样子。假装可点是体验上最差的一种。

我在本地开文件测，一切正常；换成 HTTP 服务，链接就出问题；再换预览沙箱，脚本又没了。

教训：「能打开」和「在别人的环境里能打开」是两件事。至少测三种：直接开文件、本地起服务、以及真实要发布的地方。

这七个坑排下来你会发现，没有一个是「不会写 CSS」的问题，全是对运行环境的假设错了。先保证它在最差的环境里也能打开，再谈好看——顺序反了，做的所有东西都可能是白做的。