论坛首页应采用语义化结构：<header>含logo与<nav>主导航，<main>内用<section>分隔“热门板块”（每项为<article>）和“最新动态”，<footer>仅放版权信息；禁用多层div套娃，图片设max-width:100%，链接确保相对路径正确且指向真实文件。
轻量级论坛首页不需要框架或后端，用纯 HTML + CSS 就能跑起来——但新手常卡在结构混乱、响应式失效、链接跳转错位这三处。
怎么组织论坛首页的语义化结构
别一上来就写 <div class="container"> 套娃。浏览器和屏幕阅读器靠语义标签理解内容层级，论坛首页核心是「导航+板块列表+最新帖」三块。
-
<header>放 logo 和主菜单（含login、register链接） -
<main>里用<section>分隔「热门板块」和「最新动态」，每个板块用<article>包裹标题+描述+帖子数 -
<footer>只放版权和备案号，别塞友情链接——那属于运营层，不是结构层
错误示范：<div id="nav"> 里嵌套 5 层 <div>；正确做法：直接用 <nav>，内部用 <ul><li><a>。
CSS 怎么让首页在手机上不缩成一团
关键不是写多少媒体查询，而是先堵住默认行为漏洞：移动端 viewport 缺失、图片撑破容器、链接点击区太小。
立即学习“前端免费学习笔记（深入）”；
- 必须在
<head>里加：<meta name="viewport" content="width=device-width, initial-scale=1"> - 所有图片加
max-width: 100%; height: auto;，否则 iOS Safari 会强制拉伸 - 导航链接文字至少
16px，行高1.5，不然手指点不准 - 避免用
float布局板块——改用display: grid或flex，比如热门板块用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
常见现象：PC 端正常，手机上文字叠在一起——八成是忘了设 viewport 或用了固定像素宽（如 width: 960px）。
链接跳转为什么总打开空白页或 404
新手写的 <a href="post.html"> 在本地双击打开时会 404，因为浏览器用 file:// 协议加载，相对路径解析规则和服务器不同。
- 开发阶段用本地服务器启动：VS Code 装 Live Server 插件，右键“Open with Live Server”，地址变成
http://localhost:5500/ - 所有内部链接用相对路径，但确保文件在同一级目录，比如
index.html和post.html必须同在根目录，不能一个在/pages/post.html - 避免空链接：
<a href="#">会跳到页面顶部，想禁用就写<a href="javascript:void(0)">或加event.preventDefault()
调试技巧：右键链接 → “检查”，看 Elements 面板里 href 值是否拼错，Network 面板里点击后是否出现 404 请求。
真正难的不是写完首页，而是让每个板块链接指向真实存在的页面、每张图有对应 alt 文本、每个交互状态（hover/focus）都有视觉反馈——这些细节没补全，用户第一眼就会觉得“不专业”。
