HTML个人主页制作教程：个人简介页面设计

或换行。标签用得对不对，直接影响用户能不能找到你、读到你。

那么，从哪几项入手最稳？

• 里只放姓名、标语和主导航（最多4项），别贪心塞进联系方式或项目列表。
• 每个核心模块用独立的
  、

  包起来，ID必须唯一且小写——这样锚点跳转才可靠。
• 头像、项目截图必须用标签，禁用background-image，否则alt属性写不了，无障碍和SEO全崩。

图片和链接怎么写才不出404和可访问性问题

本地测试时点开404链接只是报错；上线后用户看到的是“页面未找到”，第一印象就没了。

• 头像： ··描述角色和能力，不是“我的照片”。
• 项目截图： ··具体说明功能和交互细节。
• 邮箱链接必须带mailto:前缀：联系我。
• GitHub等外部链接加rel="noopener noreferrer"，防opener漏洞；锚点跳转如回到顶部，对应目标必须存在且ID大小写一致（
  ）。

CSS怎么写才不翻车又显现代感

现代感不靠阴影堆叠或动画轰炸，而是克制的排版节奏和移动优先的真实适配。

• max-width: 65ch控制正文宽度，比800px更适应不同字体渲染。
• line-height: 1.7是段落呼吸感的底线，低于1.5就显压抑。
• 字体栈用系统默认：font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 不加载Web Font也能质感在线。
• 响应式从第一行开始：HTML 必须有；所有宽度优先用%或rem，禁用固定px宽度。
• 深色模式至少覆盖文字与背景：@media (prefers-color-scheme: dark) { body { background: #121212; color: #e0e0e0; } }。

最容易被忽略的其实是焦点样式——Chrome点击链接后默认蓝色外框消失，很多人直接outline: none清掉，结果键盘用户完全无法导航。保留它，或用outline: 2px solid #007aff替代，才是真现代。