这是我用html制作的网页：从零到上线的完整记录

为什么选择手写 HTML

很多人做网页第一反应是找模板或建站工具。我这次刻意从空文件开始写，目的是把结构、样式、行为这三层彻底理清楚。手写 HTML 的好处是可控：每一行代码都知道它为什么在那里，出了问题也能定位到具体位置。

这个网页是一个个人作品展示页，包含首页介绍、项目列表和联系方式三个区块。

动手写标签之前，我先在纸上画了区块划分。大致分为：顶部导航、主视觉区、项目卡片区、页脚。对应到 HTML 就是 header、main、section、footer 这几个语义化标签。

语义化标签不只是好看。它让屏幕阅读器能正确识别内容层级，也让搜索引擎理解页面重点。能用

就不用一堆

。

页面骨架大致是这样：

…

结构定下来之后，CSS 的编写就变成填空题。

布局我用了 Flexbox 为主、Grid 为辅的方案。导航栏和卡片内部用 Flexbox，项目列表这种二维排列用 Grid。

有一个容易踩的坑：给容器设了 display: flex 之后，子元素的宽度可能被压缩。解决方式是给需要固定的元素加 flex-shrink: 0，或者直接指定 flex-basis。

颜色和间距我用了 CSS 变量统一管理：

:root {

–main-color: #1a1a1a;

–accent: #2f6fed;

–gap: 24px;

}

这样改主题色只需要动一个地方，比全局搜索替换靠谱得多。

我一开始只写了一个 @media (max-width: 768px)，结果在 400px 宽的手机上还是溢出。后来改成移动优先：先写小屏样式，再用 min-width 逐步增强。

关键点有三个：

媒体查询的断点不要照抄别人的数值，根据自己的内容在什么宽度开始变丑来决定。

代码写完不等于网页能用。我做了几项检查：

部署用的是静态托管服务，把 HTML、CSS、JS 和图片一起传上去就行，不需要服务器环境。

手写一个网页花的时间可能比套模板多，但收获是具体的：知道了盒模型怎么算、知道了为什么会有外边距塌陷、知道了响应式到底在响应什么。这些东西看教程时觉得懂了，真写一遍才会暴露问题。

如果你也在学前端，建议找一个真实的小需求，从空白文件开始写一个页面。不用复杂，一个就够。写完你会发现，很多之前模糊的概念会变得清晰。