学校官网首页应以语义化HTML结构为核心，确保信息清晰、访问路径短、适配中老年教师和家长，强调无障碍访问、响应式设计与内容可读性。
学校官网首页不需要堆砌特效，核心是信息清晰、访问路径短、适配中老年教师和家长群体——这意味着语义化 HTML 结构比花哨动画更重要，响应式不是“加上 media query 就完事”，而是从 <header></header> 到 <footer></footer> 每一层都要考虑触控目标大小、文字可读性和导航直觉。
用语义化标签组织页面骨架，别再套 <div class="header">
<p>浏览器和屏幕阅读器靠语义标签理解页面逻辑。学校官网尤其需要让视力障碍家长或年长教师能用键盘 Tab 键顺畅跳转到“招生简章”“联系方式”等关键区块。</p>
<ul>
<li>
<code><header></header> 放校徽、校名、主导航（含“学校概况”“新闻动态”“教学资源”“家校互动”）
<main></main> 包裹，内部按信息优先级分 <section></section>：比如 <section aria-labelledby="news-title"></section> 配合 <h2 id="news-title">校园新闻</h2>
<aside></aside>，不要塞进 <div> 里
<li>
<code><footer></footer> 必须包含办学许可证号、备案号（京ICP备12345678号）、联系电话和地址——这是教育局检查硬性要求轮播图不是必须的，但要是加就得满足三项底线
很多学校首页强行上自动轮播，结果家长根本来不及看清“期末考试时间安排”就切到了“食堂菜单”。如果真要保留，必须做到：
- 默认暂停：用
autoplay="false"或 JS 控制初始状态为paused - 键盘可操作：按
Tab能聚焦到左右箭头，Enter或Space触发切换 - 每张图配
<figcaption></figcaption>，且文字不可仅为图片 alt 属性——例如轮播第 2 张是“科技节开幕”，<figcaption>2024 年校园科技节今日开幕，共设 12 个体验展区</figcaption>
更推荐用静态重点图+文字卡片组合：<figure><img src="campus.jpg" alt="校园主楼外景"><figcaption>北京市第一中学主教学楼</figcaption></figure>，加载快、无障碍友好、SEO 友好。
立即学习“前端免费学习笔记（深入）”；
导航栏在小屏下必须用 <button></button> + <nav></nav> 原生方案
别用 jQuery Mobile 插件或自己写 toggle 类名控制显隐。移动端导航折叠必须依赖原生交互逻辑：
- 触发按钮写成
<button aria-expanded="false" aria-controls="main-nav">菜单</button> - 导航容器为
<nav id="main-nav" hidden></nav>，JS 点击时只切换hidden属性和aria-expanded值 - 禁止用
display: none隐藏——这会让屏幕阅读器直接忽略整个导航 - 点击外部区域关闭菜单时，确保焦点回到触发按钮，避免键盘用户迷失
字体、行高、链接样式直接决定家长是否愿意多看两眼
学校网站的读者不是程序员，他们可能用 2015 年的老款 iPad，也可能戴着老花镜。这些 CSS 细节不能妥协：
- 正文字体用系统默认无衬线体：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;，禁用自定义 Web Font（首屏加载慢、部分安卓机渲染模糊） - 正文行高至少
line-height: 1.6，16px 字号下就是 25.6px，给字母上下留足呼吸空间 - 所有链接必须有下划线：
a { text-decoration: underline; }，别信“美观”而取消——中老年用户依赖下划线识别可点击元素 - 电话号码写成
<a href="tel:010-87654321">010-87654321</a>，微信公众号名称用<a href="https://weixin.qq.com/r/...">北京一中官微</a>，别只放二维码
最常被忽略的是表单：招生报名页的 <input type="text"> 至少 44px 高，<label></label> 必须显式关联 for 属性，否则 iPhone 语音输入无法准确定位字段。
