必须包含三行元信息：防乱码、保移动端适配、助可访问性与翻译；CSS优先用Flex/Grid布局，关键断点加媒体查询；JS只做平滑滚动、导航高亮、暗色模式切换。
直接用 HTML + CSS + JS 三个文件就能搭出一个真能上线、手机电脑都正常显示的个人网站，不需要框架、不装 Node、不配服务器——关键不是“怎么建”，而是“哪些步骤不能跳”。
HTML文档结构必须带这三行元信息
很多本地双击打开白屏或手机上字体炸开，问题就出在 里漏了基础配置。缺一不可：
-
<meta charset="UTF-8">：否则中文变乱码，尤其表单提交时邮箱、姓名全丢字 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：没有它，移动端会默认按 980px 渲染，页面缩成一团，连导航都点不准 -
：不只是 SEO 友好，屏幕阅读器和 Chrome 翻译功能依赖这个值，否则“关于我”可能被译成“about me”再译回中文变成“关于我”
CSS响应式布局别堆媒体查询，先用 Flex/Grid 控制主干
新手常把所有样式写死，然后在 @media 里反复覆盖，结果断点一多就失控。实际更稳的做法是：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
display: flex或display: grid搭导航栏、作品卡片区、技能标签云这些区块，它们天生支持弹性伸缩 - 只在关键节点加媒体查询：比如
@media (max-width: 768px)改导航为汉堡菜单，@media (max-width: 480px)把两列作品卡片压成一列 - 图片别写死
width: 300px，改用max-width: 100%; height: auto，否则小屏直接溢出滚动条
JS交互只做三件事：平滑滚动、导航高亮、暗色模式开关
个人主页不需要复杂逻辑，但以下三个功能用户感知极强，且代码量少、容错高：
立即学习“前端免费学习笔记（深入）”；
-
scrollIntoView({ behavior: 'smooth' })替代#about锚点跳转，避免页面“咔”一下闪到顶部 - 监听
scroll事件，用getBoundingClientRect()判断当前可视区域落在哪个<section id="xxx"></section>上，动态给对应导航项加class="active" - 暗色模式用
prefers-color-scheme媒体查询兜底，再加一个按钮切换document.documentElement.classList.toggle('dark')，CSS 里用:root和.dark分别定义变量
真正卡住人的往往不是技术点，而是路径依赖：非得先学完 Flex 再碰 Grid，或者等“完全搞懂 media query”才敢写第一行响应式 CSS。其实只要保证 、viewport、max-width: 100% 这三处不漏，剩下就是边改边看——手机拍个照，电脑开开发者工具切设备模式，比任何教程都准。
